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:

Encoding.com launched a new, easy video-encoding service called Vid.ly in private beta Monday. Using Vid.ly, users can upload a video file and serve it to multiple devices and web browsers all from a single URL.

Vid.ly simplifies and automates the process of not only transcoding video into multiple formats (WebM, H.264, Ogg, etc.) but also selectively serving that video to various device types.

For content creators who don’t want to use Vimeo or YouTube, finding a way to encode, transcode and serve video in multiple formats to multiple devices can be frustrating.

Once largely concentrated around mobile devices like smartphones and tablets, these frustrations have extended to the desktop in recent weeks. Google’s decision to phase out H.264 support in its Chrome browser, at least in regards to HTML5 video, has created a new set of problems.

HTML5 video (or to be more specific, H.264-encoded HTML5 video) was supposed to be our savior; instead it has just become another complication.

With Vid.ly, Encoding.com hopes to help alleviate some of the pain.


How it Works


Using the web browser, users can upload video (up to 1GB in size for the standard free accounts) to Vid.ly. The uploader is robust, supporting FTP and HTTP uploads, standard local file uploads, and cloud services from Amazon S3 and the Rackspace Cloud.

Then, using Encoding.com’s encoding scripts, that video is converted into more than a dozen different formats and sizes. The resulting video is served from a single URL, vid.ly/XXXX.

Users can share that short URL, and browser detection will determine what version of the video is played back. Even better, Vid.ly offers an HTML5 embed code that can be used on web pages or blogs, as well as access to a VP6 Flash file for use with custom players.

What this means is that content creators who want to serve HTML5 video to all visitors don’t need to worry about using Ogg for some browsers, WebM for others and H.264 for the rest — the HTML5 embed code will work across the board.


Pricing


In its private beta, Vid.ly is offered as a free service. File sizes are limited to 1GB and profiles cannot be adjusted.

In the next few months, a professional version, Vid.ly Pro, will become available. Vid.ly Pro won’t have the file size limitations; instead, it will let users customize encoding profiles and will support adaptive bitrate for iOS devices. Vid.ly Pro users will also be able to use Vid.ly with their own CDN.

Encoding.com President Jeff Malkin tells us that — aside from the professional accounts — the company hopes to benefit from the Vid.ly landing page and branding from URLs shared across social networks and SMS.

Until now, Encoding.com has primarily targeted more professional users. Vid.ly can certainly be leveraged by professionals, but there is a lot of potential for consumers with more minor video needs.


Invites


Encoding.com was nice enough to give Mashable access to 1,000 invites to Vid.ly.

To sign up, simply go to http://vid.ly and enter the code MASHABLE2011

Once the code is entered, users can try out the beta, upload videos and invite others to join.

More About: encoding.com, HTML5, html5 video, mobile video, vid.ly, video codecs, web video

For more Dev & Design coverage: