Stop Video von Laden im Hintergrund auf Handy

Question

Ich habe einen Video-Header, den ich nur auf dem Desktop mit einem statischen Image-Header auf Handy spielen möchte. Ich kann das Video auf dem Handy ausblenden und es sieht so aus, als ob es funktioniert, aber das Video wird immer noch im Hintergrund geladen und verlangsamt das Laden der Seite. Wie kann ich verhindern, dass das Video überhaupt auf Mobilgeräte geladen wird?

<video id="bgvid" class="hidden-xs ">  
    <source type="video/mp4" src="myvideo.mp4"></source> 
</video> 

<img alt="" style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" /> 

Answer 1

Angenommen, Sie Sichtbarkeit über CSS sind einstellen, oder in früheren JS-Code, können Sie etwas tun:

1. Fügen Sie data-src auf statt src Attribute Ihre Videoelemente. Kein src zum Laden, wenn wir es nicht brauchen.
2. sichtbar Wenn kopieren data-src-src
3. , jetzt .load() auf dem video Element aufrufen, um die neuen Werte zu holen.

$(
 
    function() { 
 
    var bgv = $('#bgvid'); 
 

 
    if (bgv.is(':visible')) { 
 
     $('source', bgv).each(
 
     function() { 
 
      var el = $(this); 
 
      el.attr('src', el.data('src')); 
 
     } 
 
    ); 
 

 
     bgv[0].load(); 
 
    } 
 
    } 
 
)

.hidden-xs { 
 
    display: none; 
 
} 
 

 
/* dummy criterion for demo purposes */ 
 
@media screen and (min-width: 400px) { 
 
    .hidden-xs { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<video id="bgvid" class="hidden-xs " controls> 
 
    <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4"></source> 
 
    <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv" /> 
 
</video>

Oder ohne jQuery:

window.addEventListener("load", function() { 
 
    var bgv = document.getElementById("bgvid"); 
 

 
    // what jQuery checks under the hood 
 
    var visible = !!(bgv.offsetWidth || 
 
    bgv.offsetHeight || 
 
    bgv.getClientRects().length); 
 

 
    if (visible) { 
 
    var children = bgv.getElementsByTagName("source"); 
 

 
    for (var i = 0; i < children.length; ++i) { 
 

 
     children[i].src = children[i].getAttribute("data-src"); 
 
    } 
 
    } 
 

 
    bgv.load(); 
 
});

.hidden-xs { 
 
    display: none; 
 
} 
 

 
/* dummy criterion for demo purposes */ 
 

 
@media screen and (min-width: 400px) { 
 
    .hidden-xs { 
 
    display: block; 
 
    } 
 
}

<video id="bgvid" class="hidden-xs " controls> 
 
    <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4"></source> 
 
    <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv" /> 
 
</video>

Answer 2

Set <video>poster Attributwert auf Bilddatei Pfad. Unter load Ereignis von window überprüfen Bedingungen, um zu bestimmen, ob .src<video> Element zu Pfad zu Videodatei festgelegt werden soll.

<video poster="myimage.jpg"></video> 

window.onload = function() { 
    if (/* conditions */ window.innerWidth > 480) 
    document.querySelector("video").src = "myvideo.mp4"; 
}