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

Question

我目前正在呈现 HTML5 视频元素列表。

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

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

我在这里查看视频元素的值为“元数据”的预加载属性:

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>

Answer 1

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

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

但是:非常重要

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

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

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

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

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