Tuesday 13 December 2011
Video has always been a difficult thing on the web. With HTML5 supporting the <video> element that should become a lot easier right? After all you just add a video element, set the source and you are good to go right?
If you create a page like this:
And run it in Google Chrome its start playing just like this:
Simple enough right?
However when I open the page in Internet Exporer 9 or FireFox we get this:
The video element loads the movie poster but it doesn’t start playing.
And on Safari or an older version of IE we get:
Turns out that on Windows Safari doesn’t support the HTML5 <video> element and wants users to install and use Quicktime instead. And that even though according to CanIUse.com the video element is supported on the current version of Safari I am running
So what gives?
The problem with IE9 and FireFox not playing the movie has to do with video formats. While there is an HTML5 definition of the <video> there is no definition of the video source stream. It is left up to the bowser vendors to decide on the supported standard and implement these. And as the vendors can’t agree on a standard we as developers are basically stuck with having to provide multiple video streams with different encodings Not nice but that is politics for you. There is a good table on Wikipedia describing the formats supported in each browser. But the simple story is we need to supply at least 2 formats, for example H264 and WebM.
In order to fix this we can supply multiple <source> elements and let the browser pick the appropriate format.
You can try the effect for yourself here.
One more hurdle
So in IE9 and Chrome this works just fine but in FireFox we still don’t get to see the video. This is strange as FireFox is supposed to be able to display WebM videos, what gives?
The problem is in the way the video stream is served from the web. The video stream is returned with an HTTP header:
Content-Type: text/plain; charset=UTF-8
and it turns out FireFox is a bit picky about the Content-Type. It really wants it to be
for it to work. Not a problem if you control the server but in this case I don’t so I can’t fix the problem.
HTML5 video is nice but it certainly isn’t as nice as I hoped when I first started looking at it. But having to encode everything twice isn’t that bad so I guess I can live with the it