24
HTML5 VIDEO

Intro to HTML5 Video

Embed Size (px)

DESCRIPTION

Notes for HTML5 Video

Citation preview

Page 1: Intro to HTML5 Video

HTML5 VIDEO

Page 2: Intro to HTML5 Video

HTML5 Video works in:• Firefox 3.5+• Safari 3.0+• Chrome 3.0+• Opera 10.5+• IE 9+• iPhone 1.0+• Android 2.0+

It doesn’t work on everything but there are fallback options

Page 3: Intro to HTML5 Video

VIDEO CONTAINERS

There are many video containers available:

MPEG 4 - .mp4 or m4v extension

Flash Video - .flv or f4v extension

OGG - .ogv extension with Ogg video (Theora) andOgg audio (Vorbis)

WebM - the newest open source container May 2010

Page 4: Intro to HTML5 Video

VIDEO CODECSAn algorithm by which a video stream is encoded. Video on the web uses lossy compression. The main three used today:

H.264: standardised in 2003, it aims to provide a single codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between.

H.264 standard is split into “profiles,” which each define a set of optional features that trade complexity for file size. Higher profiles use more optional features, offer better visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real-time.

Page 5: Intro to HTML5 Video

VIDEO CODECS

H.264 continued:

•Apple iPhone - baseline profile•Apple TV - main profile•Desktop - main and high profile•Blu Ray - high profile

Page 6: Intro to HTML5 Video

VIDEO CODECSTheora:

Theora is a royalty-free codec released in 2008

Theora is supported by Mozilla’s Firefox 3.5 using an OGGcontainer without the need for a plugin

VP8:

video codec from On2. Technically, it produces output on par with H.264 High Profile, while maintaining a low decoding complexity on par with H.264 Baseline. As of May 19, 2010, VP8 is a royalty-free, modern codec

Page 7: Intro to HTML5 Video

AUDIO CODECSLike video codecs, audio codecs are algorithms by which an audio stream is encoded. Like video codecs, there are lossy and lossless audio codecs. And like lossless video, lossless audio is really too big to put on the web.

The three main codec used on the web are:

•MP3•AAC•Vorbis

Page 8: Intro to HTML5 Video

AUDIO CODECS

MPEG-1 AUDIO LAYER 3 (MP3)

MP3s can contain up to 2 channels of sound. They can be encoded at different bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320.

Higher bitrates mean larger file sizes and better quality audio, although the ratio of audio quality to bitrate is not linear. (128 kbps sounds more than twice as good as 64 kbps, but 256 kbps doesn’t sound twice as good as 128 kbps.)

The MP3 format allows for variable bitrate encoding, which means that some parts of the encoded stream are compressed more than others.

Page 9: Intro to HTML5 Video

AUDIO CODECS

MPEG-1 AUDIO LAYER 3 (MP3) continued:

The MP3 format (standardized in 1991) is patent-encumbered, which explains why Linux can’t play MP3 files out of the box.

Pretty much every portable music player supports standalone MP3 files, and MP3 audio streams can be embedded in any video container. Adobe Flash can play both standalone MP3 files and MP3 audio streams within an MP4 video container.

Page 10: Intro to HTML5 Video

AUDIO CODECS

ADVANCED AUDIO CODING (ACC)

Standardized in 1997, it lurched into prominence when Apple chose it as their default format for the iTunes Store.

Originally, all AAC files “bought” from the iTunes Store were encrypted with Apple’s proprietary DRM scheme, called FairPlay. Songs in the iTunes Store are now availableas unprotected AAC files, which Apple calls “iTunes Plus” because it sounds so much better than calling everything else “iTunes Minus.”

Page 11: Intro to HTML5 Video

AUDIO CODECS

ADVANCED AUDIO CODING (ACC) continued:

AAC was designed to provide better sound quality than MP3 at the same bitrate, and it can encode audio at any bitrate. (MP3 is limited to a fixed number of bitrates, with an upper limit of 320 kbps.) AAC can encode up to 48 channels of sound, although in practice no one does that.

