If you embed audio or video media in your website, you should read this document.
HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers. HTML5 enables audio and video to play natively in the browser without requiring proprietary plug-ins. With HTML5, you can add media to a website with just a few lines of code. You can also create customized media controllers for rich interactivity using standard web technologies.
The HTML5 <audio> and <video> tags make adding media to a website simple. Just use the src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
Example:
<video src="http://Myserver.com/Path/Mymovie.mp4" controls> </video>
You can set additional attributes, such as autoplay or loop, optionally supply a height and width, or simply let the browser allocate the space it needs based on the media. In any case, it generally requires only a single line of code.
Safari on iPhone OS 3.0 and later (including iPad) and Safari on the desktop 3.1 and later (for Mac OS X and Windows) support the <video> and <audio> elements. Not all browsers support these tags yet, and not all types of encoded media play back in all browsers. However, there are simple ways to provide fallbacks if the browser doesn't yet support the <video> or <audio> tag, and simple methods to provide alternate media sources if the browser supports the tags but can't play a particular media file.
Because the <audio> and <video> elements are standard HTML they integrate automatically with CSS and JavaScript. You can combine CSS properties, JavaScript functions, and DOM events to create sophisticated movie controllers customized to your needs and aesthetics, yet entirely based on W3C standards and independent of third-party plug-in APIs.
Standard JavaScript methods allow you to play, pause, jump to a given point, or specify a new source, and DOM events notify you when the media loads, plays, pauses, or completes. You can apply CSS properties and use DOM events to modify <video> elements just as you would any other element—change the opacity, overlay text, move the element smoothly across the page, add a reflection, rotate the element in 3D, and so on. This document includes several examples.
Important: This is a preliminary document. Although it has been reviewed for technical accuracy, it is not final. Apple is supplying this information to help you adopt the technologies and programming interfaces described herein. This information is subject to change, and software implemented according to this document should be vetted against final documentation. For information about updates to this and other developer documentation, you can check the ADC Reference Library Revision List. To receive notification of documentation updates, you can sign up for a free Apple Developer Connection Online membership and receive the bi-weekly ADC News e-mail newsletter. See http://developer.apple.com/products/for more details about ADC membership.)
This document shows you how to use the HTML5 <audio> and <video> tags in the following ways:
“Audio and Video Tag HTML”—How to use the <audio> and <video> tags, taking device-specific considerations into account; how to specify multiple sources; and how to provide fallback content for browsers that don’t support the <audio> and <video> elements.
“Controlling Media With JavaScript”—How to control media using JavaScript and DOM events.
“Adding CSS Styles”—How to enhance media presentation using CSS.
Safari DOM Additions Reference—DOM events added to Safari to support HTML5 audio and video, touch events and gestures, and CSS transforms and transitions.
Safari CSS Visual Effects Guide—How to use CSS transitions and effects in Safari.
Safari CSS Reference—Complete list of CSS properties, rules, and property functions supported in Safari, with syntax and usage.
Safari HTML Reference—The HTML elements and attributes supported by different Safari and WebKit applications.
WebKit DOM Programming Topics—How to get the most out of using DOM events in Safari.
Safari Web Content Guide—How to create web content that works well in Safari on the desktop and Safari on iPhone OS.
iPhone Human Interface Guidelines for Web Applications—User interface guidelines for designing webpages and web applications for Safari on iPhone OS.
Last updated: 2010-03-18