仅跨浏览器 HTML5 视频预加载海报

Posted 2023-05-07

【中文标题】仅跨浏览器 HTML5 视频预加载海报

【英文标题】：Cross Browser HTML5 Video Preloading Poster Only

【发布时间】：2015-02-10 10:57:54

【问题描述】：

我目前正在渲染 html5 视频元素列表。

我在一个页面上有多个视频文件，我不想在用户点击播放之前下载大量数据。

我想抓取第 1 帧并将其显示为海报。我无法访问每个视频的替代海报。

我在这里查看视频元素的值为“元数据”的 preload 属性：

http://www.w3schools.com/tags/att_video_preload.asp

这似乎对浏览器的支持有限。

在 firefox 和 chrome 中使用 preload='metadata' 可以将第 1 帧显示为海报。

使用 preload='metadata' 会禁用 safari 中的预加载，但会禁用海报。

我无法在 IE 中进行测试。

如何在 safari 中将 HTML5 视频元素帧 1 显示为海报，而无需预加载大量数据。

<video controls preload='metadata'>
  <source src="video.url | trusted" type="video/mp4">
  Your browser does not support the video tag.
</video>

【参考方案1】：

v42 及更高版本现在似乎尊重这一点。耶！ （截至昨天的当前测试版 - 因此尚不可用）

您现在可以看到一个206 部分内容请求，并且下载了 66kb（我的视频是 600kb+）

但是：非常重要

如果您不知道，Chrome 只能同时有 6 个同时连接到同一服务器。

目前在 v42 + v43 中，他们有一个可怕的错误，这意味着一旦加载了元数据，该文件就不会释放回“池”中以获取可用连接。因此，如果您加载 6 个或更多视频，则第 7 个块将无法下载。

我已将此作为错误报告https://code.google.com/p/chromium/issues/detail?id=468930

可能并非所有视频都是这种情况，但我有 10 个使用 Adob​​e Media Encoder 编码的 MP4 短视频，它们卡住了。

如果有疑问或遇到此问题，您别无选择，只能设置preload='auto'。希望这个 bug 永远不会出现在野外。

【讨论】：

因为您（操作）听起来好像您的页面上有很多视频，如果您有同样的问题，我很想听听。尝试安装出现此问题的 Chrome Canary 并使用 preload='metadata'

进行测试