我在视频标签上使用“海报”属性,它似乎至少在 webkit 浏览器中工作的方式是它加载海报图像,然后一旦加载了足够多的视频,它就会用自动替换该海报-从视频文件本身生成的海报。
但是,我的海报图片与自动生成的海报不匹配,这导致加载一张图片的奇怪体验,然后在几秒钟内被自动生成的图片替换。有什么方法可以防止使用自动生成的图像?
我在视频标签上使用“海报”属性,它似乎至少在 webkit 浏览器中工作的方式是它加载海报图像,然后一旦加载了足够多的视频,它就会用自动替换该海报-从视频文件本身生成的海报。
但是,我的海报图片与自动生成的海报不匹配,这导致加载一张图片的奇怪体验,然后在几秒钟内被自动生成的图片替换。有什么方法可以防止使用自动生成的图像?
这是 webkit 浏览器决定实现规范的方式(如上所述)。我同意你的观点,它不是很直观,我自己也希望保持海报图像直到用户点击播放按钮。我建议您向 webkit 提交错误报告(或功能请求)https://bugs.webkit.org/。
我们设法在JW Player for HTML5中解决了这个问题。最简单的方法如下:
这可以正常工作,但这仍然意味着您在重放时会遇到问题,因为重新出现的海报图像不会与原始图像相同,除非您使用更多的 JS 魔法。
另外值得注意的是,您不能在移动 Safari 中的 <video> 标记顶部放置任何内容。解决这个问题的方法:
希望这会有所帮助!
最好的,
扎克
开发者,长尾视频
唯一的选择是确保视频的第一帧与海报相同或根本不使用它。
“当视频元素暂停并且当前播放位置是视频的第一帧时,该元素代表与当前播放位置相对应的视频帧或发布帧,由用户代理自行决定。” -- http://www.w3.org/TR/html5/video.html#attr-video-poster