防止 HTML5 視頻在移動設備上下載文件 - videojs

Question

所以我目前正在構建一個網站，它有一個包含四個視頻的輪播，每個視頻都是通過連接到 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 視頻的自動播放和預加載施加的限制（兩者都被禁用並且需要用戶交互才能觸發播放），我決定省略移動視頻並選擇靜態圖像。 這相對簡單，因為阻止視頻覆蓋內容所需的只是一個隱藏它們的媒體查詢。

也就是說，我發現很難阻止下載視頻，而且開銷很大。

例如，我有一個腳本來檢查用戶當前是否正在從移動設備訪問，因此，我嘗試過：

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 的解決方案。

Answer 1

根據伊恩好心提出的建議，這是我的工作解決方案。

首先，我將每個視頻的子源元素更改為具有如下屬性data-src ：

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

然后，在使用http://detectmobilebrowsers.com/上提供的腳本執行移動檢查后，我修改了該腳本以包含 iPad 等（此處的相關 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(); 

就是這樣！ 移動設備上不再加載任何內容，我可以對其將加載或不加載的設備進行相當精細的控制。

希望這可以幫助某人。

Answer 2

一種方法是通過 JavaScript 設置video元素的src屬性，並且僅基於媒體查詢（使用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();
   }
}

類似的東西可能對你有用，盡管你可能需要玩弄一下。

Answer 3

根據 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')) }); }