Video in HTML5
DemoToday we will have a look at how we can embed our videos on the web page using the video tag introduced in HTML5.
It is worth to mention that new HTML5 video feature is not compatible with some of the browsers - not surprisingly Internet Explorer versions earlier than 9 can't handle it, therefore you will still have to use Flash, QuickTime or any other video player in order to support videos in those browsers, but don't worry - we have covered this in this article.
The diagram below shows the web browser support together with video codecs supported by these browsers (yes - it's never easy when it comes to cross-browser-compatibility).
| Codec / Format | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
|---|---|---|---|---|---|---|---|
| Theora / Vorbis / Ogg | - | 3.5+ | - | 5.0+ | 10.5+ | - | - |
| H.264 / AAC / MP4 | 9.0+ | - | 3.0+ | - | - | 3.0+ | 2.0+ |
| VP8 / WebM | 9.0+ | 4.0+ | - | 6.0+ | 10.6+ | - | Future |
Internet Explorer 9 will only support WebM if you have VP8 codec installed, which means they will not provide the codec by default.
Due to the licensing issues Google Chrome is dropping support for H.264 codec, but it will support VP8 and Ogg
The current situation with Android and WebM format is that even thou Android 2.3+ supports WebM format, it does not yet have the hardware decoders to run it.
So, now that we know which browser supports what it is time to try and embed our video on our new HTML5 page layout. If you haven't yet - create the HTML5 structure of the page, or use the following one:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Video with HTML5</title> <meta name="description" content="Video with HTML5" /> <meta name="keywords" content="Video with HTML5" /> <link href="/css/core.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section> <div id="wrapper"> </div> </section> </body> </html>
Now, because we need to bear in mind that different browsers support different codecs, we will have to do some workaround to overcome this situation. The way to do it is to provide path to several file formats. Obviously before we do this we need to have our video converted to those formats. There are number of different software packages and free online tools to encode your video. Some of them are:
Once you have your videos ready upload them to your server (say into the videos folder) and we are ready to move on.
Now, in between the opening and closing wrapper div type the following (replacing the path and video file name accordingly):
<video src="/videos/01.mp4" width="640" height="400" controls preload="auto"></video>
The controls attribute will display the video player controls and preload attribute specifies if the video should be loaded when the page loads, or not - based on the value:
- auto : Entire video loads when page loads
- metadata : Only metadata loads when page loads
- none : Video does not load when page loads
Depending on what format / codec you've used for your video it will play in one browser and it won't in the other - exactly what we were expecting to happen. We can't obviously manually change the path to the different file every time someone with a different browser visits our site, but what we can do is to embed the source tags in order to specify multiple paths.
In order to do it, first we need to remove the src attribute from our video tag like so:
<video width="640" height="400" controls preload="auto"></video>
In between the opening and closing video tags type:
<source src="/videos/01.mp4" type="video/mp4" />
<source src="/videos/01.ogg" type="video/ogg" />
<source src="/videos/01.webm" type="video/webm" />
<object id="flowplayer" width="640" height="400" data="/videos/flowplayer.swf"
type="application/x-shockwave-flash">
<param name="movie" value="/videos/flowplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="config={'clip':'/videos/01.mp4'}" />
</object>
Your entire code should now look similar to this:
<video width="640" height="400" controls preload="auto">
<source src="/videos/01.mp4" type="video/mp4" />
<source src="/videos/01.ogg" type="video/ogg" />
<source src="/videos/01.webm" type="video/webm" />
<object id="flowplayer" width="640" height="400" data="/videos/flowplayer.swf"
type="application/x-shockwave-flash">
<param name="movie" value="/videos/flowplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="config={'clip':'/videos/01.mp4'}" />
</object>
</video>
As you can see from the example above, each source tag has it's associated src and type attribute. The type attribute is telling your browser what mime file type the specific file is. You have to make sure that your server understands these mime types - the easiest way to do it is to add the following somewhere in your .htaccess file:
AddType video/mp4 mp4 m4v AddType audio/mp4 m4a AddType video/ogg ogv AddType audio/ogg ogg oga AddType video/webm webm
The order we embedded these files is very important, as some browsers will ignore the tag if they don't understand the file format / codec and will move to the next line - this way we can serve our video across different browsers and devices.
The MP4 file has to be the first item in order to allow iPhone and iPad to play it.
The last position is an object tag, which will be triggered when the visitor uses the web browser that does not support the HTML5 video tag. For this one you will have to have your own flash player uploaded to the server and then point to the video of your choice - Flow Player is a very nice flash video player that you can use for this purpose.
If you would like to read more on this topic, here are some good resources:
Sebastian on Tuesday, 4th October 2011
Thanks for putting light on this subject!
Reply