如何禁用视频标签上的自动海报图像生成？ [英] How do I disable auto- poster image generation on the video tag?
问题描述
我在视频标签上使用'poster'属性，它至少在webkit浏览器中的工作方式是它加载海报图像，然后一旦足够的视频加载，它就取代了那张海报来自视频文件本身的自动生成的海报。
I'm using the 'poster' attribute on a video tag and the way it seems to work at least in webkit browsers is that it loads the poster image and then once enough of the video has loaded, it replaces that poster with an auto-generated poster from the video file itself.
然而，我的海报图片与自动生成的海报不匹配，导致一个图像加载的奇怪体验然后由自动生成的图像在几秒钟内更换。有没有办法阻止自动生成的图像被使用？
However, my poster images don't match the auto-generated posters which results in a weird experience of one image loading, then being replaced in a few seconds by the auto-generated image. Is there any way to prevent the auto-generated image from being used?
推荐答案
我们设法在
We managed to get around this in the JW Player for HTML5. The easiest way is as follows:
- 如果< video> src 属性已设置，取消设置并存储位置。
- 向< video>添加点击处理程序标签。点击后，重新设置< video> src属性。
- If the <video> src property is set, unset it and store the location.
- Add a click handler to the <video> tag. When it's clicked, re-set the <video> src property.
这样可以正常工作，但它仍然意味着你将有重播问题，作为重新制作的海报图片 - 出现与原版不同，除非你做了更多的JS魔术。
This will work fine, but it still means that you'll have issues on replay, as the poster image that re-appears won't be the same as the original, unless you do some more JS magic.
另外值得注意的是你不能在<之上放置任何东西;视频>移动Safari中的标记。解决这个问题的方法：
Also worth noting that you can't place anything on top of the <video> tag in mobile Safari. The way to get around this:
- 设置< video> CSS 显示：无
- 添加另一个< div>在同一位置，尺寸与< video>相同元素，CSS背景图像与poser图像相同。
- 向新的< div>添加点击处理程序。当新的< div>单击，隐藏新的< div>并显示视频标记。
- 视频播放完毕后，隐藏< video>并显示新的< div>。
- Set the <video> CSS display:none
- Add another <div> in the same location, with the same dimensions as the <video> element, with a CSS background image that's the same as the poser image.
- Add a click handler to the new <div>. When the new <div> is clicked, hide the new <div> and show the video tag.
- When the video has completed playback, hide the <video> and show the new <div>.
希望有帮助！
最好，
Zach
开发者，长尾视频
这篇关于如何禁用视频标签上的自动海报图像生成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
