Using HTML 5 <video> tag we can make videos play on different devices and browsers without the need of extra plugins, we’ve seen it in the previous article. It is good, but still one video type can’t make it all on the browsers, even HTML <video> tag is used.
Different browsers uses different codecs even for HTML5 videos. When you are using the <video> tag, be sure it plays on every browser, or else there won’t be any benefit of using <video> tag over <embed> tag.
A video codec is basically an algorithm for a video compression format. Raw video files are too large to send them over the web and so some sort of compression is needed for them for quick delivery. For example, would you like to wait five minutes for a webpage to load? definitely no! I don’t wait either, probably no one else would wait either. People like to read, watch and listen the information on the webpages that load faster not from those which load slower than a snail.
Web browsers must support some sort of compression algorithms, also known as codecs. Each browser supports different type of codes on web and will be able to play the encoded video files. The saddest part is that today’s HTML browsers supports a subset of video codecs and unfortunately there is no such codec that can be used to play your video on every browser.
You have to work on encoding your video numerous times for different browsers. The good news is that you no need to write the <video> tag for every browser but the additional codec alone is enough. Let’s see how to choose right codec for the HTML5 <video>.
Before that, let’s take a look at the traditional <video> tag with source of the video file setting to src attribute.
poster="examples/sanfran.jpg" src="examples/sanfran.m4v">
</video>
We’ve used the src attribute to handle the source video file in the preceding code. The same code can be written using <source> tag inside the <video> tag as following:
poster="examples/sanfran.jpg">
<source src=examples/sanfran.ogv type=video/ogg>
<source src=examples/sanfran.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>
The the above code, the <source> tag is nested inside the <video> tag. If you have noticed, we used two <source> tags inside one after another. Your browser will try to play the first video file from the list of sources and if it is not supported, it skips to next one until the playable format is found. When no video format is playable, it shows blank black video space on the webpage. The text showing “You browser does not support the video tag” is for non-HTML5 browsers.
Which Codecs Browser Support?
Figuring out which codec you need to support is the hard part. You won’t be able to distinguish them with browsers unless you get some experience working on them. Here are list of codecs HTML5 web browsers support:
H.264(MP4)
This codec is supported by Apple Safari and Microsoft Internet Explorer web browsers. This codec was not available for free initially, but later it is made free for anyone but still some governing groups like Apple controls it. This is the basis for reluctance among other browser makers to adopt support for this codec. From version 9, Google Chrome has also started to support this codec, which makes it even more viable as a web codec.
OGG/Theora
This is free and open standard codec but lacks the supporting tools. Since none of the big browser makers support it, this codec doesn’t have much supporting tools and therefore lost in existence.
WebM
Tis format is based on VP8 codec that is owned by Google. This uses high quality form of compression algorithm that is free and open source, which makes WebM the best web codec. This codec is supported by almost every browser and so making it a trending codec but Apple don’t support this codec in any form.
So, making it clear that no single codec is supported on different browsers. It is necessary to provide two codecs at least to support Apple browsers and the rest. To be compatible with Apple and Internet Explorer browsers, you must support H.264, and then either OGG or WebM can be used to cover the other browsers.
Post a Comment