Next Previous

Audio and Video HTML

In its simplest form, the <audio> and <video> tags require only a src attribute to identify the media, although you generally want to set the controls attribute as well, so the user can play and pause the media. The browser allocates space, provides a default controller, loads the media, and plays it when the user clicks the play button. It‚Äôs all automatic.

There are optional attributes as well, such as autoplay, loop, height, and width.

Basic Syntax

The attributes for the <audio> and <video> tags are summarized in Table 1-1. The only difference between the <audio> and <video> tag attributes is the option to specify a height, width, and poster image for video.

**Table 1-1** Attributes of the `<audio>` and `<video>` elements
Attribute	Value	Description
autobuffer	Boolean‚Äîany value sets this to `true`	If present, asks the browser to begin loading the media immediately.
autoplay	Boolean‚Äîany value sets this to `true`	If present, asks the browser to play the media automatically.
controls	Boolean‚Äîany value sets this to `true`	If present, causes the browser to display the default media controls.
height (video only)	pixels	The height of the video player.
loop	Boolean‚Äîany value sets this to `true`	If present, causes the media to loop indefinitely.
poster (video only)	url of image file	If present, shows the poster image until the first frame of video has downloaded.
src	url	The URL of the media.
width (video only)	pixels	The width of the video player.

Important: Several of the attributes are boolean. Although they can be set to false using JavaScript, any use of them in the HTML tag sets them to true. Controls="controls", for example, is the same as controls=true or simply controls. Even controls=false sets controls to true in HTML. To set these attributes to false in HTML, omit them from the tag.

Listing 1-1 shows an HTML page that autoplays a video with user controls.

Listing 1-1 Creating a simple movie player

<!DOCTYPE html>

<html>

   <head>

      <title>Simple Movie Player</title>

   </head>

   <body>

      <video src="http://Domain.com/path/My.mov"

             controls="controls"

             autoplay="autoplay"

             height=270 width=480

      </video>

  </body>

</html>

Device-Specific Considerations

There are a handful of device-specific considerations you should be aware of when embedding audio and video using HTML5.

Optimization for Small Screens

Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by displaying audio or video using the full screen‚Äîvideo controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Neither video nor audio is presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari displays audio and video inline, embedded in the webpage.

User Control of Downloads Over Cellular Networks

In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.

This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">

This does nothing on iPhone OS: <body onLoad="document.myMovie.play()">

Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iPhone OS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iPhone OS, especially iPad.

iPhone Video Placeholder

On iPhone and iPod touch, a placeholder with a play button is shown until the user initiates playback, as shown in Figure 1-1. The placeholder is translucent, so the background or any poster image shows through. The placeholder provides a way for the user to play the media.

Figure 1-1 The iPhone video placeholder

On the desktop and iPad, the first frame of a video displays as soon as it becomes available. There is no placeholder.

Media Playback Controls

Controls are always supplied during fullscreen playback on iPhone and iPod touch, and the placeholder allows the user to initiate fullscreen playback. On the desktop or iPad, you must either include the controls attribute or provide playback controls using JavaScript. It is especially important to provide user controls on iPad because autoplay is disabled.

Supported Media

Safari on the desktop supports any media the installed version of QuickTime can play. This includes media encoded using codecs QuickTime does not natively support, provided the codecs are installed on the user‚Äôs computer as QuickTime codec components.

Safari on iPhone OS (including iPad) currently supports uncompressed WAV and AIF audio, MP3 audio, and AAC-LC or HE-AAC audio. HE-AAC is the preferred format.

Safari on iPhone OS (including iPad) currently supports MPEG-4 video (Baseline profile) and QuickTime movies encoded with H.264 video (Baseline profile) and one of the supported audio types.

iPad and iPhone 3G and later support H.264 Baseline profile 3.1. Earlier versions of iPhone support H.264 Baseline profile 3.0.

Video Overlays

