HTML5's <video> tag and web browsers

HTML5 is becoming more and more popular technology on the Internet. You won’t need Adobe Flash anymore :) HTML5 has <video> tag which lets you play video in your web browser. So, lets play some videos!

Video tag
Usage of HTML5 <video> tag is very simple - just define the name of your video file in src tag ant that’s it :) For example:

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

Small test
I downloaded 3 different videos from the Internet in MP4 (encoded in H.264), WEBM and  OGV (open source OGG format for videos). Then I installed 4 web browsers into my PC (currently - latest versions): Mozilla Firefox 13.0.1, Google Chrome 19.0.1084.56 m, Opera 12.00 (Build: 1467) and Internet Explorer 9.0.8112.16421.
To play videos I wrote the fallowing code snippet:

<html>
<body>
MP4:
<video width="320" height="240" controls="controls">
  <source src="http://localhost/111/111.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Your browser does not support the video tag.
</video>
WEBM:
<video width="320" height="240" controls="controls">
  <source src="http://localhost/222/222.webm" type='video/webm' />
  Your browser does not support the video tag.
</video>
OGV:
<video width="320" height="240" controls="controls">
  <source src="http://localhost/333/333.ogv" type='video/ogg' />
  Your browser does not support the video tag.
</video>
</body>
</html>

And then tested on various web browsers :)

Results
Mozilla Firefox 13.0.1 can play: WEBM, OGV. But it CAN’T play MP4.
Google Chrome 19.0.1084.56 m can play: MP4, WEBM, OGV.
Opera 12.00 (Build: 1467) can play: WEBM, OGV. But it CAN’T play MP4.
Internet Explorer 9.0.8112.16421 CAN’T play: MP4, WEBM, OGV.
I was wondering why can’t Mozilla Firefox play MP4 files. After some googling I found out that Microsoft released special Mozilla Firefox plug-in which allows to play MP4 (encoded in H.264) files in Mozilla Firefox. You can download it from here: http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin
P.S. Take a look at these web sites:
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_an...
http://www.w3schools.com/html5/tag_video.asp
http://news.cnet.com/8301-30685_3-20025721-264.html
 

Komentuoti