HTML5 Video Right Now

777 views
674 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
777
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Video Right Now

  1. 1. HTML5 Video Right Now New Ways to Add Video to Your Web Content Carlos Araya (caraya@westga.edu)
  2. 2. AgendaNew HTML5 Tags for Audio and VideoHow to use themVideo Encoding and ToolsAdavantages and Disadvantage of HTML5 Over FlashThe FutureQ &A
  3. 3. New HTML5 Tags<video></video>
  4. 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. 5. Some CharacteristicsMultiple Sources Accomodate Multiple Browsers and DevicesDoesn’t Require PluginWill Play in All Major Browsers and Devices No more workarounds
  6. 6. How to use the TagAssuming video comes to you as AVIEncode the video using Miro Video Converter First to MP4 Then to WebM Then to OGG
  7. 7. How to use the TagDemo Time Converting Video with Miro Video Converter
  8. 8. How to use the TagWrite the HTML5 tag Insert the video names into the tag
  9. 9. How to use the TagDanger Will Robbinson MIME Types need to be configure for the video formats
  10. 10. How it’ll look likeWorking Example
  11. 11. HTML5 Over FlashNo Plugins!Supports Multiple browsers without having additionalcodeIt also supports mobile devices (iOS Devices)Accessibility emerging as a concern (Web SRT)
  12. 12. Flash over HTML5Non browser specificRequires only one video (H264 or FLV)Flash will play on older browsers (IE6 and IE7)
  13. 13. So Which one is Better?It Depends On your audience On what browsers they useOn what you use to encode your mediaOn Resource Availability
  14. 14. Q &AQuestions?Comments?Cooking Recipes?
  15. 15. Thank YouCarlos Araya carlos.araya@gmail.com

×