Currently, all devices running iPhone OS are limited to playback of a single video stream at any time. Playing more than one video‚Äîside by side, partly overlapping, or completely overlaid‚Äîis not currently supported on iPhone OS devices. You can change the video source dynamically, however. See ‚ÄúReplacing a Media Source Sequentially‚Äù for details.

Working with Attributes

There are several ways you can control media playback directly in HTML by setting attributes appropriately.

Resizing the Video

In Safari on iPhone¬†OS, the native size of the video is unknown until the user initiates a download. If no height or width is specified, a default size of 150 x 300 pixels is allocated in the webpage. On iPad, the video currently plays in this default space. On iPhone or iPod touch, the video plays in full-screen mode once the user initiates it, and the default space is allocated to a placeholder on the webpage.

In Safari on the desktop, the movie metadata is downloaded automatically whenever possible, so the native video size is used as the default. If only the height or width parameter is specified, the video is scaled up or down to that height or width while maintaining the native aspect ratio of the movie. If both height and width are specified, the video is presented at that size. If neither is specified, the video is displayed at its native size.

Enabling the Controller

In Safari, the default video controller is slightly translucent and is overlaid on the bottom 18 pixels of the video. The controller is not normally visible when the movie is playing‚Äîit appears only when the movie is paused, when the user touches the video, or when the mouse pointer hovers over the playing movie. In cases where it is crucial that the bottom of the video never be obscured, omit the controls attribute. (You cannot set the attribute to false explicitly in HTML‚Äîyou set it to false implicitly by leaving the attribute out.)

If you do not set the controls attribute, you must either set the autoplay attribute, create a controller using JavaScript, or play the movie programmatically from JavaScript. Otherwise the user has no way to play the movie.

Warning: To prevent unsolicited downloads over cellular networks at the user‚Äôs expense, embedded media cannot be played automatically in Safari on iPhone OS‚Äîthe user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.

Autobuffering

If you set the autobuffer attribute, it tells the browser you want the specified media file to start buffering immediately, making it more likely that it will begin promptly and play through smoothly when the user plays it.

If you have multiple movies on the page, you should leave the autobuffer attribute unset, to prevent all the movies from downloading at once.

Note: The autobuffer attribute is not supported in Safari 4.0.4. Safari on the desktop always autobuffers. Safari on iPhone OS never autobuffers.

Playing Background Music

To play an audio file in the background, set the autoplay attribute but not the controls attribute, as shown in Listing 1-2. To play the file continuously, set the loop attribute.

Listing 1-2 Playing Background audio

<!DOCTYPE html>

<html>

   <head>

      <title>Background Audio Player</title>

   </head>

   <body>

      <audio src="http://Domain.com/path/My.mp3"

             autoplay

             loop

            <!-- values are optional for boolean attributes -->

      </audio>

<p>If the sound is turned on, you should hear music playing...</p>

  </body>

</html>

Note: On iPhone or iPod touch, the audio is played in full-screen mode. On iPad, the audio does not play unless you set the controls attribute or provide a JavaScript control.

Showing a Poster

Setting a poster image normally has a transitory effect‚Äîthe poster image is shown only until the first frame of the video is available, which is typically a second or two. On iPhone and iPod touch, however, the first frame is not shown until the user initiates playback, and a poster image is recommended, as shown in Listing 1-3.

Listing 1-3 Showing a poster

<!DOCTYPE html>

<html>

   <head>

      <title>Movie Player with Poster</title>

   </head>

   <body>

      <video src="http://Domain.com/path/My.mov"

             controls="controls"

             autoplay="autoplay"

             height=340 width=640

             poster="http://Domain.com/path/Poster.jpg"

      </video>

  </body>

</html>

Providing Multiple Sources

Not all types of audio and video can play on all devices and browsers. Fortunately, the <audio> and <video> elements allow you to list as many <source> elements as you like. The browser iterates through them until it finds one it can play or runs out of sources. Instead of using the src attribute in the media element itself, follow the <audio> or <video> tag with one or more <source> elements, prior to the closing tag.

<audio controls=controls>

<source src="mySong.aac">

<source src="mySong.oga">

