防止HTML5视频在移动设备上下载文件 - videojs [英] Prevent HTML5 videos from downloading the files on mobile - videojs

问题描述

所以我目前正在建立一个包含四个视频的旋转木马的网站，每个视频都通过挂钩到Bootstrap 3旋转木马的 slide.bs.carousel 事件。

So I'm currently building a website that has a carousel containing four videos, each video is triggered to play by hooking in to the Bootstrap 3 carousel's slide.bs.carousel event.

每个视频都嵌入在页面中，如下所示：

Each of the videos are embedded in the page like so:

<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视频的自动播放和预加载特别强加的限制（两者都被禁用）并且需要用户交互来触发播放）我已经决定省略移动和视频的视频。选择静态图像。这是相对简单的，因为阻止视频覆盖内容所需的一切都是隐藏它们的媒体查询。

Now, given the restrictions imposed particularly by Apple on the autoplaying and preloading of HTML5 videos (both are disabled and user interaction is required to trigger playback) I've decided to omit the videos for mobile & opt for static images instead. This is relatively simple, since all that's required to stop the video from overlaying the content is a media query that hides them.

这就是说，我发现它非常困难防止视频被下载并且开销大量。

That said, I'm finding it very difficult to prevent the videos from being downloaded and the overhead is massive.

例如，我有一个脚本来检查用户当前是否正在访问从移动设备来看，我已经尝试过：

For example, I have a script to check whether the user is currently visiting from a mobile device, as such, I've tried:

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上调用，这也意味着资源已经开始下载。

This successfully removes the elements, but this has to be called on DOMReady which also means the resources already begin download.

如何停止在移动设备上加载视频？我想找到一个最好使用VideoJS的解决方案。

How do I stop the videos from loading on mobile? I'd like to find a solution that uses VideoJS inherently preferably.

推荐答案

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

Based on the suggestions Ian kindly made, here is my working solution.

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

Firstly, I changed each video's child source elements to have an attribute data-src like so:

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

然后，使用 http://detectmobilebrowsers.com/ 我修改了包括iPad等（这里的相关SO答案）我只是使用以下脚本自动更新 src 每个视频的属性（如果我们在桌面上是我的话）：

Then, after performing a mobile check using the script available at http://detectmobilebrowsers.com/ which I modified to include iPads etc (related SO answer here) I simply used the following script to automatically update the src attribute of each video (if we're on desktop in my case):

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(); 

就是这样！移动设备上没有任何东西加载，我可以对它将加载或不加载的设备进行相当精细的控制。

And that's it! Nothing loads on mobile devices anymore and I can have fairly granular control over the devices it will or won't load on.

希望这有助于某人。

这篇关于防止HTML5视频在移动设备上下载文件 - videojs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！