如何在视频标签上禁用自动生成海报图片？

Question

我在一个视频标签上使用了' poster‘属性，至少在webkit浏览器中它的工作方式是它加载海报图像，然后一旦加载了足够的视频，它就会用视频文件本身自动生成的海报替换该海报。

然而，我的海报图像与自动生成的海报不匹配，这导致了一种奇怪的体验，即加载一个图像，然后在几秒钟内被自动生成的图像替换。有没有办法防止自动生成的镜像被使用？

Answer 1

我们设法在JW Player for HTML5中绕过了这个问题。最简单的方法如下：

• 如果设置了src属性，请取消设置它并存储位置。
• 向标记添加一个单击处理程序。单击后，重新设置src属性。

这将工作得很好，但这仍然意味着你在重放时会有问题，因为重新出现的海报图像将与原始图像不同，除非你做一些更多的JS魔术。

同样值得注意的是，在移动Safari中，您不能将任何内容放在标记的顶部。解决这个问题的方法是：

• 在同一位置设置另一个CSS display:none
• Add，大小与元素相同，CSS背景图像与poser图像相同。
• 将单击处理程序添加到新的位置。单击新项时，隐藏新项并显示视频标记。
• 视频回放完成后，隐藏并显示新项。

希望这能有所帮助！

最好的

扎克

开发人员，LongTail视频

Answer 2

这是webkit浏览器决定实现规范的方式(如上所述)。我同意你的看法，这不是很直观，我自己也更喜欢保持海报图像，直到用户点击播放按钮。我建议你提交一份错误报告(或功能请求)到webkit for it https://bugs.webkit.org/。

Answer 3

唯一的选择是确保视频的第一帧与海报相同，或者根本不使用它。

“当视频元素暂停并且当前播放位置是视频的第一帧时，该元素表示与当前播放位置对应的视频帧或海报帧，由用户代理决定。”-- http://www.w3.org/TR/html5/video.html#attr-video-poster