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

So I went to the][2] poster attribute.

Amongst other things, the spec. does say:

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

Your thoughts, as always, are welcome.

Update

I’ve submitted a bug report to the W3C to request this.