无法在 iOS Safari 上预加载第一个视频帧？答案

【问题标题】：No way to preload first video frame on iOS Safari?无法在 iOS Safari 上预加载第一个视频帧？
【发布时间】：2021-09-03 01:26:36
【问题描述】：

我有一个简单的 HTML5 视频嵌入，在 iOS 上加载时会显示一个空白（白色）框架。在桌面浏览器（包括 Safari）和 Android 上，会显示视频的第一帧。

我知道您可以通过设置明确的海报图片来避免这种情况，但我希望我可以避免设置转码服务来提取视频的第一帧。据我了解，Apple 可能选择这条路线来限制移动用户的带宽使用，但在这种情况下，设置转码服务只是矫枉过正。

我玩过 preload 属性，但都没有将其设置为 auto 或 metadata 有效。有没有其他方法可以在没有用户交互的情况下显示视频的第一帧？

这是我用来说明问题的笔的链接。

这是代码在 iOS 模拟器（在真实硬件上相同）和 Chrome 中分别呈现的屏幕截图。

【问题讨论】：

这能满足您的需求吗？ stackoverflow.com/questions/41255841/…
谢谢，这似乎有效。但是，它会下载整个视频，因此在实践中使用起来并不可行。
如果视频在开始时使用 MOOV atom 编码（例如stackoverflow.com/questions/27351136/…），并且服务器支持字节范围请求，通常只需要先下载少量视频它可以获取图像

【解决方案1】：

您可以使用Media Fragments URI

只需将#t=0.1 附加到视频网址的末尾

【讨论】：

【解决方案2】：

试试下面的代码。这对我有用

<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
      <source src="video/video.mp4#t=0.5" type="video/mp4">
</video>

【讨论】：