Question

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

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

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

我正在查看preload属性，其值为＆＃39;元数据＆＃39;对于视频元素：

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

使用preload =＆＃39;元数据＆＃39;适用于firefox和chrome，并将第1帧显示为海报。

使用preload =＆＃39;元数据＆＃39;在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 +）

enter image description here

然而：非常重要

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

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

对于所有视频情况可能并非如此，但我有10个用Adobe Media Encoder编码的短MP4视频，但它们卡住了。

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