Advantages of HTML5 VIDEO Tag

HTML5 is gaining momentum in the web development world. So a simple question strikes in mind WHY ? What are the benefits of HTML5 or why should a developer use HTML5 ? Is there a really advantage in using latest VIDEO tag from HTML5 specification ?

Speaking in layman term – It gives you a Polished Sword with more Sharpness, power, better handling etc. increasing your chances of success.

Speaking in developer term – It gives your users a pleasant experience to watch videos as they don’t have to download any additional plugins.

The biggest advantage of HTML5 tag is that you can support multiple file formats. So if you want to display a video to the user then you can create a video in different formats and then you can specify those different formats in HTML5 video tag. Whenever users open your website and try to play video then this intelligent Video tag of HTML5 checks the type of video that can be played and plays that.

Isn’t it cool ?

You just create videos and put it. Your visitors will always be able to play one of the formats. And in case if none of these formats work then you can always specify our conventional “flash” method in it.

Embedding HTML5 Video

Lets see How HTML5 VIDEO Tag works…

<video width="320" height="240" controls>
  <source src="html5videosample.mp4" type="video/mp4">
  <source src="html5videosample.ogg" type="video/ogg">
  <source src="html5videosample.webm" type="video/webm">
  Your browser does not support the video tag
  </object>
</video>

In the above code,

In video tag you can specify width and height of the video control. If you want UI controls like Play, Pause, Volume then you can specify “controls” attribute.

You can specify multiple video sources with the source tag and type of the video eg. mp4, ogg, webm

Browsers start rendering video tag, it checks first source element, if it can play that, it will play. If its not able to play then it will go to next source tag. And it continues…

If none of the above video matches then it shows error message “Your browser does not support the video tag”.

What if HTML5 Video is not supported, Fallback 🙂

Better way to use Video Tag to handle videos is to specify object and embed tags as a fallback if none of the videos are played.

<video width="320" height="240" controls>
  <source src="html5videosample.mp4" type="video/mp4">
  <source src="html5videosample.ogg" type="video/ogg">
  <source src="html5videosample.webm" type="video/webm">
  <object data="html5videosample.mp4" width="320" height="240">
  <embed src="html5videosample.swf" width="320" height="240">
  </object>
</video>

In the above code we have replaced the error message by our conventional “Object Tag” and “Flash Embed” method. So advantage of above method is that if none of the videos work, then object tag  is rendered and if that doesn’t work then it switches to embed tag.

Even our popular video site Youtube is also trying HTML5 in trial version at Youtube HTML5 Videos Trial Version.

See the following table from http://www.w3schools.com/tags/tag_video.asp which shows the support of different browsers.

The video tag specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the video element: MP4, WebM, and Ogg:

• MP4 = MPEG 4 files with H264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec
• Ogg = Ogg files with Theora video codec and Vorbis audio codec

MIME Types for Video Formats

You can read more about video tag at w3schools html5 video tag. Even there are lot of HTML5 Video Players created. Even youtube has HTML5 version for streaming videos.

Want to know…Does my browser supports HTML5 Video ?