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

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