Cross browser HTML5 videos

For many years, Flash has been the most popular video solution on the web.

With HTML5 a new specification is born: HTML5 videos.

In this tutorial, we’ll show you how to use HTML5 to display videos on your website.

Step 1: Preparing files

The first thing to do is to make sure your files are in the right format for HTML5 video playing. Right now, there’s no standard format so this is the biggest problem with HTML5 videos right now.

You’ll need these formats:  .mp4 (or .m4v) which is used on Apple products such as iPads, Safari, etc. The second format is .ogv, an open-source format used by Firefox. And the last one is .webm.

Converting your file into those formats is pretty easy if you use this very handy tool named Video Converter.

Step 2: Coding

Below you can find the basic code for displaying a HTML5 video on a web page.

(IMPORTANT: on iPad, you must start with the .mp4 video in the src list.)

On line 5, we have added a download link for older browser who don’t recognize the <video> tag.

<video width="800" height="374">  	
<source src="my_video.mp4" type="video/mp4" />  	
<source src="my_video.ogv" type="video/ogg" />  	
<source src="my_video.webm" type="video/webm" />  	
Video tag not supported. Download the video 
<a href="video.webm"&gthere</a&gt.  
</video>  

A very important thing to remember is to make sure your server is serving video files with the correct MIME type in the Content-Type header.

To make sure it will, open your site .htaccess file (don’t forget to do a backup before any modification) and add the lines below:

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

Also, various attributes can be used with the <video> element, for example to autoplay the video, loop it, or automatically display some controls. For the full reference, please see the w3 site.

Step 3: How to create a fallback for older browsers

Some older browsers don’t support any HTML video.

For those browsers, the only solution is to use a Flash fallback:

<video width="800" height="374">  	
<source src="my_video.mp4" type="video/mp4" />  	
<source src="my_video.ogv" type="video/ogg" />    	
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  		
<param name="movie" value="fallback.swf" />  		
<param name="flashvars" value="autostart=true&amp;file=video.flv" />  	
</object>    
</video>   

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.