iOS 15 上的 Safari 内嵌视频播放问题答案

【问题标题】：Safari on iOS 15 inline video playback issuesiOS 15 上的 Safari 内嵌视频播放问题
【发布时间】：2021-12-04 07:04:33
【问题描述】：

包含video 元素且src 属性设置为包含视频文件的数据URI 的网页不会在iOS 15 上的Safari 中播放视频。

使用 Safari 开发工具检查设备/模拟器表明浏览器反复发出带有Range: bytes N-M 标头的请求，多次读取整个视频文件，导致巨大的内存消耗并最终无法开始播放。

如果视频足够小并且可以开始播放，则播放速度会很慢，甚至需要很长时间才能开始。

这个问题有解决办法吗？

附：将视频保存在数据 URI 中是我要解决的任务所固有的，因此请不要建议将视频文件作为单独的资源保存:)

【问题讨论】：

(1) 我的操作系统 Windows 没有 Safari，但从 quick research 看来，iOS 15 中似乎存在一些问题/错误。看看提到的一些解决方法是否有助于你。您如何设置可能会影响播放的页面代码（例如： 使用任何额外的框架？）并不明显。
(2) 那么你有base64格式的视频数据吗？如果您跳过 Data URI 方式并将 B64 数据保留在 String 变量中，然后使用 createObjectURL 将 B64 解码为您 load 到视频标签中的某个 bufferArray (blob)，会发生什么情况？例如：var vidBytes = new Uint8Array( atob( yourB64string) ); 然后要使其可用作视频 src，它是 path = (window.URL || window.webkitURL).createObjectURL( vidBytes );，最后是 load() your_vid_element_byID.setAttribute("src", path); your_vid_element_byID.load(); 的视频元素
@VC.One 这正是我们现在正在做的，它似乎工作得更好，但是，我们仍然看到重复的请求并且播放似乎有点滞后。

【解决方案1】：

跟踪此问题的 webkit 错误在这里（查看用户名，我怀疑您也在那里报告过）： https://bugs.webkit.org/show_bug.cgi?id=232076

我们使用的解决方法是使用 Service Worker 通过“普通”URL 传递视频数据，即使数据仍然是直接从 Javascript 提供的。我在那个 WebKit 错误上发布了一些服务工作者端的示例代码。

Service Worker 确实需要作为单独的资源托管，并且具有相同的 https 来源，所以我知道这不会是每个用例（包括你的 Anton）的解决方案。

不幸的是，我认为没有其他解决方法，它看起来像是又一次 Safari 回归。 iOS 15 对此尤其不利。我几乎预计它会成为 iOS 16 主题演讲中的一张幻灯片……“Safari 现在速度提高了 25%，视频播放时间增加了 30%，并且现在的错误比以往任何时候都多 35%！”

【讨论】：