HTML5 is rich with new elements and features that help us to create interactive and user friendly websites. It supports dozens of new elements and attributes for building semantic websites. These new features include multimedia tags for audio and video formats.

The old browsers which are Flash-based player were sufficient for streaming on the web but thanks to modern standard that end the dependency on Flash player with its new advance features. In this article I’d like to offer a short description about Types Of Media, browser media support, embedding simple HTML5 videos and also offering Flash fallback functionality for old browsers like IE 7,8 etc.

1. Types Of Media

There are 3 major media types which are supported by HTML5: MP4, WebM, and Ogg/Ogv. The MPEG-4 file type allows for playback in third party Flash players. WebM and Ogg are two much newer file types related to HTML5 video. Ogg uses Theora encoding which is based on the open-source standard audio file format. These can be saved with a .ogg or .ogv extension.

WebM is a new media tye developed by Google. This format is supported by Opera, Google Chrome, Firefox 4+, and most recently Internet Explorer 9. It’s still unknown by most web professionals but WebM will be leading video media format in the future of web video.

2. Media Browser Support

So first of all, we need to know which media types are supported by web browsers for your website. The first three (Mozilla Firefox, Google Chrome and Opera) provides full support to all major media types. Here is a breakdown of what media type works for each browser:

  • Mozilla Firefox – WebM, Ogg
  • Google Chrome – WebM, Ogg
  • Opera – WebM, Ogg
  • Safari – MP4
  • Internet Explorer 9 – MP4
  • Internet Explorer 6-8 – No HTML5, Flash Only

3. Embedding Simple HTML5 Video

Now let’s see the syntax required to embed some sample code. All we need is the HTML5 video tag to reference each movie URL.

  1. <video width=“320” height=“240” controls autoplay poster=“/img/scene-preview.jpg”>  
  2. <source src=“/mymovie/movie.mp4” type=“video/mp4”>  
  3. <source src=“/mymovie/movie.webm” type=“video/webm”>  
  4. Sorry, your browser doesn’t support HTML5 video.  
  5. </video>  

In above syntax the controls and auto play attributes don’t need to be set with any values. I also included a poster attribute which preloads an image over the video player before streaming. This is a common preview with many web players.

In above syntax code, we have offered both MP4 and WebM formats internal to the video element. If neither of these can be loaded then we display an error for the user to update their browser.

4. Implement A Flash Fallback

The above example is compliant with standard web browsers which supports HTML5. But we still need to consider old browsers which are not support HTML5 standard. For this we have to implement a fallback Flash player to support old browsers such IE version (IE below 9).

  1. <video width=“320” height=“240” controls autoplay poster=“/img/scene-preview.jpg”>  
  2. <source src=“/mymovie/movie.mp4” type=“video/mp4”>  
  3. <source src=“/mymovie/movie.webm” type=“video/webm”>  
  4.   <object type=“application/x-shockwave-flash” data=“/mov/player.swf”  
  5. width=“320” height=“240”>  
  6.     <param name=“allowfullscreen” value=“true”>  
  7.     <param name=“allowscriptaccess” value=“always”>  
  8.     <param name=“flashvars” value=“file=/mov/scene.mp4”>      
  9.     <img src=“/img/scene-preview.jpg” width=“320” height=“240” alt=“Video”>  
  10.     <p>Sorry but your browser doesn’t support HTML5 video.</p>  
  11.   </object>  
  12. </video>  

Above is the fallback Flash player example which supports nearly every browser in existence.

email