</audio>

The <source> element can have a type attribute, specifying the MIME type, to help the browser decide whether or not it can play the media without having to load the file.

<audio controls=controls>

<source src="mySong.aac" type="audio/mp4">

<source src="mySong.oga" type="audio/ogg">

</audio>

The type attribute can take an additional codecs parameter, to specify exactly which versions of which codecs are needed to play this particular media.

<audio controls=controls>

<source src="mySongComplex.aac" type="audio/mp4; codecs=mp4a.40.5">

<source src="mySongSimple.aac" type="audio/mp4; codecs=mp4a.40.2">

</audio>

Specifying Multiple Media Formats

List the alternate media sources in the order of most desirable to least desirable. The browser chooses the first listed source that it thinks it can play. For example, if you have an AAC audio file, an Ogg Vorbis audio file, and a WAVE audio file, listed in that order, Safari plays the AAC file. A browser that cannot play AAC but can play Ogg plays the Ogg file. A browser that can play neither Ogg nor AAC might still be able to play the WAVE.

Listing 1-4 a simple example of using multiple sources for an audio file:

Listing 1-4 Specifying multiple audio sources

<!DOCTYPE html>

<html>

   <head>

      <title>Multi-Source Audio Player</title>

   </head>

   <body>

      <audio

             controls="controls"

             autoplay="autoplay"

             <source src="http://Domain.com/path/MyAudio.m4a">

             <source src="http://Domain.com/path/MyAudio.oga">

             <source src="http://Domain.com/path/MyAudio.wav">

      </audio>

  </body>

</html>

Notice that you don‚Äôt have to know which browsers support what formats, and then sniff the user agent string for the browser name to decide what to do. Just list your available formats, preferred format first, second choice next, and so on. The browser plays the first one it can.

Currently, most common browsers support low-complexity AAC and MP3 audio and basic profile MPEG-4. Most browsers that do not support these formats support Theora video and Vorbis audio using the Ogg file format. Generally speaking, if you provide media in MPEG-4 (basic profile) and Ogg formats, your media can play in all common browsers that support HTML5 media.

Note: Safari on iPhone OS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs.

Specifying Multiple Delivery Schemes

You can also use multiple source files to specify different delivery schemes. Let‚Äôs say you have a large real-time video streaming service that uses RTSP streaming, and you want to add support for Safari on iPhone OS, including iPad, using HTTP Live Streaming, along with a progressive download for browsers that can‚Äôt handle either kind of streaming. As shown in Listing 1-5, with HTML5 video it‚Äôs quite straightforward.

Listing 1-5 Specifying multiple delivery schemes

<!DOCTYPE html>

<html>

   <head>

      <title>Multi-Scheme Video Player</title>

   </head>

   <body>

      <video controls autoplay >

             <source src="http://HttpLiveStream.4gu">

             <source src="rtsp://LegacyStream.3gp">

             <source src="http://ProgressiveDownload.m4v">

      </video>

  </body>

</html>

Again, the browser picks the first source it can handle. Safari on the desktop plays the RTSP stream, while Safari on iPhone OS plays the HTTP Live stream. Browsers that support neither 4gu playlists nor RTSP URLs play the progressive download version.

Multiple Data Rate Sources

HTML5 does not support selection from multiple sources based on data rate. If you supply multiple sources, the browser chooses the first it can play based on scheme, file format, profile, and codecs. Bandwidth is not tested. To provide multiple bandwidths, you must provide a src attribute that specifies a source capable of supporting data rate selection itself.

For example, if one of your sources is an HTTP Live Stream, the playlist file can specify multiple streams, and Safari selects the best stream for the current bandwidth dynamically as network bandwidth changes.

Similarly, if the source is a QuickTime reference movie, it can include alternate sources for progressive download, and Safari chooses the best reference movie for the bandwidth when the video is first requested (though it does not dynamically switch between sources if available bandwidth subsequently changes).

Specifying Fallback Behavior

