在移動設備上停止加載背景視頻

Question

我有一個視頻頭，我只想在桌面上播放，在手機上使用靜態圖像頭。我可以將視頻隱藏在移動設備上，看起來效果不錯，但視頻仍在後臺加載，並減慢了頁面加載速度。如何在移動設備上停止加載視頻。

<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

假設你設置通過CSS的知名度，或在早期的JS代碼，你可以做這樣的事情：

1. 包括data-src屬性，而不是src您視頻元素。如果我們不需要，不需要加載src。
2. 如果可見，複製data-src到src
3. 現在所說的video元素​​，拿起新的價值。

$(
 
    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>

或者沒有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

集<video>poster屬性值路徑圖像文件。在load事件window檢查條件以確定是否將.src的<video>元素設置爲視頻文件的路徑。

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

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