HTML5 update on Video format challenges and some examples

Web Trends Blogs

By Salar Golestanian @ Wednesday, May 18, 2011 :: 12:22 AM :: 635 Views :: 0 Comments ::

Currently, html5 video is more and more used in websites, and we can say that html 5 video is the future of video on the web. HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies, partially replacing the object element.

At present, Adobe Flash Player is widely used to embed video on web sites such as YouTube, since many web browsers have Adobe’s Flash Player pre-installed (with exceptions such as the browsers on the Apple iPhone and iPad and on Android 2.1 or less). Therefore, HTML5 video is intended by its creators to become the new standard way to show video online, with html5 video, those Apple and other mobile users can view the online videos directly. Now, more and more websites have supported or plan to support html5 video. The picture below is about the media websites’ plan for supporting html5 video.

HTML5 is 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 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 or a TV with browser installed, all without having to do lots of special coding.

Here is what Netfix says about HTML5:

Netflix, or any other video streaming service, could deliver to a standard browser as a pure HTML5 web application, both on computers and in CE devices with embedded browsers. Browser builders and CE manufacturers could support every OS and device they choose, leveraging the same implementations across multiple streaming services instead of building and integrating an one-off implementation for each service. Consumers would benefit by having a growing number of continually evolving choices available on their devices, just like how the web works today for other types of services. We believe that this is an attractive goal.

Mushable has a nice article about HTML5 called "How HTML5 Will Transform the Online Video Landscape" and talks about some nice features. and how some 'Challenges Still Exist' with The controversy stems over the various codecs that can be used with HTML5. This problem is still unresolved. with currently there are three different video codecs — or formats — that can be used with the <video> 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.

H.264 is that it is controlled by the MPEG LA, and therefore, requires to be licensed for use. The licensing costs nothing to consumer, but could potentially cost video producers or software makers a lot. 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.

Here are the complications: 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. But considering all these. here are some good news that is coming out of HTML5 developers.

Styling Video:
One nice advantage is the fact that because the <video> 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
HTML5 will eventually overtake Flash? the article shows a nice 3D effect by Pablo Odorico from Argentina as a 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 has once again collaborated 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.