Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video poster attribute in Safari and 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>
like image 454
Roman Avatar asked Jul 13 '10 17:07

Roman


1 Answers

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...

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...

like image 150
Leo Avatar answered Oct 05 '22 23:10

Leo