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

Question

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

但是，我的海报图片与自动生成的海报不匹配，导致加载一个图片时出现奇怪的体验，然后在几秒钟内被自动生成的图片替换。有什么办法可以防止自动生成的图像被使用吗？

Answer 1

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

• 如果<视频> SRC属性设置，取消设置并存储的位置。
• 添加点击处理程序到<视频>标记。点击时，请重新设置<视频> src属性。

这样可以正常工作，但它仍然意味着您将会在重放时遇到问题，因为重新出现的海报图片与原始图片不会相同，除非您再做一些JS魔术。

另外值得注意的是，您不能在移动Safari上的<视频>标签顶部放置任何东西。该办法来解决这个问题：

• 设置<视频> CSS 显示：无
• 添加另一个<DIV>在同一地点，用相同的尺寸<视频>元素，具有CSS背景图像与poser图像相同。
• 将点击处理程序添加到新的<div>。当点击新的<div>时，隐藏新的<div>并显示视频标签。
• 当视频完成播放时，隐藏<视频>并显示新的<div>。

希望有帮助！

最佳，

扎克

开发，长尾视频

Answer 2

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

“当视频元素暂停并且当前播放位置是视频的第一帧时，该元素代表与用户代理判断相对应的当前播放位置或张贴框的视频帧。 “ - http://www.w3.org/TR/html5/video.html#attr-video-poster

Answer 3

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