Tutorial Getting HTML5 Video to Play Nicely in Major Browsers

Posted in Tutorials

In this tutorial, we show how to get HTML5 Video to work nicely in the major browsers which are Chrome, Firefox, Internet Explorer, and Safari.  Okay, we’ll check Opera too.   See the browser marketshare as reported by Sitepoint.

1.  Basic Video Tag

You might have looked up the HTML5 video tag and wrote out something like this…

<video width="640" height="480" preload controls src="myvideo.mp4">
Your browser does not support the video tag.
</video>

This is the HTML5 video tag with the width and height attribute for the video.  We’ll make these value match our video dimensions.  The preload attribute tells the browser to start loading the video upon page load.  But it will not autoplay unless you specify the autoplay attribute, which typically is not recommended.

The controls attribute tell the browser to put in its own video controls in the video.  Hence the controls will look different on different browsers — which is fine.

The text between the “video” tags, will display only if the browser does not recognize the HTML5 video tag.  All the above mentioned browsers (at their latest versions) all recognize the video tag, so this should not be an issue.

However, even for browsers that do recognize the video tag, the above code is not sufficient to get it to play in all these browsers.  This is because not all browser can read the mp4 format.  Some browsers prefer the ogg format, and others prefer the webm format.  In any case, at the time of this writing (January 2014), there is no one format that is workable for all the major browsers.

2.  Make three video file formats

That is why we need to produce three formats of our video.  Using the free Miro Video Converter, we produced these video in these formats: myvideo.mp4, myvideo.ogv, and myvideo.webm   (The video container format is known as ogg, but the filename extension produced is sometimes .ogv)

3.  Add formats in the source tag

We remove the src attibute from our video tag and add in the source tags like shown …

<video id="movie" width="640" height="480" preload controls>
<source src="myvideo.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="myvideo.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="myvideo.mp4" />
</video>

4.  Test in major browsers

I tested this in Internet Explorer 11, Chrome 32,  Firefox 26, Safari 5 for windows, and Opera 12.  For browsers that are too old to understand HTML5 video, you can add fallback to Flash video.  See how this is done in the Dive Into HTML5.

5.  AddType in .htaccess file

While they may play fine on your local development machine.  Sometimes when you put it up on a webhost, it might not run.  On certain hosts, you might need to add the following lines to the .htaccess file so the server can understand these file types …

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

 

---