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

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

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

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

我正在查看视频元素的preload属性，其值为“metadata”：

这看起来对浏览器的支持有限

使用preload='metadata'在firefox和chrome中工作，并将第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>

您的浏览器不支持视频标记。

v42及以上版本现在似乎尊重这一点。耶
（截至昨天的当前测试版-因此尚未提供）

您现在可以看到一个

206

部分内容请求，下载了66kb（我的视频是600kb+）

然而：非常重要

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

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

我已经报告这是一个错误

这可能不是所有视频的情况，但我有10个用Adobe Media Encoder编码的短MP4视频，它们被卡住了

如果有疑问或遇到此问题，您别无选择，只能暂时设置

preload='auto'

。希望这个bug永远不会出现。

因为你（op）听起来好像在一个页面上有很多视频，如果你有同样的问题，我很想听听。尝试安装显示此问题的Chrome Canary，并使用preload='metadata'进行测试