Lynda.COM HTML5: Video and Audio in Depth

Author:
Steve Heffernan

Duration:
02h 07m

Released on:
6/2/2011

Exercise files:
Yes


In HTML5: Video and Audio in Depth, author Steve Heffernan contextualizes the state of HTML5 audio and video and shows how to embed media into a web page using HTML5. The course sheds light on configuring the new HTML5 audio and video tags, ensuring backwards compatibility by setting alternative playback methods, encoding the needed file formats, and building custom controls with JavaScript. Also included are tutorials on troubleshooting known issues and reviewing real-world examples of HTML5 audio and video. Exercise files accompany the course.
Topics include:

    Understanding the differences in media formats
    Preloading, autoplaying, and looping in HTML5
    Setting a video's width and height attributes
    Displaying subtitles and captions
    Generating embed code with an embed code builder
    Encoding files using HandBrake, Firefogg, and VLC
    Creating a load progress bar
    Recognizing Android and iOS issues





Introduction
Welcome           00m 42s
Using the exercise files           00m 42s

1. Video and Audio Basics
Understanding HTML5 video and audio           04m 46s
The state of HTML5 video and audio           04m 29s
Understanding the format war           03m 53s
Configuring your server to deliver HTML5 media formats           02m 10s

2. Embedding Video and Audio
Using the video and audio tags           05m 34s
Using multiple sources for browser compatibility           05m 53s
Preloading           04m 16s
Autoplaying           02m 02s
Looping           05m 11s
Setting a poster frame           03m 43s
Setting the video width and height           03m 40s
Displaying subtitles and captions           02m 17s

3. Falling Back to Alternative Playback Methods
Falling back to Flash           04m 04s
Falling back to download links           06m 21s
Using an embed code builder           02m 15s

4. Encoding Audio and Video Files
Understanding HTML5 video formats           05m 10s
Understanding HTML5 audio formats           02m 57s
Encoding MP4/H.264 video with HandBrake           03m 13s
Encoding Ogg, Theora, and WebM with Firefogg           03m 18s
Encoding audio formats with VLC           05m 54s
Automating video and audio encoding           01m 45s

5. Building Your Own Controls with JavaScript
Setting up the JavaScript           04m 39s
Creating Play and Pause buttons           07m 52s
Creating a Play Progress bar           05m 49s
Creating a Load Progress bar           09m 29s
Creating a Current Time and Duration display           07m 10s

6. Known Issues and Workarounds
Overview of known issues           00m 35s
Autobuffer or preload?           00m 56s
Load progress in Firefox 3.6           00m 41s
Android 2.0 issues           01m 05s
iOS 3 issues           01m 20s

7. Audio and Video in the Wild
Flight of the Navigator           00m 50s
ZEN Audio Player by simurai           00m 34s
The Wilderness Downtown by Google and Arcade Fire           00m 44s

Conclusion
Further exploration           01m 40s