HTML5 Video for WordPress

1,134 views

Published on

A background on HTML5 video and how it can be used in WordPress today. Talk given in April 2011 at WordCamp Developers, Vancouver, BC.

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

  • Be the first to like this

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
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
  • HTML5 Video for WordPress

    1. 1. HTML5 Video for WordPress WordCamp Developers 2011-05-05 Vancouver, BC #WCDev #html5videoSteve Heffernan, VideoJS & Zencoder
    2. 2. ~2000 ~2008 ~2015
    3. 3. <video src="video.webm" controls></ video>
    4. 4. <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>
    5. 5. http://blog.mefeedia.com/html5-feb-2011
    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. OPEN CLOSED
    13. 13. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
    14. 14. MP4H.264AAC
    15. 15. OGVTHEORAVORBIS
    16. 16. WEBM VP8VORBIS
    17. 17. Three Formats3+ 9+ 9+4+ 6+ 10.6+3.5+ 3+ 10.5+
    18. 18. Two Formats3+ 9+ 9+4+ 6+ 10.6+
    19. 19. One Format3+ 9+ 9+
    20. 20. Handbrake.fr
    21. 21. Firefogg.org
    22. 22. 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
    23. 23. VideoJS.com
    24. 24. VideoJS WordPress Plugin
    25. 25. Degradable HTML5 audio and video
    26. 26. VideoJS Pro
    27. 27. [video mp4="myVideo.mp4"]
    28. 28. Video for Everybody By Kroc Camen
    29. 29. Dive into HTML5 By Mark Pilgrim
    30. 30. HTML5 Video and Audio in Depth http://videojs.com/lynda
    31. 31. HTML5 Video for WordPress slideshare.net/steveheffernan @videojs #WCDev #html5videoSteve Heffernan, VideoJS & Zencoder

    ×