Upgrade to                  Video               WEB 2.0 EXPO       2011-03-31 San Francisco, CA             #html5video #w...
Video for Everybody    By Kroc Camen
Dive into HTML5  By Mark Pilgrim
http://blog.mefeedia.com/html5-feb-2011
~2000   ~2008   ~2015
<video src="video.webm" controls></               video>
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls>    <source src="video.mp4" type="video/mp4">    <source src="video.webm" type="video/webm">    <source sr...
Embed Builder
CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
MP4H.264AAC
OGVTHEORAVORBIS
WEBM VP8VORBIS
Three Formats3+     9+   9+4+     6+ 10.6+3.5+   3+ 10.5+
Two Formats3+   9+   9+4+   6+ 10.6+
One Format3+   9+   9+
Handbrake.fr
Firefogg.org
MiroVideoConverter.com
FFmpeg.org
Zencoder.com
Browser & Device Issues  •iPad Poster Attribute Bug  •iPad JS in Head / iPhone JS not in Head  •Android Type Attribute Bug...
Demo
VideoJS - 3 Pieces       •HTML Embed Code         (Video for Everybody)       •Javascript Library (video.js)       •CSS Sk...
JavaScript Library       •Custom Controls       •Added Features       •Browser & Device Fixes
Custom Controls
JavaScript LibraryADDED FEATURES         •Volume Control         •Full-window Mode         •Subtitles
CSS Skin
CSS Skin
CSS Skin
CSS Skin
CSS Skin
Resources      Video for Everybody        camendesign.com      Dive into HTML5        diveintohtml5.com      VideoJS Blog ...
Upgrade to                 Video             videojs.com              @videojs
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upgrade to HTML5 Video
Upcoming SlideShare
Loading in …5
×

Upgrade to HTML5 Video

860 views
791 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
860
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Upgrade to HTML5 Video

    1. 1. Upgrade to Video WEB 2.0 EXPO 2011-03-31 San Francisco, CA #html5video #w2e Steve Heffernan, VideoJS & Zencoder videojs.com
    2. 2. Video for Everybody By Kroc Camen
    3. 3. Dive into HTML5 By Mark Pilgrim
    4. 4. http://blog.mefeedia.com/html5-feb-2011
    5. 5. ~2000 ~2008 ~2015
    6. 6. <video src="video.webm" controls></ video>
    7. 7. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
    8. 8. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
    9. 9. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> </object></video>
    10. 10. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash"data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> <img src="image.jpg" alt="title" title="Can’t play video" /> </object></video><p> <strong>Download Video:</strong> <a href="video.mp4">MP4</a> <a href="video.ogv">Ogg</a></p>
    11. 11. Embed Builder
    12. 12. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
    13. 13. MP4H.264AAC
    14. 14. OGVTHEORAVORBIS
    15. 15. WEBM VP8VORBIS
    16. 16. Three Formats3+ 9+ 9+4+ 6+ 10.6+3.5+ 3+ 10.5+
    17. 17. Two Formats3+ 9+ 9+4+ 6+ 10.6+
    18. 18. One Format3+ 9+ 9+
    19. 19. Handbrake.fr
    20. 20. Firefogg.org
    21. 21. MiroVideoConverter.com
    22. 22. FFmpeg.org
    23. 23. Zencoder.com
    24. 24. Browser & Device Issues •iPad Poster Attribute Bug •iPad JS in Head / iPhone JS not in Head •Android Type Attribute Bug •Autobuffer => Preload •Missing Poster in Some Safari Versions •Cross-browser Load Progress Tracking •HTML5 Browsers Do Not Fallback on Incompatible Sources
    25. 25. Demo
    26. 26. VideoJS - 3 Pieces •HTML Embed Code (Video for Everybody) •Javascript Library (video.js) •CSS Skin (video-js.css)
    27. 27. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
    28. 28. Custom Controls
    29. 29. JavaScript LibraryADDED FEATURES •Volume Control •Full-window Mode •Subtitles
    30. 30. CSS Skin
    31. 31. CSS Skin
    32. 32. CSS Skin
    33. 33. CSS Skin
    34. 34. CSS Skin
    35. 35. Resources Video for Everybody camendesign.com Dive into HTML5 diveintohtml5.com VideoJS Blog videojs.com/blog VideoJS Support help.videojs.com
    36. 36. Upgrade to Video videojs.com @videojs

    ×