HTML5 Video Right Now
-
Upload
carlos-araya -
Category
Technology
-
view
504 -
download
1
Transcript of HTML5 Video Right Now
![Page 2: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/3.jpg)
New HTML5 Tags
<video></video>
![Page 4: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/4.jpg)
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>
![Page 5: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/5.jpg)
Some Characteristics
Multiple Sources
Accomodate Multiple Browsers and Devices
Doesn’t Require Plugin
Will Play in All Major Browsers and Devices
No more workarounds
![Page 6: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/7.jpg)
How to use the Tag
Demo Time
Converting Video with Miro Video Converter
![Page 8: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/8.jpg)
How to use the Tag
Write the HTML5 tag
Insert the video names into the tag
![Page 9: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/9.jpg)
How to use the Tag
Danger Will Robbinson
MIME Types need to be configure for the video formats
![Page 10: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/10.jpg)
How it’ll look like
Working Example
![Page 11: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/11.jpg)
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)
![Page 12: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/12.jpg)
Flash over HTML5
Non browser specific
Requires only one video (H264 or FLV)
Flash will play on older browsers (IE6 and IE7)
![Page 13: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 Video Right Now](https://reader036.fdocuments.us/reader036/viewer/2022062405/5557a5aad8b42a696c8b474d/html5/thumbnails/14.jpg)
Q & A
Questions?
Comments?
Cooking Recipes?