5 things you need to know to start using video and audio today

<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

Typical Group Of Pictures

(GOP) structure

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