12 html5 audio and video

HTML5 Audio and Video Playing movies in your websites without Flash or Silverlight

YouTube has been doing video for years

� How do they do it? � What's wrong with their solution?

The video that we normally think of is really a container for two things

� The stuff you see ◦  a video codec

� The stuff you hear ◦  an audio codec

The video container contains …

� Metadata � Audio track(s) � Video track �  Synchronizing markers

Containers come in many flavors

�  Flash video (flv) � Audio/video interleave (avi) � Ogg (ogv) � MPEG4 (mp4/m4v) � WebM (webm)

Let's look at the audio codecs first

Audio codecs are for saving the sound tracks � Usually the container will have two tracks � But some systems have six or more � There are tons of audio codecs � We only need three ◦ MP3 ◦ AAC ◦ Vorbis

� The most common format � Can have two channels � Bitrates from 64 kbps to 320 kbps � Can use variable bitrates � Patented

AAC audio

�  Introduced by Apple in 1997 � Up to 48 channels � Better quality than MP3s � Patented

� Unpatented! � Open source, in fact � Unlimited channels

Now let's look at the video codecs

� There are tons but we'll focus on these:

� H.264 � Theora � VP8

H.264 video

� Low-bandwidth � High CPU requirements � Patented and licensed � Used in MP4/M4V containers

Theora video

� Royalty-free, no patents �  Fast, well-compressed � Usually seen in an Ogg container

VP8 video

� High quality � Low complexity � Bought by Google and released as open source

So how are the popular containers and codecs usually combined? � Ogg ◦ Theora video ◦ Vorbis audio

� MP4 ◦ AAC audio ◦ H.264 video

� WebM ◦ Vorbis audio ◦ VP8 video

What is supported where Browser Ogg MP4 WebM

Firefox 3.5 No 4.0

Internet Explorer No IE9 IE9

Chrome 5 No 6

Opera 10.5 No 10.6

Safari No 3.0 No

Here's the bottom line …

� No one format is supported universally �  So encode your video in these formats ◦ WebM (VP8 video and Vorbis audio) ◦ MP4 (H.264 video and AAC audio) ◦ Ogg (Theora video and Vorbis audio)

� Link to all three versions and let the browser decide which one it wants.

Can we get to the HTML now?

The <video> tag

� <video src="filename.mp4" � width="320" height="240" � ></video>

Demo: a bare video tag Hands-on a bare video tag

We can add controls to our video

<video src="v.mp4" controls="on">!</video>!

Demo: Adding controls Hands-on adding controls

Other options

�  autoplay �  loop � muted � poster="image/poster.jpg" � preload="auto|metadata|none"

Demo: Other video options Hands-on other video options

You can point to multiple video files <video width="320" height="240" controls="controls">!

<source src="CondscendingWonka.mp4"!

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />!

<source src="CondscendingWonka.webm"!

type='video/webm; codecs="vp8, vorbis"' />!

<source src="CondscendingWonka.ogv"!

type='video/ogg; codecs="theora, vorbis"' />!

</video>!

� The browser will pick the first one that it supports

Demo: Multiple videos for multiple browsers Hands-on multiple videos for multiple browsers

Conclusion

� Thanks to HTML5 we can now play video directly in our pages with no plug-ins.

� There are still hurdles -- different browsers support different codecs

� To overcome that, we can create fallback videos to support just about any browser

Further Study

� The Miro video converter ◦  http://www.mirovideoconverter.com/

�  Firefogg – a Firefox plug in converter ◦  http://www.firefogg.com

�  Source for compatibility table ◦  http://camendesign.com/code/

video_for_everybody/test.html