The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. The SciVerse applications platform enables developers to build apps based on trusted scientific content. Learn more.
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 <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
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 <video> 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 <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.
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, Encoding.com and the new Vid.ly.
(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.)
The Future
The codec battle aside — and to be clear, most large publishers are still targeting H.264 — the potential of HTML5 for video is immense, not just on the web, but in mobile and tablet applications and on connected devices.
Last December, Christian Kaiser from Netflix wrote a blog post detailing what needs to happen for HTML5 streaming via Netflix to become a reality. We think this paragraph sums up the potential of HTML5 video perfectly:
Then 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.
What do you think of HTML5 and its place in the future of web video? Let us know in the comments.
Series Supported by Elsevier
The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. In 2010, prominent science publisher Elsevier launched SciVerse to provide developers with access to ample research data so they can build apps on top of trusted scientific content. SciVerse also sponsors “Apps for Science,” a $35,000 developer challenge to accelerate science. Learn more.
More Dev and Design Resources from Mashable:
– 8 Powerful & Inexpensive Desktop Design Apps
– Why Everyone Is Talking About Node
– How JavaScript & HTML5 Are Remaking the Web
– 8 Essential Developer Apps for Multiple Platforms
– 8 Essential Web Typography Resources
More About: Future Web Series, HTML5, html5 video, video, Web Development, webgl
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad
