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

4. <audio <video
src= 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 video
preload= preload= (none, metadata, auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play, pause, scrub bar)
> >
… …
</audio> </video>

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

9. You Need More Than One

10. You Need Both Big & Small

11. Unlikely To Change Anytime Soon

12. <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 that
do not support the <video> element
</video>
Due to bug in iPhone/iPad iOS 3.x, mp4 should always be first

13. Encoding Optimizations

14. Offload Encoding to the Cloud

15. HTTP 1.1-compatible
web server
Seek Ahead
Bit Rate Throttling

17. Broadcast in HD Where Available
by Jo Christian Oterhals

18. Video Corruption – Dropped Frames

19. Are there encoding settings that we
can use to reduce corruption?

20. Baseline * High
Larger file Main Smaller File
Less CPU to Decode More CPU to Decode
Quick to Encode Longer to Encode
baseline profile must be main profile compatible to support DirectX Video Acceleration

21. Typical Group Of Pictures
(GOP) structure

22. Styling with Canvas & CSS

23. Drawing with Canvas

24. 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 canvas
function processFrame() {
// manipulate image here cropping and scaling as needed
draw.drawImage(video, cX, cY, w, h, 0, 0, w, h);
}

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

26. Styling Custom Controls

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

29. Custom Controls

30. Going Full Screen

31. Going Full Screen

32. HTML5 Community Players

33. A Comparison of HTML5 Video Players
Flash
Name Licence JavaScript Library iOS Full screen Keyboard Subtitles easy to integrate easy to theme
fallback
Projekktor GPL 3 jQuery yes yes noish – – yes yes
FlareVideo MIT jQuery yes – yes* play/ pause *** – yes yes
Video JS GPL 3 – yes yes yes – yes yes yes
JW Player custom – yes yes yes – – yes yes
Kaltura / Adobe GPL 2 jQuery yes yes browser window – – yes yes
html5media GPL 3 – yes yes yes* – – yes –
jMediaelement MIT jQuery yes yes with plugin yes yes yes yes
OIPlayer GPL 3 jQuery yes yes browser window – – noish yes
HVideo custom jQuery – yes yes* play/ pause *** – noish yes
jQuery Video ? jQuery – – – – – yes –
Video for
CC – yes yes yes* – – yes –
Everybody
Open Video
custom jQuery yes yes browser window – – – maybe
Player
HTML5 Video
? MooTools – yes – – – yes yes
Player
mediaelement.js GPLv2 MIT jQuery yes yes yes – yes yes yes
SublimeVideo ** paid service yes yes cmd/ctrl + click – – hell yes –
Uppod.HTML5 ? – includable yes browser window pause *** – yes no
LeanBack own – yes yes yes yes yes yes yes
Mooplay GPL 3 MooTools no yes browser window – yes noish yes
jPlayer MIT and GPL jQuery yes yes - – - yes yes
OSM Player GPL 3 jQuery yes triple click to play browser window – – hell no –
#videosws

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