---
title: About HTML5 Audio and Video
framework: audiovideo
role: article
path: apple-archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction
---

# About HTML5 Audio and Video

Explains how to use the HTML 5 audio and video tags to add media to web content.

## At a Glance

Safari supports the ` ` and ` ` media elements on iOS 3.0 and later and in Safari 3.1 and later on the desktop (Mac OS X and Windows). Support for these media elements allows Safari and other HTML5-compliant browsers to play the indicated source media without using a plug-in.

To get the most out of HTML5 audio and video, you should first learn to create the HTML media elements, then learn how to control them using JavaScript, and finally learn to apply CSS styles to media elements and modify styles dynamically using JavaScript.

### Create the HTML5 Media Elements

**Relevant Chapter:** [Audio and Video HTML](../AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1)

To use HTML5 audio or video, start by creating an ` ` or ` ` element, specifying a source URL for the media, and including the `controls` attribute.

```    ```

#### Add Optional Attributes

You can set additional attributes to tell Safari that the media should autoplay or loop, for example, or specify a video height and width. You set boolean attributes such as `controls` or `autoplay` by including or omitting them—no value is required.

```     ```

For more information, see [Working with Attributes](../AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6) .

#### Provide Alternate Sources

Not all browsers can play all media sources. Some browsers are able to play MPEG-4 or MP3 files, while others play only files compressed using codecs such as Ogg Vorbis. Desktop computers can typically play media using a wider assortment of compressors than mobile devices. Safari supports streaming delivery using HTTP Live Streaming, while some other browsers support only HTTP download. To provide the best experience for everyone, you can provide multiple versions of your media. List the sources in order of preference using separate ` ` tags. The browser iterates through the list and plays the first source that it can.

```                 ```

You don’t have to rely on the file extension and delivery scheme to tell Safari about the media file. The ` ` tag accepts attributes for MIME type and codecs as well. For details, see [Providing Multiple Sources](../AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW21) .

#### Fall Back in Good Order

Browsers that don’t support HTML5 ignore the ` ` and ` ` tags, and HTML5-savvy browsers ignore anything between the opening and closing tags except ` ` tags, so it’s easy to specify fallback behavior for older browsers. Just put the fallback HTML between the opening and closing ` ` or ` ` tags (after any ` ` tags).

```          <!-- fallback -->

Your browser does not support HTML5 video.

```

Your fallback can be an ` ` tag for a browser that needs a plug-in to play your media, a redirect to another page, or a simple error message telling the user what the problem is.

For more information, including examples of how to use a plug-in as a fallback, see [Specifying Fallback Behavior](../AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW13) .

### Take Control Using JavaScript

**Relevant Chapter:** [Controlling Media with JavaScript](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW1)

HTML5 media elements expose methods, properties, and events to JavaScript. There are methods for playing, pausing, and changing the media source URL dynamically. There are properties—such as duration, volume, and playback rate—that you can read or set (some properties are read-only). In addition, there are DOM events that notify you, for example, when a media element is able to play through, begins to play, is paused by the user, or completes.

For a complete list of methods, properties, and events that Safari supports, see *[HTMLMediaElement Class Reference](https://developer.apple.com/documentation/webkitjs/htmlmediaelement)*, *[HTMLVideoElement Class Reference](https://developer.apple.com/documentation/webkitjs/htmlvideoelement)*, and *[HTMLAudioElement Class Reference](https://developer.apple.com/documentation/webkitjs/htmlaudioelement)*.

You can use JavaScript with HTML5 media elements to:

- Create your own interactive audio or video controller—for an example, see [A Simple JavaScript Media Controller and Resizer](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW11). - Display a progress indicator that shows how much of the media has downloaded—for an example, see [Using DOM Events to Monitor Load Progress](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW4). - Load another audio or video when the current one finishes playing—for an example, see [Replacing a Media Source Sequentially](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW5). - Slave multiple audio and/or video elements to a master controller to ensure your media elements are always synchronized—for an example, see [Syncing Multiple Media Elements Together](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW25). - Test whether Safari can play the specified media type or file—for examples, see [Using JavaScript to Provide Fallback Content](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW3) and [Handling Playback Failure](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW12). - Enter full-screen video mode—for examples, see [Taking Video Full Screen](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13) and [Taking Your Custom Controls Full Screen](../ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW20).

### Set the Style with CSS3

**Relevant Chapter:** [Adding CSS Styles](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW1)

Because the ` ` and ` ` elements are standard HTML, you can customize them using CSS—set the background color, control opacity, add a reflection, move the element smoothly across the screen, or even rotate it in 3D. You can combine CSS with JavaScript to change media properties dynamically, in response to user input or movie events.

You can also change the CSS properties of other parts of your webpage in response to media events. For example, you could darken the background and reduce the opacity of the rest of the page—effectively “dimming the lights”—when a movie is playing, or highlight the title of the currently-playing song in a playlist.

For more information, see [Changing Styles in Response to Media Events](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW2) and [Adding CSS Styles to Video](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW3) .

For code examples, see [Example: Setting Opacity](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW6) , [Adding a Mask](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW7) , [Adding a Reflection](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW8) , and [Rotating Video in 3D](../AddingCSSStyles/AddingCSSStyles.html#//apple_ref/doc/uid/TP40009523-CH4-SW9) .

## Prerequisites

You should be familiar with HTML and JavaScript. Familiarity with CSS is helpful. To create image masks, you should be able to work with transparency (alpha channels).

## See Also

- *[Safari DOM Additions Reference](https://developer.apple.com/documentation/webkitjs)*—DOM events, JavaScript functions and properties added to Safari to support HTML5 audio and video, touch events, and CSS transforms and transitions. - *[Safari CSS Visual Effects Guide](../../../../InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html#//apple_ref/doc/uid/TP40008032)*—How to use CSS transitions and effects in Safari. - *[Safari CSS Reference](../../../../AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP40002050)*—Complete list of CSS properties, rules, and property functions supported in Safari, with syntax and usage. - *[Safari HTML Reference](../../../../AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/TP40002049)*—The HTML elements and attributes supported by different Safari and WebKit applications. - *[WebKit DOM Programming Topics](../../../../AppleApplications/Conceptual/SafariJSProgTopics/index.html#//apple_ref/doc/uid/TP40001483)*—How to get the most out of using DOM events in Safari. - *iOS Human Interface Guidelines*—User interface guidelines for designing webpages and web applications for Safari on iOS.

[Next](../AudioandVideoTagBasics/AudioandVideoTagBasics.html)

Copyright © 2012 Apple Inc. All Rights Reserved. [Terms of Use](http://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](http://www.apple.com/privacy/) | Updated: 2012-12-13