动态使用第一帧作为 HTML5 视频中的海报？

Question

我想知道是否有任何直接的方法可以实现这种效果，而不需要后端代码来提取帧，将其保存为 jpg 并将其存储在某处。

视频加载时视频的第一帧只显示为海报的效果会非常有用（只有浏览器可以明显播放视频时才会起作用，这可能与 poster 有点不同 --- 传统上有效，但这不是问题。

原文由 Damon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否尝试过以下操作？

只需将以秒为单位的时间 #t={seconds} 附加到源 URL：

   <video controls width="360">
    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
  </video>

我选择了一小部分秒（ 0.1 ）来保持帧数小，因为我怀疑如果你放 1 秒，它会“预加载”视频的前 1 秒（即 24 帧或更多…… ).以防万一 …

在桌面上的 Chrome 和 Firefox 上运行良好:)

不过，不适用于 Android 手机 :(

我还没有在 iOS、iPhone、IE 上测试过？？

2021 年 5 月编辑：

我意识到许多现代浏览器现在会自动显示第一帧的海报。

好像他们听到了我们:-)

原文由 Jürgen Fink 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为简单起见，您只需将 preload="metadata" 添加到您的 视频标签，并将第一帧的第二帧 #t=0.5 添加到您的 视频源：

 <video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

祝你好运！

原文由 coinhive 发布，翻译遵循 CC BY-SA 4.0 许可协议