Your SlideShare is downloading. ×
HTML5 Video for WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Video for WordPress

866
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.

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
866
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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