1. HTML5 Video Right Now
New Ways to Add Video to Your Web Content
Carlos Araya (caraya@westga.edu)

2. Agenda
New HTML5 Tags for Audio and Video
How to use them
Video Encoding and Tools
Adavantages and Disadvantage of HTML5 Over Flash
The Future
Q &A

3. New HTML5 Tags
<video></video>

4. New HTML5 Tags
• <video id="movie" width="320" height="240" controls>
• <source src="resources/Ironman.mp4" />
• <source src="resources/Ironman.webm" type='video/webm; codecs="vp8, vorbis"' />
• <source src="resources/Ironman.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
•
data="flowplayer/flowplayer-3.2.5.swf">
• <param name="movie" value="flowplayer/flowplayer-3.2.5.swf" />
• <param name="allowfullscreen" value="true" />
•<param name="flashvars" value='config={"clip": {"url": "resources/Ironman.mp4",
"autoPlay":false, "autoBuffering":true}}' />
• <p>Download video as <a href="resources/Ironman.mp4">MP4</a>, <a
href="resources/Ironman.webm">WebM</a> or <a
href="resources/Ironman.ogv">Ogg</a>.</p>
• </object>
• </video>

5. Some Characteristics
Multiple Sources
Accomodate Multiple Browsers and Devices
Doesn’t Require Plugin
Will Play in All Major Browsers and Devices
No more workarounds

6. How to use the Tag
Assuming video comes to you as AVI
Encode the video using Miro Video Converter
First to MP4
Then to WebM
Then to OGG

7. How to use the Tag
Demo Time
Converting Video with Miro Video Converter

8. How to use the Tag
Write the HTML5 tag
Insert the video names into the tag

9. How to use the Tag
Danger Will Robbinson
MIME Types need to be configure for the video
formats

10. How it’ll look like
Working Example

11. HTML5 Over Flash
No Plugins!
Supports Multiple browsers without having additional
code
It also supports mobile devices (iOS Devices)
Accessibility emerging as a concern (Web SRT)

12. Flash over HTML5
Non browser specific
Requires only one video (H264 or FLV)
Flash will play on older browsers (IE6 and IE7)

13. So Which one is Better?
It Depends
On your audience
On what browsers they use
On what you use to encode your media
On Resource Availability

14. Q &A
Questions?
Comments?
Cooking Recipes?

15. Thank You
Carlos Araya
carlos.araya@gmail.com