防止 HTML5 视频在手机上下载文件 - videojs答案

【问题标题】：Prevent HTML5 videos from downloading the files on mobile - videojs防止 HTML5 视频在手机上下载文件 - videojs
【发布时间】：2020-08-03 15:04:56
【问题描述】：

所以我目前正在构建一个网站，该网站有一个包含四个视频的轮播，每个视频都通过连接到 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 的解决方案。

【问题讨论】：

值得注意的是，在适用于 Android 的 Chrome v43.02357.93 上，我注意到通过媒体查询隐藏的视频根本不会下载。我已经通过网络选项卡中的 chromes 调试工具对此进行了测试。这是否只是 Chrome 的事情我不能说，提供的解决方案仍然是很好的技术。
如果视频有src会被下载，CSS不能改。

标签： javascript html video

【解决方案1】：

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

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

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

然后，在使用http://detectmobilebrowsers.com/ 提供的脚本执行移动检查后，我将其修改为包含 iPad 等 (related SO answer here)，我只是使用以下脚本自动更新每个视频的 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();

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

希望这对某人有所帮助。

【讨论】：

很高兴我写的内容有所帮助。现在的问题是，哪一个应该被标记为答案，我的 - 哪个让你走上了正确的道路，还是你自己的答案？ ;-)
我在考虑这个！从技术上讲，我的答案是该问题的正确答案，并且它是与伪代码相反的代码。为了善良，我会让你决定:)
啊，这太苛刻了，因为当你很好的时候我不能刻薄，所以把你的作为答案：-p
很好，在线外交交流！
我对这个解决方案有疑问。它很好地复制了 src URL，但视频没有开始下载。我想知道是不是因为我的视频没有控件 - 它应该自动播放。

【解决方案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();
   }
}

类似的东西可能对你有用，尽管你可能需要尝试一下。

【讨论】：

【解决方案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'))
    }); 
}

【讨论】：