Ecommerce Developer
 
 

Code

A Look at Audio and Video Elements in HTML 5

By Armando Roggio on December 11, 2009 · with 0 Comments

 

HTML 5’s audio and video APIs offer web designers and developers an alternative for delivering rich Internet content.

Internet users in the U.S. watched some 27.9 billion online videos in October 2009, according to comScore, the Internet tracking firm. This breaks down, according to comScore, to 167 million viewers who watched—coincidentally— an average of 167 videos each in October. And video use is on the rise everywhere, for example, comScore also reported on December 1, 2009 that French online video consumption had risen 141 percent in September 2009 compared to September 2008 as that nation’s Internet users viewed 5.4 billion online videos for the month.

Adding to the proliferation of video is the extensive use of Internet audio—see the Ecommerce Developer Audio Interviews series as an example—and it is clear that rich Internet content is a trend that web developers and designers must follow. But for now, you are limited in how you deliver that content.

Adobe’s Flash Has Very Little Real Competition

Adobe’s Flash Player is currently the leading way to deliver online video and audio content. According to a September 2009 Millward Brown survey, 99.7 percent of the Internet-enabled desktop computers in the U.S., Canada, U.K., France, Germany, Japan, Australia, and New Zealand collectively had the Adobe Flash Player plugin installed. What’s more some 97.7 percent of similar machines in so-called “emerging” markets also had Flash Player plugins, according to a June 2009 study.

Flash is an excellent platform, but competition does breed innovation and right now Flash is not terribly challenged.

HTML 5 Offers An Alternative

With so much emphasis on audio and video content, the HTML 5 draft standard, which the World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG) have been jointly developing since 2004, features an HTML alternative that may soon be compatible with many leading browsers. What's more, HTML 5 is easy to implement, and is simple to customize.

Implementing the <audio> and <video> Tags

The HTML 5 <audio> and <video> tags take very similar attributes, such as src, autobuffer, autoplay, loop, and controls. A simple example of embedding audio might look like this:

 <audio src="some-audio-file.ogg" ></audio>

Or

 <audio src="some-audio-file.ogg"  autoplay></audio>

And embedding video could be as easy as:

 <video src="some-video-file.ogv" controls poster="some-cover-image.png" width="640" height="480"></video>

HTML 5 also provides a <source> element, which makes it possible to offer alternative audio or video formats, as Lachlan Hunt described in his excellent HTML 5 article). Hunt’s examples follow:

 <video poster="poster.jpg">
     <source src="video.3gp" type="video/3gpp" media="handheld">
     <source src="video.ogv" type="video/ogg;   codecs=theora, vorbis">
     <source src="video.mp4" type="video/mp4">
 </video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </audio>

Furthermore, HTML 5 provides specific controls options that can be styled with CSS. The result is that almost any web designer can create a custom video or audio player with CSS. Add some server side language or some JavaScript and you can create fully functional video or audio players that react to user input, change skins, adjust for mobile versus desktop clients, and even insert ads and embedded links.

All told, implementing a custom player and embedding audio and video content in this manner can be more efficient, in terms of lines of code, than with other methods, including Flash. Furthermore, by offering an alternative to Adobe Flash Player, HTML 5 could spur further innovation.

Browser Compatibility for the HTML 5 <audio> and <video> Elements

Unfortunately, browser support for these tags is by no means as wide spread as, for example, the Flash Player plugin. Internet Explorer 8 does not support these important tags. And although there have been widespread reports of WebKit support, I was not able to get my versions of Chrome or Safari to recognize the tags. Perhaps I just need to update.

The tags, however, worked wonderfully in Firefox 3.5.5. And most browser makers are promising some level of support soon.

Summing Up

HTML 5’s <audio> and <video> elements are perhaps one of the most exciting features that this new draft standard includes, and they are features that web developers and designers should be using in projects now.

Mozilla’s support for the tags in Firefox is a huge step in the right direction and an indicator that these elements are here to stay. And why not with so many Internet users demanding rich Internet content, shouldn’t there be more than Flash and Silverlight to effectively deliver that content?

Resources

Related Articles

0 Comments

Rss-sm