html5 video right now
TRANSCRIPT
HTML5 Video Right NowNew Ways to Add Video to Your Web Content
Carlos Araya ([email protected])
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
New HTML5 Tags
<video></video>
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>
Some Characteristics
Multiple Sources
Accomodate Multiple Browsers and Devices
Doesn’t Require Plugin
Will Play in All Major Browsers and Devices
No more workarounds
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
How to use the Tag
Demo Time
Converting Video with Miro Video Converter
How to use the Tag
Write the HTML5 tag
Insert the video names into the tag
How to use the Tag
Danger Will Robbinson
MIME Types need to be configure for the video formats
How it’ll look like
Working Example
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)
Flash over HTML5
Non browser specific
Requires only one video (H264 or FLV)
Flash will play on older browsers (IE6 and IE7)
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
Q & A
Questions?
Comments?
Cooking Recipes?