モバイルでの動画の読み込みを停止します。

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. 可視の場合は、今すぐ新しい値をピックアップして、video要素に​​を呼び出すdata-src
srcにコピーします。

$(
 
    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"; 
}