Safari和Chrome中的HTML5视频海报属性 [英] HTML5 Video poster attribute in Safari and Chrome

问题描述

在Firefox中，由VIDEO标记的poster属性指定的图像将保留在屏幕上，直到按下播放按钮为止.但是，在Webkit浏览器(Safari和Chrome)中，一旦获取了视频元数据，就会将海报转储为视频的第一帧.

In Firefox the image specified by the poster attribute of the VIDEO tag remains on screen until the play button is pressed. However in the Webkit browsers (Safari and Chrome) the poster is dumped in favor of the first frame from the video as soon as the video metadata is fetched.

如果可以的话，我想避免将海报手动放置在视频元素上方.有谁知道解决方法吗?

I want to avoid having to place the poster on top of the video element manually if I could. Does anyone know of a fix for this?

<video src="some_url" poster="images/poster.jpg">
    <source type="video/ogg" src="some_url" />
</video>

推荐答案

似乎WebKit会在视频结束后立即剥离该属性，因为适用于Iphone和Ipad的iOS 3.x存在严重的错误，无法解决指定了发帖人属性时完全可以播放视频.此问题已在iOS 4中得到修复，但即使在Safari 5中，解决方法仍然存在...许多用户尚未升级到iOS 4，因此发布者没有运气...

It seems that WebKit strips the attribute as soon as the video is fethced, because iOS 3.x for Iphone and Ipad has a serious bug where it is not possible to play the video at all when there is a poster attribute specified. This was fixed in iOS 4, but the workaround still stays, even in Safari 5...There are a lot of users who didn't upgrade to iOS 4 yet, so no luck with the poster...

我将尝试使用Javascript将图像完全定位在视频上，并在播放视频时将其删除-这似乎是最好的解决方案...

I'm going to try and position the image absolutely over the video using Javascript, and removing it when the video is played - that seems like the best solution...

这篇关于Safari和Chrome中的HTML5视频海报属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！