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 回答