It‚Äôs easy to specify fallback behavior for browsers that don‚Äôt support the <audio> or <video> elements‚Äîjust put the fallback content between the opening and closing media tags, after any <source> elements. See Listing 1-6.

Listing 1-6 Adding simple fallback behavior

<!DOCTYPE html>

<html>

   <head>

      <title>Simple Movie Player with Trivial Fallback Behavior</title>

   </head>

   <body>

      <!-- opening tag -->

      <video src="http://Domain.com/path/My.mov"

             controls="controls"

       <!-- fallback content -->

       Your browser does not support the video element.

      <!-- closing tag -->

      </video>

  </body>

</html>

Browsers that don‚Äôt support the <audio> or <video> tags simply ignore them. Browsers that support these elements ignore all content between the opening and closing tags (except <source> tags).

Note: Browsers that understand the <audio> and <video> tags do not display fallback content, even if they cannot play any of the specified media. To provide fallback content in case no specified media is playable, see ‚ÄúUsing JavaScript to Provide Fallback Content.‚Äù

Fall Back to the QuickTime Plug-in

There is a simple way to fall back to the QuickTime plug-in that works for nearly all browsers‚Äîdownload the prebuilt JavaScript file provided by Apple, AC_QuickTime.js, from http://developer.apple.com/internet/licensejs.html and include it in your webpage by inserting the following line of code into your HTML head:

<script src="AC_QuickTime.js" type="text/javascript">

</script>

Once you‚Äôve included the script, add a call to QT_WriteOBJECT() between the opening and closing tags of the <audio> or <video> element, passing in the URL of the movie, its height and width, and the version of the activeX control for Internet Explorer (just leave this parameter blank to use the current version). See Listing 1-7 for an example.

Listing 1-7 Falling back to the QuickTime plug-in

<!DOCTYPE html>

<html>

   <head>

      <title>Simple Movie Player with QuickTime Fallback</title>

      <script src="AC_QuickTime.js" type="text/javascript">

      </script>

   </head>

   <body>

      <video controls="controls">

         <source src="myMovie.mov" type="video/quicktime">

         <source src="myMovie.3gp" type="video/3gpp">

       <!-- fallback -->

       <script type="text/javascript">

        QT_WriteOBJECT('My.mov' , '320', '240', '');

       </script>

      </video>

  </body>

</html>

You can pass more than twenty additional parameters to the QuickTime plug-in. For more about how to work with the QuickTime plug-in and the AC_QuickTime.js script, see HTML Scripting Guide for QuickTime.

Fall Back to Any Plug-In

Since most browsers now support the <audio> and <video> elements, you can simplify the process of coding for plug-ins by including only the version of the <object> tag that works with Internet Explorer as your fallback for HTML5 media.

The example shListing 1-8 uses HTTP Live Streaming for browsers that support it, MPEG-4 by progressive download for most others, Ogg Vorbis for browsers that support only open-source media, and falls back to a plug-in for versions of Internet Explorer that don‚Äôt support HTML5.

Listing 1-8 Falling back to a plug-in for IE

<!DOCTYPE html>

<html>

   <head>

      <title>Simple Movie Player with Plug-In Fallback</title>

   </head>

   <body>

       <video controls="controls">

        <source src="HttpLiveStream.m3u8 type="vnd.apple.mpegURL">

        <source src="ProgressiveDowload.mp4" type="video/mp4">

        <source src="OggVorbis.ogv" type="vido/ogg">

<!-- fallback -->

        <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

         CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"

         HEIGHT="320"

         WIDTH="240"

          <PARAM NAME="src" VALUE="ProgressiveDownload.mp4">

        </object>

      </video>

  </body>

</html>

TListing 1-8 uses the QuickTime plug-in. To use a different plug-in, change the CLASSID and CODEBASE parameters to those of your preferred plug-in and provide the PARAM tags the plug-in requires.

Next Previous

Last updated: 2010-03-18

Did this document help you?

Shop the Apple Online Store (1-800-MY-APPLE), visit an Apple Retail Store, or find a reseller.