1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2. Chapter 9 HTML 5 Video and Audio
Part 2
Fallback Strategies
and Creation
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. In this lecture, you will learn:
Several for HTML5 video and audio fallback strategies for browsers that do not support HTML5 vidoe and audio:
Links
Image
How to create HTML5 video and audio
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

4. Why Fallback Strategies?
Not all browsers and browser versions support HTML5 video and audio
Use fallback strategies to provide alternatives for those browsers
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. Basic Idea of Fallback Strategies
In <video> element, add extra HTML code, which is not HTML5 specific
This extra code tells the browser what to display
If the browser does not support HTML5 video and audio, it will:
ignore the <video> and <audio> tags
use that extra code intended for fallback
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

6. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Fallback Strategies
Use of links to download video
Use of a static image
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. Video Download Links as Fallback
Simply add links for users to download the video
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. Video Download Links as Fallback
<video controls preload="none" poster="demo-poster.png"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <p>Your browser does not support HTML5 video.</p> <p>Download Videos: <a href="demo.mp4">MP4</a> <a href="demo.webm">WEBM</a> <a href="demo.ogv">OGG</a> </p> </video>
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

9. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Image as Fallback
Simply use an image (often a representative frame of the video) in place of the video
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

10. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Add Image as Fallback
<video controls preload="none" poster="demo-poster.png"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm" /> <source src="demo.ogv" type="video/ogg" /> <img src "media/demo-poster.png" alt "browser does not support HTML5 video" /> <p>Your browser does not support HTML5 video.</p> <p>Download Videos: <a href="demo.mp4">MP4</a> <a href="demo.webm">WEBM</a> <a href="demo.ogv">OGG</a> </p> </video>
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. Creating HTML5 Video and Audio
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. Creating HTML5 Video and Audio
If your video/audio editor does not support exporting all or any of the HTML5 video/audio formats, you can:
Export your video/audio to a common format, e.g.
Video: QuickTime (.mov), Flash Video (.f4v)
Audio: WAV (.wav)
Convert your video/audio to HTML5 formats
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. Free Tools for Converting Video/Audio to HTML5 Video/Audio Formats
Web Site
Supported OS
Output
MediaCoder
Windows, Mac OS, Linux
Video: MP4, WebM, Ogg
Audio: MP3, Ogg, AAC
HandBrake
Video: MP4
Firefogg
(As a Firefox 6+ plug-in)
Video: WebM, Ogg
VLC Media Player
Audio: MP3, AAC, Ogg
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. Screenshot of Firefogg with Settings for WebM Export
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. Screenshot of Handbrake v.0.9.5 with Settings for MP4 Export
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
MediaCoder and VLC
See the learning aids "Using MediaCoder" and "Using VLC" on the book's companion Web site
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Note to instructor:
Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

18. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Name two fallback strategies for HTML5 video and audio to provide alternatives for browsers that do not support HTML5 video and audio.
Include links for video download
Use an image
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

19. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
If your video/audio editor does not support exporting all or any of the HTML5 video/audio formats, how do you create all the HTML5 video/audio formats for your video/audio?
1. Export your video/audio into a common format
2. Convert the exported video/audio into HTML5 formats using the video/audio conversion tools
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.