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

时间:2010-06-17 15:09:17

标签: javascript video html5 html5-video

我在视频标签上使用'poster'属性,并且它至少在webkit浏览器中的工作方式是它加载海报图像,然后一旦加载了足够的视频,就用它取代那张海报视频文件本身自动生成的海报。

然而,我的海报图像与自动生成的海报不匹配,导致一个图像加载的奇怪体验,然后在几秒钟内被自动生成的图像替换。有没有办法阻止自动生成的图像被使用?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

  • 如果< video> src 属性已设置,取消设置并存储位置。
  • 向< video>添加点击处理程序标签。点击后,重新设置< video> src property。

这样可以正常工作,但它仍然意味着你会有重播问题,因为重新出现的海报图片与原版不同,除非你做了更多的JS魔术。

另外值得注意的是,您无法在< video>之上放置任何内容。移动Safari中的标记。解决这个问题的方法:

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

希望这有帮助!

最佳,

扎克

开发者,LongTail视频

答案 2 :(得分:0)

唯一的选择是确保您视频的第一帧与海报相同或完全无法使用。

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