阻止HTML5视频在移动设备上下载文件-video.js

gdgr 发表于 Dev

gdgr

因此，我目前正在建立一个网站，其中包含一个包含四个视频的轮播，每个视频都通过连接到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的解决方案。

gdgr

根据Ian的建议，这是我的工作解决方案。

首先，我将每个视频的子源元素更改为具有如下属性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();

就是这样！移动设备上再也没有负载了，我可以对将要或不会加载的设备进行相当精细的控制。

希望这对某人有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。