HTML5 Video

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:

<!DOCTYPE html>


<html>


    <head>


        <title>HTML5 Video demo</title>


        <style>


            video


            {


                height: 200px;


                width: 400px;


            }


        </style>


    </head>


    <body>


        <video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"


               src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"


               controls 


               autoplay>


                   HTML5 Video element not supported                                    


        </video>


    </body>


</html>

 

And run it in Google Chrome its start playing just like this:

image

Simple enough right?

 

However when I open the page in Internet Exporer 9 or FireFox we get this:

image

The video element loads the movie poster but it doesn’t start playing.

 

And on Safari or an older version of IE we get:

image

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 Sad smile

 

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 Sad smile 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.

 

The solution

In order to fix this we can supply multiple <source> elements and let the browser pick the appropriate format.

<!DOCTYPE html>


<html>


    <head>


        <title>HTML5 Video demo</title>


        <style>


            video


            {


                height: 200px;


                width: 400px;


            }


        </style>


    </head>


    <body>


        <video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"


               controls 


               autoplay>


               <source src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"


                       type='video/webm; codecs="vp8, vorbis"'>


               <source src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"


                       type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>


                       HTML5 Video element not supported                                    


        </video>


    </body>


</html>



 



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



Content-Type: video/webm



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.



 



Conclusion



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 Smile



 



Enjoy!



 



[f1]
[f2]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>