如何选择HTM5 <video>的哪个帧或时间用作“海报”?</video>

时间:2014-06-10 20:52:55

标签: html5 video html5-video

我想选择标签使用的特定时间(而不是第一帧 - 在我的情况下总是黑色)用于“预览”。

我目前制作了数千个“海报”文件,但这很笨拙且不灵活。

这可能吗?

4 个答案:

答案 0 :(得分:1)

您要做的是使用视频中的图片(屏幕截图)设置为占位符。这样做的好处是加载时间,加载一点.PNG文件要快得多,而不是预加载视频以显示该帧。

这似乎在之前已经讨论过:

Previous Thread

该链接可能不够具体,您想使用“video”标记中的“poster”属性。

<video poster="image.png">
<source src="video.mp4" />
</video>

答案 1 :(得分:0)

我理解,我知道制作海报&#34;但我认为最终它是实现这种效果的最有效方式......

答案 2 :(得分:0)

没有直接的方法来实现你想要的目标。

如果您未按照specification指定海报,则浏览器应在首次展示视频代码时显示该视频的第一帧。

  

当视频元素暂停时,当前播放位置是视频的第一帧,并且元素的显示海报标志被设置       视频元素表示其海报帧(如果有),或者视频的第一帧。

您可以考虑通过canvas元素捕获特定的帧。这个问题可以为您提供一些hints如何做到这一点。

如果您想要一个完整的缩略图选择过程,您将需要使用像ffmpeg(服务器端)这样的软件在视频的不同时间戳生成缩略图,并允许用户选择一个(或生成一个)给定时间戳)。这可以help you

另请注意,好的海报可以为您的视频生成更多视图(人们倾向于点击/触摸更多带有吸引人海报的视频元素)。所以花一些时间制作好的海报通常花费时间。

答案 3 :(得分:0)

事实证明,我可以这样做:

video.currentTime = 10

其中10是我想要显示的视频的秒数。仅在Chrome中测试....