HTML5 Video:
A Primer

Wes Bos
wesbos.com
@wesbos

February 15, 2012

Hey there, I'm Wes Bos

Independent Web UI Designer / Web Developer

I design and build the front end of applications and websites.

Huge JavaScript / CSS3 / HTML5 Fan.

I hang out on Twitter @wesbos

This Talk...

Will review the basics of HTML5 Video, it's API and then move into video manipulation.

Is a mini version of my #SpotlightJS talk on March 24th!

The Basics

HTML5 video is a new element used to embed video into your site that you use along with the rest of your HTML tags.

It plays nice and interacts with CSS and other HTML5 features such as canvas.

Your browser ships basic video controls but we can use JavaScript to control the HTML5 video player.

Support or UGH IE

Support for HTML5 video is fantastic!

Chrome 3+, FF 3.5+, Opera 10.5+, Safari 3.1+, IE9+

Most mobile phones and tablets made in the past 3 years support HTML5 video.

In other words, all these browsers have supported it for a long time.

The only browsers that don't support HTML5 Video are IE7 and 8 where we would reqire a flash fallback.

The Code

<video controls>
	<source src="Chrome_ImF.mp4" type="video/mp4;">
	<source src="Chrome_ImF.webm" type="video/webm;">		        
	<source src="Chrome_ImF.ogv" type="video/ogg;">
    <p>Your browser sucks, insert a flashfallback here.</p>
</video>

The browser vendors haven't agreed on a codec so we have to serve up three :(

Chrome, Opera and FF4+ = .webm
IE = .MP4 (and .webm if installed)
FF 3.5,36 = .ogg
safari/ios =.MP4

The order above is important for ios compatability.

Miro Video Converter is your friend!

Notable Attributes

The video element currently has 12 attributes and is constantly in flux as the spec is still changing.

autoplay - autplays the video (duh). Note: doesn't work on ios

preload - Tells the browser to preload nothing, the metadata(length etc..) or the entire video

controls - Set to false to hide the browsers native controls

poster - placeholder image to be displayed while the video loads.

Enough of the boring stuff, lets see some JS!

First, select your video

var vid = document.querySelector('#myVid');

Then use the methods to control it: play, pause, skip ahead, play, volume up.

vid.play(); vid.pause(); vid.currentTime+=10; vid.volume+=0.1

You can control the playback rate, volume and current time which is enough to make your own video player UI

You also have access to all the data/properties of the video element.

vid.duration; vid.currentTime;

Events

Like any element, you can also subscribe to events. Thre are a number that are specific of HTML5 video/audio

These are handy when you are building an application that works with video

vid.addEventListener('seeking', function() {
	console.log("a scrub is a guy who thinks he's fly");
}); 
vid.addEventListener('seeked', function(e) {
	ga(e.type,this.currentTime); // send seek data to analytics
});

An awesome reference to all methods, events and properties

http://www.w3.org/2010/05/video/mediaevents.html

HTML5 Video Manipulation

HTML5 video plays nice with Canvas. We can write our video frames to the canvas and in the process of doing that, manipulate the pixels in any way we please!

Adding in a step and playing with the canvas pixels

Note: In this example, because the canvas is being written to by a video, the originating video must be local other wise:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

Using WebRTC to get native webcam access!


Start Hipster Blur Green HTML5 Glasses

Cool!

Questions?

Ideas?

Thanks, lets build something awesome!

Oh, free shit!

Two tickets to the FITC #SpotlightJS

A few HTML5 Canada Shirts

Lots of stickers!

The first person to tweets @wesbos + the correct code snippet wins