The AAC format also differs from MP3 in defining multiple profiles, in much the same way as H.264, and for the same reasons. The “low-complexity” profile is designed to be playablein real-time on devices with limited CPU power, while higherprofiles offer better sound quality at the same bitrate at the expense of slower encoding and decoding.

Page 12: Intro to HTML5 Video

AUDIO CODECS

All current Apple products, including iPods, AppleTV, and QuickTime support certain profiles of AAC in standalone audio files and in audio streams in an MP4 video container.

Adobe Flash supports all profiles of AAC in MP4, as do the open source MPlayer and VLC video players.

ADVANCED AUDIO CODING (ACC) continued:

Page 13: Intro to HTML5 Video

AUDIO CODECS

VORBIS

Mozilla Firefox 3.5 supports Vorbis audio files in an Ogg container, or Ogg videos with a Vorbis audio track.

Android mobile phones can also play standalone Vorbis audio files. Vorbis audio streams are usually embedded in an Ogg or WebM container, but they can also be embedded in an MP4.

Vorbis is not encumbered by any known patents.

Page 14: Intro to HTML5 Video

WHAT WORKS WITH WHAT?

HTML5 includes a <video> element for embedding video into a web page. There are no restrictions on the video codec, audio codec, or container format you can use for your video.

One <video> element can link to multiple video files, and the browser will choose the first video file it can actually play.

It is up to you to know which browsers support which containers and codecs.

Page 15: Intro to HTML5 Video

WHAT WORKS WITH WHAT?As of today:

Mozilla Firefox (3.5+) supports Theora video and Vorbis audioin an Ogg container. Firefox 4 also supports WebM.

Opera (10.5+) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM

Google Chrome (3.0+) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.

Safari (3.0+) does not include WebM, Theora, Vorbis, or theOgg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.

Page 16: Intro to HTML5 Video

WHAT WORKS WITH WHAT?As of today:

Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.

Adobe Flash (9.0.60.184+) supports H.264 video (all profiles)and AAC audio (all profiles) in an MP4 container.

Internet Explorer 9 supports all profiles of H.264 video andeither AAC or MP3 audio in an MP4 container. It will also playWebM video if you install a third-party codec, which is notinstalled by default on any version of Windows.

Page 17: Intro to HTML5 Video

THE BOTTOM LINE

There is no single combination of containers and codecsthat works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

Page 18: Intro to HTML5 Video

USING HTML5 VIDEOHTML5 uses the <video> element. If you only haveone video file, you can simply link to it in a src attribute.

<video src="video.mp4"></video>

<video src="video.mp4" width="320”height="260"></video>

Page 19: Intro to HTML5 Video

USING HTML5 VIDEOHTML5 video doesn’t automatically give the user any Controls. So, you need to add the controls to the code:

<video src="video.mp4" width="320”height="260" controls></video>

Page 20: Intro to HTML5 Video

USING HTML5 VIDEOHere’s an example of a video that will start downloading(but not playing) as soon as the page loads:

<video src="video.mp4" width="320”height="260" preload></video>

Page 21: Intro to HTML5 Video

USING HTML5 VIDEOAnd here’s an example of a video that will not startdownloading as soon as the page loads:

<video src="video.mp4" width="320”height="260" preload="none"></video>

Page 22: Intro to HTML5 Video

USING HTML5 VIDEOHere’s an example of a video that will start downloadingand playing as soon as possible after the page loads:

<video src="video.mp4" width="320”height="260" autoplay></video>

Page 23: Intro to HTML5 Video

USING HTML5 VIDEOOf course, as we know, one video isn’t going to be enough.We need to include at least two versions. So:

<video width="320" height="240" controls> <source src=”neil.mp4" type='video/mp4’> <source src=”neil.webm" type='video/webm’> <source src=”neil.ogv" type='video/ogg’></video>

Page 24: Intro to HTML5 Video

HTML5 VIDEO

Let’s Get Stuck In!