Using HTML5 has made it easier to have video that works cross-browser using the <video> html tag.
First Step: Create the Video 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 you’ll have to have multiple versions of the same file in order to serve the right format to the client browser. This is indeed the biggest problem with HTML5 videos right now.
You’ll need the 3 following formats: The first is
.mp4 (or .
m4v) which is used on Apple products such as iPads, Safari, etc. The second format needed is
.ogv, an open-source format used by Firefox. And the last one is
Converting your file into those formats is easier if you use this tool called Video Converter. You have nothing to install on your computer, simply upload your video, choose the desired output format, and you’re video is converted and downloaded to your computer.
Second Step: Coding the player
Next we need to add the code for displaying a HTML5 video on a web page. Not that in order to have the video properly displayed on iPad, you must start with the
.mp4 video in the src list.
Don’t forget to add a download link for older browsers which don’t recognize the
<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">here</a>.
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.
Creating a fallback for older browsers
Now, you have a super cool HTML5 video player. You still haven’t accounted for some older browsers don’t support any HTML video at all. For those browsers, the only solution is to use a Flash fallback. If you want to support older browsers then consider using this solution.