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

Question

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

当视频加载时，视频的第一帧只显示为海报的效果会非常有用(只有浏览器可以清楚地播放视频才有效，这可能与 poster 传统上有效，但这不是问题。

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 月编辑:

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

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