iOS 15上的Safari内联视频播放问题

Question

一个包含video元素的网页，该元素的src属性设置为包含视频文件的数据URI，在iOS 15上的Safari中无法播放视频。

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

如果视频足够小且成功启动，则播放速度缓慢，启动时间也需要很长时间。

是否有解决此问题的方法？

P.S. 将视频保留在数据URI中是我正在尝试解决的任务所固有的，请不要建议将视频文件保留为单独的资源 :)

- Anton

---

（1）我的Windows操作系统上没有Safari，但是从快速研究来看，iOS 15似乎存在一些问题/错误。看看是否有提到的解决方法对您有帮助。您设置页面代码的方式不明显（例如：使用任何额外的框架？），这可能会影响播放。 - VC.One

（2）所以您的视频数据是以base64格式吗？如果跳过Data URI方式，只是将B64数据保留在字符串变量中，然后将B64解码为一些缓冲区数组（blob），并使用createObjectURL将其load到视频标签中会发生什么？例如：var vidBytes = new Uint8Array( atob( yourB64string) ); 然后将其作为视频src可用的路径是 path = (window.URL || window.webkitURL).createObjectURL( vidBytes ); 最后使用 your_vid_element_byID.setAttribute("src", path); your_vid_element_byID.load(); 加载视频元素。 - VC.One

@VC.One 这正是我们现在正在做的事情，看起来效果更好了，但是我们仍然看到重复请求，并且播放似乎有点卡顿。 - Anton

Answer 1

这个问题在webkit的bug跟踪系统中有记录（根据用户名称，我怀疑您也在那里报告了这个问题）： https://bugs.webkit.org/show_bug.cgi?id=232076 我们使用的解决方法是通过Service Worker通过“常规”URL传递视频数据，即使数据仍然由Javascript直接提供。 我在那个WebKit bug上发布了一些服务工作者端的示例代码。

服务工作者确实需要作为单独的资源托管，并且具有相同的https来源，因此我知道这不会成为每种用例（包括您的Anton）的解决方案。

不幸的是，我认为没有其他解决方法，它似乎只是Safari的又一个回归。iOS 15对此尤为糟糕。 我几乎期待它会在iOS 16主题演讲中出现...“ Safari现在比以往任何时候都更快25％，播放视频的时间增加30％，并且现在比以往任何时候都有35％以上的错误！”

- tangobravo

---

是的，那个在bugs.webkit.org上的就是我 :) 无论如何，让我们看看，也许有人发现了一些疯狂的组合，可以让这个bug消失。 - Anton