Safari HTML5 Audio and
Video Guide
Contents
About HTML5 Audio and Video 6
At a Glance 7
Create the HTML5 Media Elements 7
Take Control Using JavaScript 9
Set the Style with CSS3 10
Prerequisites 10
See Also 10
Audio and Video HTML 11
Basic Syntax 11
Working with Attributes 13
Resizing the Video 13
Enabling the Controller 13
Preloading 13
Showing a Poster 14
Providing Multiple Sources 14
Specifying Multiple Media Formats 15
Specifying Multiple Delivery Schemes 16
Multiple Data Rate Sources 17
Specifying Fallback Behavior 17
Fall Back to the QuickTime Plug-in 18
Fall Back to Any Plug-In 19
iOS-Specific Considerations 21
Optimization for Small Screens 21
User Control of Downloads Over Cellular Networks 21
Default Height and Width on iOS 22
iPhone Video Placeholder 22
Media Playback Controls 22
Supported Media 23
Multiple Simultaneous Audio or Video Streams 23
Volume Control in JavaScript 23
Playback Rate in JavaScript 23
Loop Attribute 24
2012-12-13 | Copyright © 2012 Apple Inc. All Rights Reserved.
2
Playing Sounds with the Web Audio API 25
Setting Up the Audio Context 25
Fetching and Buffering Sounds 26
Synthesizing Sounds 27
Playing Sounds 28
Routing and Mixing Sounds 29
Exploring More Possibilities 30
Controlling Media with JavaScript 37
A Simple JavaScript Media Controller and Resizer 37
Using DOM Events to Monitor Load Progress 39
Replacing a Media Source Sequentially 41
Syncing Multiple Media Elements Together 42
Using JavaScript to Provide Fallback Content 43
Handling Playback Failure 45
Resizing Movies to Native Size 47
Taking Video Full Screen 48
Taking Your Custom Controls Full Screen 49
Full-Screen Event and Properties 50
Resizing Enclosed Video 50
Full-screen Video with Custom Controls Example 51
Adding CSS Styles 53
Changing Styles in Response to Media Events 54
Adding CSS Styles to Video 57
Example: Setting Opacity 58
Using WebKit Properties 58
Document Revision History 71
2012-12-13 | Copyright © 2012 Apple Inc. All Rights Reserved.
3
Contents
Figures, Tables, and Listings
Audio and Video HTML 11
Table 1-1 Attributes of the <audio> and <video> elements 11
Listing 1-1 Creating a simple movie player 12
Listing 1-2 Showing a poster 14
Listing 1-3 Specifying multiple audio sources 15
Listing 1-4 Specifying multiple delivery schemes 16
Listing 1-5 Adding simple fallback behavior 17
Listing 1-6 Falling back to the QuickTime plug-in 18
Listing 1-7 Falling back to a plug-in for IE 19
iOS-Specific Considerations 21
Figure 2-1 The iPhone video placeholder 22
Listing 2-1 Backward-compatible looping audio 24
Playing Sounds with the Web Audio API 25
Figure 3-1 A simple synthesizer and audio spectrum visualizer 31
Table 3-1 Types of periodic waveforms 27
Listing 3-1 A simple synthesizer and audio spectrum visualizer 31
Controlling Media with JavaScript 37
Listing 4-1 Adding simple JavaScript controls 38
Listing 4-2 Installing DOM event listeners 39
Listing 4-3 Summing a TimeRanges object 41
Listing 4-4 Replacing media sequentially 41
Listing 4-5 Testing for playability using JavaScript 44
Listing 4-6 Testing for failure using JavaScript 45
Listing 4-7 Resizing movies programmatically 47
Listing 4-8 Using webkitEnterFullscreen() 48
Listing 4-9 Full-screen video with custom controls 51
Adding CSS Styles 53
Figure 5-1 Page with movie paused 54
Figure 5-2 Page with movie playing 55
Figure 5-3 CSS filters on a video 59
2012-12-13 | Copyright © 2012 Apple Inc. All Rights Reserved.
4
Figure 5-4 Reflection with mask image 65
Figure 5-5 Mask image 65
Figure 5-6 Reflection with gradient mask and color stop 67
Figure 5-7 Video in mid-rotation 70
Listing 5-1 Dim the lights 55
Listing 5-2 Applying CSS filters to HTML elements 60
Listing 5-3 3D rotation with perspective 68
2012-12-13 | Copyright © 2012 Apple Inc. All Rights Reserved.
5
Figures, Tables, and Listings
