HTML5 Video Right NowNew Ways to Add Video to Your Web Content

Carlos Araya (caraya@westga.edu)

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?

Thank You

Carlos Araya

carlos.araya@gmail.com