Remember our smile, share the joy with the world!

Home » News Center » The Performance of HTML5 for Online Video - H.264, Ogg Theora and WebM

The Performance of HTML5 for Online Video - H.264, Ogg Theora and WebM

One of the most exciting — and polarizing — aspects of HTML5 is the specifications for HTML5 video. The promise of HTML5 is immense; no longer just a markup language, as robust applications can be built and deployed using the power of the browser.


One of the big promises of HTML5, at least for video, is that it will be possible to serve and play back hardware-accelerated video in the browser, on a smartphone or tablet, or in an embedded device, all without having to do lots of special coding.


Let’s look at some of the ways HTML5 is already influencing the future of online video, as well as some of the challenges that still exist.


Styling Video



Most content publishers serve video in HTML5 primarily to deliver a solid experience to users who are on devices that do not support Adobe’s Flash player. Although this is a valid (and increasingly popular) use case, there are additional advantages to using HTML5 video.


One of those advantages is the fact that because the tag is just another HTML element, it can be styled with CSS3 and JavaScript.


This lets developers create special transformations, custom controls and other effects directly in the markup and stylesheet. Apple has a cool video effects demo using the Tron Legacy trailer and some mask properties in the WebKit rendering engine.


With Firefox 4, Mozilla has proven that it is embracing HTML5 in a big way. The Mozilla team released a set of video demos showcasing the power of HTML5 video when paired with CSS3 transforms in the lead-up to the official Firefox 4 release.


WebGL 3D Video Player



Think HTML5 can’t compete with Flash? Think again. Pablo Odorico from Argentina created an amazing 3D video player demo for Google’s Chrome Experiments. Using HTML5 and WebGL, Odorico uses GLSL shaders to process video from HTML5 in real time.


The goal was to recreate YouTube‘s Flash 3D player, but without using any plugins and with hardware acceleration. YouTube’s Flash 3D player might be a bit more advanced, but this experiment supports all the major features, including side-by-side mode.


This experiment conveys the potential of HTML5 when it comes to video: Creating modern effects and techniques in a way that can be supported across platforms and devices, without the need to rely on plugins.


“3 Dreams of Black” by ROME and powered by WebGL


Chris Milk, the director of last year’s amazing HTML5 video for Arcade Fire is once again collaborating with Google, this time for the new Danger Mouse album, ROME.


The experiment went live earlier this month, and it’s yet another example of what is possible for video and HTML5. Most of the effects and features in the “3 Dreams of Black” video are powered by WebGL and JavaScript — not strictly using the HTML5 video tag. Still, it’s important to consider that HTML5 video isn’t just about the player; it can be about a bigger, better experience.


Challenges Still Exist


In spite of its promise, the tag is one of the most controversial and contentious aspects of the HTML5 specification. The controversy stems over the various codecs that can be used with HTML5.


There are three different video codecs — or formats — that can be used with the tag. These formats are H.264, Ogg Theora and WebM. The technical merits of these formats vary — for what it is worth, H.264 tends to have the best size-to-quality ratio and has best support of commercial encoding, serving and processing tools. H.264 is also well-supported by hardware vendors and chipset makers.


The problem with H.264 is that it is controlled by the MPEG LA, and as such, needs to be licensed for use. The licensing costs don’t mean much to the average video consumer, but could potentially cost video producers or software makers lots of money. Ogg Theora and WebM are royalty-free, which means that software developers and content distributors can use the codec without having to pay licensing fees.


The problem is that because the HTML5 spec doesn’t have a baseline video codec, it’s up to the browser to choose what formats it supports by default. Firefox and Opera don’t support H.264, but they do support WebM and Ogg Theora. Safari and Internet Explorer support H.264, but not Ogg or WebM. Google Chrome did support all formats, but announced in January that it would phase out H.264 support in HTML5 and focus on WebM and Ogg Theora.


This has potentially complicated an already complicated situation even further, because it means that the only foolproof way to serve HTML5 video is to encode in multiple formats, either manually or using solutions like Brightcove, and the new


(It’s worth noting that Firefox, Chromium and Opera will all still play back H.264 content within the Adobe Flash player. As long as the HTML5 video player has a Flash fallback option, it will still work in those browsers.)


Original from: