web-dev-qa-db-ja.com

HTML5ビデオがモバイルでファイルをダウンロードしないようにする-videojs

現在、4つの動画を含むカルーセルがあるウェブサイトを構築しています。各動画は、Bootstrap 3カルーセルのslide.bs.carouselイベント。

各ビデオは次のようにページに埋め込まれています。

<video id="somevideo" class="video-js vjs-default-skin m-hide" controls preload="auto" data-setup='{ "controls": false, "autoplay": false, "preload": "auto" }'>
  <source src="somevideo.mp4">
  <source src="somevideo.webmhd.webm">
</video>

ここで、特にAppleによるHTML5ビデオの自動再生とプリロードに課せられた制限を考慮して（両方が無効になっており、再生をトリガーするにはユーザーの操作が必要です）、モバイルおよび代わりに静止画像を選択します。ビデオがコンテンツをオーバーレイしないようにするために必要なのは、画像を非表示にするメディアクエリだけなので、これは比較的簡単です。

とはいえ、ビデオのダウンロードを防ぐのは非常に難しく、オーバーヘッドはmassiveです。

たとえば、ユーザーが現在モバイルデバイスからアクセスしているかどうかを確認するスクリプトがあるので、試してみました。

var check = false;
window.mobilecheck = function() {
    // Check for mobile here
    if (check === true) {
        // Device is mobile
        var videos = document.querySelectorAll('.video-js');
        for (var i = 0; i < videos.length; i++) {
            // videojs(videos[i]).destroy();
            videos[i].parentNode.removeChild(videos[i]);
        }
    }
}

これにより要素が正常に削除されますが、これはDOMReadyで呼び出す必要があります。これは、リソースがすでにダウンロードを開始していることも意味します。

モバイルでの動画の読み込みを停止するにはどうすればよいですか？ VideoJSを本質的に使用するソリューションを見つけたいのですが。

javascripthtmlvideo
22
gdgr

Ianが親切に行った提案に基づいて、これが私の実用的な解決策です。

まず、各動画の子ソース要素を変更して属性data-src そのようです：

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

次に、 http://detectmobilebrowsers.com/ にあるスクリプトを使用してモバイルチェックを実行した後、iPadなどを含めるように変更しました （related SOここで答えてください） 次のスクリプトを使用して、各ビデオのsrc属性を自動的に更新しました（私の場合、デスクトップにいる場合）：

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();

以上です！モバイルデバイスには何もロードされなくなり、ロードするデバイスまたはロードしないデバイスをかなり細かく制御できます。

これが誰かを助けることを願っています。

29
gdgr

これを行う方法の1つは、JavaScriptを介してsrc要素のvideo属性を設定し、メディアクエリに基づいてのみ（matchMediaを使用）設定することです。

つまり、コードの大部分はJavaScriptに移行する必要があります。

たとえば、HTMLは次のようになります。

<video data-mp4="video.mp4" data-webm="video.webm" class="video-js" controls></video>

そしてあなたのJavaScriptで（ここでは擬似コード、実際のJSではありません）：

if (window.matchMedia("(min-width: 640px)").matches) {
   // do nothing
} else {
   var videos = document.querySelectorAll('.video-js'),
       videoFile;
   for (var i = 0; i < videos.length; i++) {
      // Choose video type
      if (video[i].canPlayType("video/mp4") === "probably") {
         videoFile = video[i].getAttribute("data-mp4");
      }
      // do the same check for WebM here...
      video[i].src = videoFile;
      // Call whatever reload or refresh method video.js has
      // for example...
      video[i].refresh();
   }
}

あなたはそれで少し遊んでみなければならないかもしれませんが、そのような何かがあなたのために働くかもしれません。

19
Ian Devlin

IanとGDGRの回答に基づいて、私はこれを変更して複数のビデオで機能するようにしました。

<video class="mobile-no-load">    
    <source data-src="somevideo.mp4">
 </video>

if (window.innerWidth > 730) {   
    // get multiple videos
    var sources = document.querySelectorAll('video.mobile-no-load'); 
    // loop through the videos
    sources.forEach(function(source){ 
        // target the src attribute of the <source> element and set it to the data-src attribute
        source.childNodes[1].setAttribute('src', source.childNodes[1].getAttribute('data-src'))
    }); 
}
0
Shapeshifter