Upload
nigel-parker
View
6.146
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
<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>
* If WebM is installed !
*
! *
!
Chrome is removing support for H.264
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 that
do 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
Seek Ahead Bit Rate Throttling
HTTP 1.1-compatible web server
by Jo Christian Oterhals
Broadcast in HD Where Available
Video Corruption – Dropped Frames
Are there encoding settings that we can use to reduce corruption?
Baseline *
Larger file
Less CPU to Decode
Quick to Encode
Main
High
Smaller File
More CPU to Decode
Longer to Encode
baseline profile must be main profile compatible to support DirectX Video Acceleration
Styling with Canvas & CSS
Drawing with Canvas
Drawing with CanvasHide the Video display a Canvas
30 times per second draw the cropped video onto 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 processFrame() {
// manipulate image here cropping and scaling as needed
draw.drawImage(video, cX, cY, w, h, 0, 0, w, h);
}
function init() {
video = document.getElementById('sourcevid');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33); // 30 fps
}
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 Media Element Events
play(), pause(), load(), canPlayType()
video.addEventListener('play',
function() {
play.title = 'pause';
play.innerHTML = 'ǁ';
}, false);
Custom Controls
Going Full Screen
Going Full Screen
HTML5 Community Players
A Comparison of HTML5 Video PlayersName Licence JavaScript Library
Flash
fallback iOS Full screen Keyboard Subtitles easy to integrate easy to theme
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
Everybody CC – yes yes yes* – – yes –
Open Video
Player custom jQuery yes yes browser window – – – maybe
HTML5 Video
Player ? MooTools – yes – – – yes yes
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
A Selection of HTML5 Video PlayersSublime Video – Player as a Service
JW Player
mediaelement.js
LeanBack Player – Keyboard Support