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

Uploaded 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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Demo video http://blogs.msdn.com/b/nigel/archive/2011/04/14/5-things-you-need-to-know-to-start-using-video-and-audio-today.aspx
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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. ! ! ** Chrome is removing support for H.264 * If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7
  • 3. You Need More Than One
  • 4. You Need Both Big & Small
  • 5. Unlikely To Change Anytime Soon
  • 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. Encoding Optimizations
  • 8. Offload Encoding to the Cloud
  • 9. HTTP 1.1-compatibleweb serverSeek AheadBit Rate Throttling
  • 10. Broadcast in HD Where Availableby Jo Christian Oterhals
  • 11. Video Corruption – Dropped Frames
  • 12. Are there encoding settings that wecan use to reduce corruption?
  • 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. Typical Group Of Pictures(GOP) structure
  • 15. Styling with Canvas & CSS
  • 16. Drawing with Canvas
  • 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. video { position: relative; border-radius: 200px 50px 200px 50px; box-shadow: #244766 10px 10px 10px; transform: rotate(5deg) translate(15px,10px);}
  • 19. Styling Custom Controls
  • 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. Custom Controls
  • 22. Going Full Screen
  • 23. Going Full Screen
  • 24. HTML5 Community Players
  • 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. A Selection of HTML5 Video Players Sublime Video – Player as a Service mediaelement.js LeanBack Player – Keyboard Support JW Player