How do I disable auto- poster image generation on the video tag?

Question

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?

Answer 1

Only option is to make sure first frame of your video is same as poster or not to use it at all.

"When a video element is paused and the current playback position is the first frame of video, the element represents either the frame of video corresponding to the current playback position or the poster frame, at the discretion of the user agent." -- http://www.w3.org/TR/html5/video.html#attr-video-poster

Answer 2

This is the way in which webkit browsers have decided to implement the spec (as cited above). I agree with you that it is not very intuitive and would myself also prefer to keep the poster image up until the user hits the play button. I suggest you submit a bug report (or feature request) to webkit for it https://bugs.webkit.org/ .

Answer 3

We managed to get around this in the JW Player for HTML5. The easiest way is as follows:

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

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.

Also worth noting that you can't place anything on top of the <video> tag in mobile Safari. The way to get around this:

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

Hopefully that helps!

Best,

Zach

Developer, LongTail Video