可以在 iOS 设备上强制 HTML5 视频预加载吗？

Posted 2023-05-08

【中文标题】可以在 iOS 设备上强制 HTML5 视频预加载吗？

【英文标题】：Can HTML5 video preload be forced on iOS devices?

【发布时间】：2016-04-22 15:21:13

【问题描述】：

我发现大量网站和参考资料证实，在 android 和 ios 移动设备上，html5 视频 preload='auto' 标记被故意忽略，浏览器等待用户手动按下播放按钮。

有什么办法可以推翻这种行为？

我们的情况是，我们计划让 iPad 在封闭的 Intranet WiFi 系统上运行，在这种情况下，蜂窝网络数据费用绝对不会成为问题。我们有视频文件需要在页面加载后自动跳到特定的播放位置。它在 Windows、Linux 或 MacOS 上的 Chrome 上运行良好，但 iOS 却没有。

iOS 或 Android 中是否有允许“预加载”在其他平台上运行的设置？

另外，我在页面上运行了 javascript 和 jQuery。是否有任何调用可以说服浏览器预加载视频，即使preload='auto' 没有？

我已经在http://www.stuartbruce.co.uk/editreader/javascript_video_test 上放了一个测试页面来展示会发生什么。在 Chrome 上，在除 iOS 之外的所有平台上，视频都会自动跳到镜头 3。在 iOS 上，没有任何反应。

Apple 在这个主题上自己的台词如下： User Control of Downloads Over Cellular Networks 但他们称其为“用户控制下载”这一事实意味着用户可以随意更改。但是，我看不到任何证据。可能吗？用户或 iPad 是否可以“选择加入”以允许 preload='auto' 正常工作？

【问题讨论】：

Android和iOS平台无法进行视频预加载以保留带宽。

感谢@jadw，但我已经了解 iOS；我的问题是它是否是一个可能被用户覆盖的设置，例如在带宽不会成为问题的内部网或仅限 WiFi 的情况下。此外，我的测试页面显示这只是 iOS 行为； Android 浏览器将预加载电影，但有一些注意事项。

【参考方案1】：

根据下面的更新/信息，如果您设置了 muted 属性，您应该能够做到这一点：

video.play();
video.addEventListener('canplay', function() 
    this.currentTime = 5;
);

New Policies for iOS文章指出：

默认情况下，WebKit 将具有以下策略：

元素现在将遵循自动播放属性，对于满足以下条件的元素： 如果元素的源媒体不包含音轨，则允许在没有用户手势的情况下自动播放。 元素也可以在没有用户手势的情况下自动播放。 如果元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。 元素只会在屏幕上可见时开始播放，例如当它们滚动到视口中时，制作 通过 CSS 可见，并插入到 DOM 中。 如果元素变得不可见（例如被滚动出视口），它们将暂停。 元素现在将支持 play() 方法，用于满足以下条件的元素： 元素将被允许在没有用户手势的情况下播放（），如果他们的源媒体不包含音轨，或者如果他们的静音 属性设置为 true。 如果元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。元素将是 允许在屏幕上不可见或不在屏幕上时播放（） 视口。 video.play() 将返回一个 Promise，如果不满足其中任何一个条件，它将被拒绝。 在 iPhone 上，元素现在可以内联播放，并且不会自动进入全屏模式 播放开始。 没有 playinline 属性的元素将继续需要全屏模式才能在 iPhone 上播放。 使用捏合手势退出全屏时，没有内联播放的元素将继续内联播放。

【讨论】：

感谢您不厌其烦地发布此内容。虽然最初的帖子已经有几年的历史了，但它仍然是一个松散的结局，如果有可能让它在 iPad 上作为标准工作，那就太好了。

不幸的是，这个新的修正和静音的想法似乎并没有解决这个问题。我在这里尝试过：stuartbruce.net/editreader/javascript_video_test?version=2 正如我之前看到的（使用版本 1），在 PC 和 Mac 浏览器上，版本 1 和版本 2 的行为都符合预期，跳到测试视频的中间。

但是在 Safari 上的 iPad (iOS 11.3.1) 上，即使打开了 JavaScript 和 Web 动画选项，它仍然拒绝加载视频，直到用户按下屏幕上的某个位置——此时，它从视频的开头开始，而不是从视频的中间开始。

我相信我已经正确地实现了你的 Javascript 建议，但也有必要引入一个“removeEventListener”元素，因为如果你没有添加它，那么一旦视频开始播放，无论用户将播放头放在哪里，它都会反复开始跳转到中间位置，并且在 PC 上的 Firefox Developer Edition 上，它会使用大量处理器时间不断跳转视频。

使用此代码检查浏览器是否为 Safari iOS：CSS.supports ? CSS.supports('-webkit-overflow-scrolling: touch') : false。然后你也可以使用video.addEventListener('canplay', () => video.pause()) 稍后开始播放视频。