【问题标题】：Stop background video from downloading when used in Video tag (HTML5) for mobile devices在移动设备的视频标签 (HTML5) 中使用时停止下载背景视频
【发布时间】：2016-10-17 11:04:10
【问题描述】：

我在网站的几页上使用 FullPage.js 脚本来嵌入视频作为背景。

类似于这个脚本http://www.alvarotrigo.com/fullPage/examples/videoBackground.html

唯一的区别是我的视频大小在 3MB 到 7MB 之间。它在台式机上运行良好，在移动设备上下载同一页面很慢，因为它还会将视频与网页一起下载。

除了使用JavaScript删除src="video1.mp4"之外，是否有任何内置功能可以阻止视频在移动设备上下载

<video autoplay loop muted controls="false" id="myVideo">
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

此外，当我测试同一个网络 pingdom.com 网站时，它会多次下载同一个视频文件，这会增加页面大小。我只注意到这个网站速度测试平台。当我使用 Firebug 进行测试时，它只下载一次视频文件。

https://tools.pingdom.com/#!/coQYIA/http://www.alvarotrigo.com/fullPage/examples/videoBackground.html

【问题讨论】：

您可以使用 CSS 媒体查询来控制它，但需要一些实验。 Javascript - 像 detectmobilebrowsers.com 这样的库 - 肯定会更容易

标签： javascript html video fullpage.js

【解决方案1】：

据我所知，视频不会在 iOS 中自动播放。不确定它如何在其他设备或操作系统上运行，但我会说它们没有在 iOS 设备中下载。

剩下的，我想你可以使用回调afterResponsive，一旦页面进入响应模式或退出，它就会触发。这意味着您可以使用此方法检测您何时在“移动设备”中，然后做任何您想做的事情。

更多信息in the docs。

更新

似乎从 iOS 10 开始，对某些没有音频的视频的自动播放限制已被删除。 Check this other answer for more info

【讨论】：

我对此感到困惑，因为它会在 iPad 上的一个页面上自动播放视频，但其他页面上的视频代码在所有其他页面上都不相同。我什至清除了所有缓存，甚至使用了私人浏览器会话，但它只在这一页上不断发生。