5 Things You Need to Know to Start Using Video and Audio Today

7,045 views
7,025 views

Published on

I gave this presentation at MIX11 in Las Vegas 13th April 2010. The demos and video of the session are at http://video.stickon.me

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
7,045
On SlideShare
0
From Embeds
0
Number of Embeds
4,707
Actions
Shares
0
Downloads
110
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

5 Things You Need to Know to Start Using Video and Audio Today

  1. 1. <audio <videosrc= src= The url to the audio or video width= The width of the video element height= The height of the video element poster= The url to the thumbnail of the videopreload= preload= (none, metadata, auto) Start downloadingautoplay autoplay Audio or video should play immediatelyloop loop Audio or video should return to start and playcontrols controls Will show controls (play, pause, scrub bar)> >… …</audio> </video>
  2. 2. ! ! ** Chrome is removing support for H.264 * If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7
  3. 3. You Need More Than One
  4. 4. You Need Both Big & Small
  5. 5. Unlikely To Change Anytime Soon
  6. 6. <video controls><source src=hi-res.mp4 type=‘video/mp4; codecs="avc1.64001E, mp4a.40.2"’ media="(min-device-width: 800px)"><source src=lo-res.mp4 type=‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"’><source src=hi-res.ogv type=‘video/ogg; codecs="theora, vorbis"’ media="(min-device-width: 800px)"><source src=lo-res.ogv type=‘video/ogg; codecs="theora, vorbis"’>fall-back content only displayed by browsers thatdo not support the <video> element</video> Due to bug in iPhone/iPad iOS 3.x, mp4 should always be first
  7. 7. Encoding Optimizations
  8. 8. Offload Encoding to the Cloud
  9. 9. HTTP 1.1-compatibleweb serverSeek AheadBit Rate Throttling
  10. 10. Broadcast in HD Where Availableby Jo Christian Oterhals
  11. 11. Video Corruption – Dropped Frames
  12. 12. Are there encoding settings that wecan use to reduce corruption?
  13. 13. Baseline * High Larger file Main Smaller File Less CPU to Decode More CPU to Decode Quick to Encode Longer to Encodebaseline profile must be main profile compatible to support DirectX Video Acceleration
  14. 14. Typical Group Of Pictures(GOP) structure
  15. 15. Styling with Canvas & CSS
  16. 16. Drawing with Canvas
  17. 17. Drawing with Canvas Hide the Video display a Canvas <div style="display:none"> <video id="sourcevid" autoplay preload="auto" width="1920" onloadedmetadata="init()"> </div> <canvas id="output" width="960" height="540"></canvas>function init() { video = document.getElementById(sourcevid); var outputcanvas = document.getElementById(output); draw = outputcanvas.getContext(2d); setInterval("processFrame()", 33); // 30 fps} 30 times per second draw the cropped video onto canvasfunction processFrame() { // manipulate image here cropping and scaling as needed draw.drawImage(video, cX, cY, w, h, 0, 0, w, h);}
  18. 18. video { position: relative; border-radius: 200px 50px 200px 50px; box-shadow: #244766 10px 10px 10px; transform: rotate(5deg) translate(15px,10px);}
  19. 19. Styling Custom Controls
  20. 20. Custom Skinnable Players Media Element Methods play(), pause(), load(), canPlayType() Media Element Events video.addEventListener(play, function() { play.title = pause; play.innerHTML = ǁ; }, false);
  21. 21. Custom Controls
  22. 22. Going Full Screen
  23. 23. Going Full Screen
  24. 24. HTML5 Community Players
  25. 25. A Comparison of HTML5 Video Players FlashName Licence JavaScript Library iOS Full screen Keyboard Subtitles easy to integrate easy to theme fallbackProjekktor GPL 3 jQuery yes yes noish – – yes yesFlareVideo MIT jQuery yes – yes* play/ pause *** – yes yesVideo JS GPL 3 – yes yes yes – yes yes yesJW Player custom – yes yes yes – – yes yesKaltura / Adobe GPL 2 jQuery yes yes browser window – – yes yeshtml5media GPL 3 – yes yes yes* – – yes –jMediaelement MIT jQuery yes yes with plugin yes yes yes yesOIPlayer GPL 3 jQuery yes yes browser window – – noish yesHVideo custom jQuery – yes yes* play/ pause *** – noish yesjQuery Video ? jQuery – – – – – yes –Video for CC – yes yes yes* – – yes –EverybodyOpen Video custom jQuery yes yes browser window – – – maybePlayerHTML5 Video ? MooTools – yes – – – yes yesPlayermediaelement.js GPLv2 MIT jQuery yes yes yes – yes yes yesSublimeVideo ** paid service yes yes cmd/ctrl + click – – hell yes –Uppod.HTML5 ? – includable yes browser window pause *** – yes noLeanBack own – yes yes yes yes yes yes yesMooplay GPL 3 MooTools no yes browser window – yes noish yesjPlayer MIT and GPL jQuery yes yes - – - yes yesOSM Player GPL 3 jQuery yes triple click to play browser window – – hell no – #videosws
  26. 26. A Selection of HTML5 Video Players Sublime Video – Player as a Service mediaelement.js LeanBack Player – Keyboard Support JW Player

×