Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Exploring HTML 5's Audio/Video Multimedia Support

The <audio> and <video> tags were among the first features to be added to the HTML 5 specification. Find out how these elements enable the browser to work with both types of media in an easy-to-use manner.


advertisement
any years ago, when I was first getting started as a programmer, much of the work that I did was focused on the development of multimedia applications (programs that combined video, audio, animation, and text) in order to build presentations and computer games. I did most of this work using Macromedia Director in the early 1990s. The idea of developing even audio—let alone video—apps on the web was pretty much a pipe-dream until the debut of RealNetworks, which provided the first major streaming technology that enabled developers to send buffered media content over the Internet. Later, RealNetworks allowed embedding media content within web pages.

The idea of specific video and audio tags within HTML would have been technically impossible in HTML 3 and even somewhat infeasible in HTML 4. Because HTML 4.0 essentially was a "frozen" version, the specific mechanism for displaying content has been very much format dependent (e.g., Apple QuickTime Movies and Flash video) and usually relies upon tags with varying parameters for passing the relevant information to the server. As a result, video and audio embedding on web pages has become something of a black art .

Its perhaps not surprising then that the <audio> and <video> tags were among the first features to be added to the HTML 5 specification, and these seem to be the first elements of the HTML 5 specification that browser vendors implemented. These particular elements are intended to enable the browser to work with both types of media in an easy-to-use manner. An included support API gives users finer-grained control.



HTML 5 <audio> and <video> Elements

The <audio> tag is the simpler of the two, with the attributes listed in Table 1.

Table 1. <audio> Element Attributes
Attribute Name Value Forms Description
src xs:anyURI This attribute gives the URL of the media source.
autobuffer autobuffer This binary attribute, when present, indicates whether the user-agent (the browser) should automatically buffer the content or have the user buffer the content through the associated API.
autoplay autoplay This binary attribute, when present, indicates whether the user-agent (the browser) should begin playing the video automatically when the page finishes loading.
loop loop This binary attribute, when present, indicates whether the user-agent (the browser) should automatically loop the content when it reaches the end of the media.
controls controls This binary attribute, when present, indicates whether the user-agent (the browser) should display controls allowing for user interaction with the resource in question.

Note that the <audio> element (and the <video> element) also supports the general attributes that all <div>-based elements support ( id, style, class and so forth), even when the interface is otherwise invisible.

The <video> element incorporates all the attributes that the <audio> element does, plus three others (see Table 2).

Table 2. <Video> Element Attributes
Attribute Name Value Forms Description
src xs:anyURI This attribute gives the URL of the media source.
autobuffer autobuffer This binary attribute, when present, indicates whether the user-agent (the browser) should automatically buffer the content or have the user buffer the content through the associated API.
autoplay autoplay This binary attribute, when present, indicates whether the user-agent (the browser) should begin playing the video automatically when the page finishes loading.
loop loop This binary attribute, when present, indicates whether the user-agent (the browser) should automatically loop the content when it reaches the end of the media.
controls controls This binary attribute, when present, indicates whether the user-agent (the browser) should display controls allowing for user interaction with the resource in question.
width dimension ###(cm|em|en|in|px|pt|%) This attribute provides the width, in the appropriate units, of the video image. If height is unspecified, it will be proportional to the height of the initial video given the width.
height dimension ###(cm|em|en|in|px|pt|%) This attribute provides the height, in the appropriate units, of the video image. If width is unspecified, it will be proportional to the width of the initial video given the height.
poster xs:anyURI This attribute is a link to an image, if the video either cannot be rendered or has not yet been buffered. The poster will be displayed in its place with the given proportions.

The poster is effectively a placeholder image used while the video is buffering. It's not always necessary. A number of video codecs automatically extract a particular frame from the video to use as the poster for the video prior to downloading and front-load this (either the first frame or a random frame from mid-way through). Not all codecs are capable of this function, however.

Using a poster in this particular case is also useful for creating an alternate "brand" for the video while it's loading, rather than relying upon the host to supply it. When the video actually starts to play, the poster image is irrelevant, even when paused. In the latter case, either the last frame that was displayed before pausing will be shown or if the video plays all the way through, the last frame of the video will be shown.

Ordinarily, video and audio formats use whatever codec the given media source is compressed and formatted in, but sometimes the browser agent does not support that particular codec. In this case, as an alternative to using the @src attribute, HTML 5 also defines a secondary <source> element, which defines both the locations of a given resource as well as the codec type that the resource exposes. Table 3 lists the <source> element definitions.

Table 3. <Source> Element Attributes
Attribute Name Value Forms Description
src xs:anyURI This attribute gives the URL of the media source.
type The mime type of the resource, as a string This attribute contains the displayed mime-type of the media resource, usually in the form video/format.
media A media codec string This string contains the codec information applicable for the particular resource.

In the case of multiple <source> elements, if the web browser can't play the first codec (it's not supported), it will go down the list until it finds one on which it can play.

Thus, the following bit of HTML 5 code shows a video element with three different codecs:

<video width="320px" height="240px" autobuffer="autobuffer" autoplay="autoplay"> <source src='video.mpg' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.mp4' type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> </video>

The first <source> element describes an mp4 resource (the most typical MPEG video types, though these often have just a straight "mpg" extension), which uses the baseline profile video codec. The second is a video encoded with the simple profile video codec, while the third is encoded with the Ogg-vorbis codec. Most typically, the @type attribute will contain the associated mime-type. If it doesn't, the @media attribute can be given with this information. Note that you have an either/or type of situation with regard to the @src attribute: it will be used preferentially even if <source> elements exist, but you must have one or the other in your media elements.

Theoretically, the <video> and <audio> elements should be able to handle most of the codecs currently in use. In practice, however, the browsers that do currently support these elements do so only for the open source Ogg Vorbis and Theora standards. The names may not be familiar to you—though fans of Terry Pratchett's Diskworld series may recognize the Ogg Vorbis name from the Exquisitor Vorbis character in "Small Gods" and (perhaps) the Nanny Ogg character featured in many of his books. Theora (Jones), on the other hand, was the name of the controller of the Max Headroom character in the series of the same name.

The Ogg Vorbis standard is both open source and high fidelity, compared with the better-known MPEG formats. As such, Ogg Vorbis is a popular format for storing audio tracks for games and online applications. The HTML 5 specification does not give any preference to Ogg Vorbis/Theora over other formats, but it is the one supported by Firefox (exclusively, at this point). The Chrome and Safari teams both have announced intentions to support the two standards in addition to others.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap