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

! ! ** Chrome is removing support for H.264 * If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7

You Need More Than One

You Need Both Big & Small

Unlikely To Change Anytime Soon

<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

Encoding Optimizations

Offload Encoding to the Cloud

HTTP 1.1-compatibleweb serverSeek AheadBit Rate Throttling

Broadcast in HD Where Availableby Jo Christian Oterhals

Video Corruption – Dropped Frames

Are there encoding settings that wecan use to reduce corruption?

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

Typical Group Of Pictures(GOP) structure

Styling with Canvas & CSS

Drawing with Canvas

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);}

video { position: relative; border-radius: 200px 50px 200px 50px; box-shadow: #244766 10px 10px 10px; transform: rotate(5deg) translate(15px,10px);}

Styling Custom Controls

Custom Skinnable Players Media Element Methods play(), pause(), load(), canPlayType() Media Element Events video.addEventListener(play, function() { play.title = pause; play.innerHTML = ǁ; }, false);

Custom Controls

Going Full Screen

HTML5 Community Players

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

A Selection of HTML5 Video Players Sublime Video – Player as a Service mediaelement.js LeanBack Player – Keyboard Support JW Player

http://blogs.msdn.com	2828
http://www.clipboard.com	14
http://www.newsblur.com	5
http://storify.com	4
http://stage.clpbrd.com	4
http://www.linkedin.com	2
http://translate.googleusercontent.com	2
https://twitter.com	2
http://www.clipboard.com:80	1
http://www.hanrss.com	1
http://www.slideshare.net	1
http://stage.clpbrd.com:80	1

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

by Nigel Parker

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 2,865

Statistics

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