Today 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: Ogg / WebM Converter (Firefox plugin) H.264 Converter 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: camendesign.com diveintohtml5.org
For those looking to work in the footballing world, there are numerous opportunities to be involved with some of the best clubs. Here is a look into t
A career path with law is a popular route to take for many international graduates looking to work in the UK. It is a career that implements many qual
In a bold move that challenges its long-standing reputation for gruelling work hours and a culture of overwork, Japan is taking significant steps towa
The Office for Students (OfS), the independent regulator for higher education in England, has launched a comprehensive investigation into subcontractu
NEED HELP?
2K Views
Report Spam
9 Answers
