防止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

根据Ian友好提出的建议,这是我的工作解决方案.

首先,我将每个视频的子源元素更改为具有如下属性data-src:

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

然后,在使用http://detectmobilebrowsers.com/上提供的脚本执行移动检查后,我修改了该脚本以包含iPad等(此处有相关的答案)我只是使用以下脚本自动更新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 设置元素的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();
   }
}

这样的东西可能适合你,虽然你可能不得不玩一下.