1

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

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

4

3 回答 3

1

这是 webkit 浏览器决定实现规范的方式（如上所述）。我同意你的观点，它不是很直观，我自己也希望保持海报图像直到用户点击播放按钮。我建议您向 webkit 提交错误报告（或功能请求）https://bugs.webkit.org/。

于 2010-06-18T02:37:20.920 回答
1

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

  • 如果设置了 <video> src属性，请取消设置并存储位置。
  • 将点击处理程序添加到 <video> 标记。单击它时，重新设置 <video> src 属性。

这可以正常工作，但这仍然意味着您在重放时会遇到问题，因为重新出现的海报图像不会与原始图像相同，除非您使用更多的 JS 魔法。

另外值得注意的是，您不能在移动 Safari 中的 <video> 标记顶部放置任何内容。解决这个问题的方法：

  • 设置 <video> CSS display:none
  • 在相同的位置添加另一个 <div>，与 <video> 元素具有相同的尺寸，其 CSS 背景图像与 poser 图像相同。
  • 将点击处理程序添加到新的 <div>。单击新的 <div> 时，隐藏新的 <div> 并显示视频标签。
  • 视频播放完毕后，隐藏 <video> 并显示新的 <div>。

希望这会有所帮助！

最好的，

扎克

开发者，长尾视频

于 2010-06-18T21:08:45.240 回答
0

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

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

于 2010-06-17T21:20:26.243 回答