The problem with the poster attribute

It would appear that the poster attribute for the video element in the HTML5 specification needs some clarification to further define required behaviour.

Here’s why.

The problem

I came across an interesting question on StackOverflow where a user was noticing that Internet Explorer 9 was ignoring his poster image value and displaying nothing. He points out that the other browsers like Firefox, Chrome and Safari all display the poster image.

I thought that this was the required behaviour, that defining a poster image for your video meant that that image was to be displayed in place of the video, before it starts playing (via user interaction). If no poster image is defined for the video, the first frame of the video is to be displayed, provided that the video data is loaded and the first frame can be displayed.

Finding this strange, I tweeted about it to see if there was any reaction. I am lucky enough to have Frank Olivier, who works for Microsoft specifically on things such as video in Internet Explorer, following me, and he responded that:

It is valid behavior, according to the spec.

Ok, fair enough, this man knows his stuff, let’s go and look at what the specification says.

What the spec says

The poster attribute gives the address of an image file that the user agent can show while no video data is available

“When no video data is available” is the key point here as in my example code video data is available.

So I set up an example and tried it without any video data being available to the browser (by setting preload="none" on the video element) and sure enough Internet Explorer 9 displayed the poster image.

The spec. goes on to say that if no video data is available that either the poster frame (i.e. what is contained within the poster attribute) should be displayed or nothing.

It also goes on to state:

…the poster frame should be preferred over nothing…

What’s nothing?

One question that arises is what is the definition of “nothing” in this case? If there is no video data loaded, and no poster image defined, then indeed there is “nothing” to display, and therefore the browser will display nothing.

If there is no poster image defined but the video data is available, then the first frame can be displayed. But the first frame of a video often displays a blank (usually black frame) – which, it could be argued, be defined as “nothing”.

Conclusion

The issue here is that Internet Explorer 9 has the video’s first frame information and decides that it should always take precedence over the poster image (if one is defined).

I think this is incorrect behaviour and it is strange that out of all the major browsers, Internet Explorer 9 alone interprets it this way. Firefox, Chrome, Opera and Safari do not.

The issue being open to interpretation is the problem here, and I feel that the HTML5 specification needs to change slightly, to specify that if a poster image is defined for a video, it should take precedence over the first frame of the video (provided the URL to the poster image is valid).

As usual, Microsoft mishandles video presentation. What can one say? As far as “alt attribute”? No. A poster image is in fact a placeholder letting viewers in on something about the movie to be watched or the movie being watched. Alt attributes serve as replacements when images cannot be rendered or can be used in place of the image when, say, a blind person comes upon an image. You can hear what you cannot see, so to speak.

This is by far the most sensible posting I have found regarding the issue of IE and poster images. I have found many requests for advice/help for this issue on the web and the answer is almost always “use the preload attribute”. Quite a few have replied “Thanks, that worked!”

Unfortunately it does not work for me. My poster images are visible in all the major browsers except IE9, which is ignoring both the poster image and the preload=”none” attribute. It would appear that IE9 is preloading at least the first few frames of the videos, leaving me with just the player controls and a big, black empty space where the poster should be. It does not look pretty, especially when 2 of the videos are on the homepage!

I have read through your submission the the W3C, I can only hope they and MSIE take note. Thanks for your work!

Thank you so much for the speedy reply and for checking out the site. I have to admit I had completely forgotten about the EmulateIE8 setting. You’re right, the poster image works fine in IE9 proper. I will have to look at removing that setting from all the pages although a quick look at the ‘Shop’ page in IE9 proper tells me the layout for that page will need a bit of restructuring! All the other pages seem to be fine though.

Thanks again for saving me from a massive headache, I’m not sure I would ever have thought about the IE8 compatibility being the problem.

I have an issue which is kind of reverse… i want the first frame to show when no poster attribute exists… works in chrome, just not in IE9… any ideas as to why this would work in other browsers and not IE9?

I don’t have something up right now… this is an internal project I was working on… but I’ll put something up this evening if you don’t mind taking a look later tonight or even tomorrow… BTW… thanks for the reply.

Thanks all, you helped greatly!
New to this HTML 5 stuff and couldn’t get poster frames to show in IE9 (chrome, safari etc all worked great right from the start cs6 site).
Microsoft are so outta touch and getting worse RE: Win 8 on a workstation, I reverted back to win 7 64 pro and im MUCH happier!

Hi guys. This may come as a half-dumb suggestion but… what if, until IE9 decides to fall in line with the rest of the world, you simply take the frame you need displayed and put it in front of the video. In any decent video editing software. It should take about 5 seconds to drag it on the timeline and 15 minutes to render a full hd progressive video on a half decent machine.
this way, no matter the browser, you get what you need. And eliminate the need for the poster image whatsoever!

I have tracks available for my video, but they are stored in different domain, so I get cross domain errors. I could solve that my adding crossorigin=”anonymous” attribute. However once I do that my poster image won’t laod with the same error. The images and tracks are stored in different domain. The only way I could fix this was to have the poster image and the tracks in the same domain. Any other workaround you could think of?