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
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
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:
