Wie HTML5-Videos mit Bildern ersetzen nur auf mobilen Geräten

Question

Hintergrund

ich auf einem HTML5-Video Vergleich Schieber arbeite. Standardmäßig werden 50% eines Videos im oberen Bereich einer Sekunde angezeigt. Der Benutzer kann den Schieberegler in der Mitte der beiden Videos nach links oder rechts bewegen, um mehr oder weniger Videos zu sehen. Beide sind auf automatisches Abspielen und kontinuierliches Looping eingestellt.

Diese Funktion funktioniert jedoch nicht gut auf dem Handy, also habe ich beschlossen, dass Bilder statt Videos für mobile Geräte angezeigt werden sollten.

Problem Ich weiß, dass ich eine Medienabfrage oder JavaScript verwenden konnte, um kleine Bildschirmgrößen zu erkennen und den Inhalt zu wechseln. Allerdings muss ich das Gerät nicht auf die Bildschirmbreite ausrichten. Gibt es einen verlässlichen Weg, dies zu erreichen?

<div class="slider-video__container"> 
       <div class="slider-video__content"> 
        <video autoplay loop playsinline muted> 
         <source src="/img/slider-video/Fragment_02_Light.mp4" type="video/mp4"> 
        </video> 
       </div> 
       <div class="slider-video__seperator"> 
        <span class="slider-video__handle"></span> 
       </div> 
       <div class="slider-video__content"> 
        <div class="slider-video__content--resize"> 
         <video autoplay loop playsinline muted> 
          <source src="/img/slider-video/Fragment_01_Dark.mp4" type="video/mp4"> 
         </video> 
        </div> 
       </div> 
      </div> 

Answer 1

beste Methode ist Medien abfragt zu verwenden.

Sie können andere Navigator- oder Umgebungsvariablen überprüfen, um zu überprüfen, was das Gerät ist, aber nicht 100% ig zuverlässig sind.

Existieren mehr Methoden, um das Gerät zu erkennen, verwendet es die User-Agent-Zeichenfolge in Kombination mit bestimmten HTTP-Headern, um die mobile Umgebung zu erkennen.

Hier ist ein einfaches Beispiel für User-Agent comprobation mit JS:

if(! navigator.userAgent.match(/Android/i) && 
      ! navigator.userAgent.match(/webOS/i) && 
      ! navigator.userAgent.match(/iPhone/i) && 
      ! navigator.userAgent.match(/iPod/i) && 
      ! navigator.userAgent.match(/iPad/i) && 
      ! navigator.userAgent.match(/Blackberry/i)) 
    { 
     // do desktop stuff 

    } else if (navigator.userAgent.match(/iPad/i)) 
    { 
     // do tablet stuff 

    } 

Sie diese aus mehreren Sprachen überprüfen können, aber es gibt viele Optionen zur Verfügung bereits entwickelt.