With introduction of HTML 5, embedding an video on a web page has become peace of cake! It has overcome the barrier of installing plug-ins(Adobe Flash, Silverlight etc.,).
When i start playing around with HTML 5 Videos, i encountered some problems and i wish to discuss the same, so that it will be helpful for people, who has similar issues.
Before diving in to the content, let me remind the browser compatibility of HTML 5. HTML 5 is supported in following browsers –
- Microsoft IE 9 +
- Mozilla Firefox 5 +
- Google Chrome 10 +
- Apple Safari 5 +
- Opera 10 +
So, that means, HTML 5 video is supported only in the above mentioned browser list. For incompatible browser, you may have to use or <object> tags by using Fall back method. You can use Modernizer, to check whether the browser supports HTML 5 Video and provide an fall back method if doesn’t support!
Now, let looks in to the tools. Basically HTML 5 Video supports the following formats –
- MP4 with H264 video codec and AAC audio codec
- WebM with VP8 video codec and Vorbis audio codec
- Ogg with Theora video codec and Vorbis audio codec
All web browsers doesn’t support all the video formats. It totally depends on the web browser.
| Browser | MP4 | WebM | Ogg |
| IE 9 + | YES | NO | NO |
| Firefox 5 + | NO | YES | YES |
| Chrome 10 + | YES | YES | YES |
| Safari 5 + | YES | NO | NO |
| Opera 10 + | NO | YES | YES |
Looks like Apple and Microsoft are great friends 
because they support similar video format!!!
Now, the challenge is how to encode these videos to the required formats. If you wish to supports for all the browser, you may have to encode your video in all the three formats. After search on the web using Google and Bing, i found these below two software’s, which are pretty good in converting the videos to HTML 5 video support format!
Both of the software do a good job in converting the videos in to the required format and it’s simple too!
We are done converting the videos and we programmed it, and opened the web page…. BOOM… Oops, Video is not playing. It’s says, Video playback aborted due to a network error.
It’s because, MIME type is not set in the Web Server. I will consider, IIS 7 as my web server, and we will see, how to add the required MIME types!
- Launch IIS.
- Select the website. In the middle pane, under IIS section, select MIME Types icon.
3. Now click on Add… option in the right pane. It will invoke Add MIME Type dialog box.
4. Now add the following file types one by one in the respective edit boxes!
| File name extension | MIME type |
| .mp4 | video/mp4 |
| .webm | video/webm |
| .ogg | video/ogg |
5. Once, you are done adding the file types, close the IIS.
Now try again with the web page, which has video, surprise it’s working now. Yeah! it will work, because, we set the file type information.
NOTE: You can do the same for older IIS versions. For other web servers like Apache, we may have to do similar settings but in different way!
I think it’s time to kick the plug – ins and start using HTML 5 Video!
Happy Web Programming!!!
Thanks!
Roopesh's Space 