HTML5 <video>

Carlos Cardona
HTML5 WG Member
WHATWG Contributor
School of Govsky Alumni
cardonadesigns.com
cgcardona@gmail.com
Video Containers
What you might consider an "AVI file" or "MP4
file" is actually a container format
What you might consider an "AVI file" or "MP4
file" is actually a container format
Similar to a zip file which contains any type of file
What you might consider an "AVI file" or "MP4
file" is actually a container format
Similar to a zip file which contains any type of file
Define how to store things in them, not what
kinds of data are stored
A Video file contains multiple tracks:
A Video file contains multiple tracks:
A video track (without audio)
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
Language of the audio
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
Language of the audio
Containers can have metadata
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
Language of the audio
Containers can have metadata
Video title
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
Language of the audio
Containers can have metadata
Video title
Cover art
A Video file contains multiple tracks:
A video track (without audio)
One or more audio tracks (without video)

Individual tracks can have metadata

Aspect ratio
Language of the audio
Containers can have metadata
Video title
Cover art
Episode numbers
Lots of video container formats
Lots of video container formats
MPEG
Flash Video
Ogg
WebM
Audio Video Interleave
When you are "watching a video"
your video player is doing several
things at once
When you are "watching a video"
your video player is doing several
things at once
Interpreting the container format
When you are "watching a video"
your video player is doing several
things at once
Interpreting the container format
Decoding the video stream and displaying
images on the screen
When you are "watching a video"
your video player is doing several
things at once
Interpreting the container format
Decoding the video stream and displaying
images on the screen
Decoding the audio stream and
sending audio to speakers
Video Codecs
A video codec is an algorithm by
which a video stream is encoded
A video codec is an algorithm by
which a video stream is encoded
H.264
A video codec is an algorithm by
which a video stream is encoded
H.264
Theora
A video codec is an algorithm by
which a video stream is encoded
H.264
Theora
VP8
Audio Codecs
An audio codec is an algorithm by
which an audio stream is encoded
An audio codec is an algorithm by
which an audio stream is encoded
MP3
An audio codec is an algorithm by
which an audio stream is encoded
MP3
AAC
An audio codec is an algorithm by
which an audio stream is encoded
MP3
AAC
Vorbis
What works?
Firefox 3.5+
Ogg Container
Theora Video
Vorbis Audio
Firefox 3.5+
Ogg Container
Theora Video
Vorbis Audio

Opera 10.5+
Ogg Container
Theora Video
Vorbis Audio
Chrome 3.0+
Ogg Container
Theora Video
Vorbis Audio
Chrome 3.0+
Ogg Container
Theora Video
Vorbis Audio

Chrome 3.0+
MP4 Container
H.264 Video
AAC Audio
Safari 3.0+
MP4 Container
H.264 Video
AAC Audio
Safari 3.0+
MP4 Container
H.264 Video
AAC Audio

iPhone & Android

MP4 Container
H.264 Video
AAC Audio
Adobe Flash
MP4 Container
H.264 Video
AAC Audio
Adobe Flash
MP4 Container
H.264 Video
AAC Audio

IE9
MP4 Container
H.264 Video
AAC Audio
Licensing H.264 Video
MPEG LA Consortium
MPEG LA Consortium

Two Licences
Manufactures or de/encoders
Distributors of content
MPEG LA Consortium

Two Licences
Manufactures or de/encoders
Distributors of content
Subscription
Title by title purchase
MPEG LA Consortium

Two Licences
Manufactures or de/encoders
Distributors of content
Subscription
Title by title purchase
Television
Internet
Licensing fee for television

Two options
$2500 per transmission
Licensing fee for television

Two options
$2500 per transmission
Annual Broadcast fee
$2500 per year for 100,000499,999
$5000 per year for 500,000999,999
$10000 per year for 1,000,000+
Participation fees are defined as
Participation fees are defined as

"AVC video that is delivered via the

Worldwide Internet to an end user for
which the end user does not pay
renumeration for the right to receive
or view."
MPEG LA grants a temporary
reprieve through 12/31/15

"After the first term the royalty shall

be no more than the economic
equivalent of royalties payable during
the same time for free television"
Encoding Ogg video
with Fireogg
Ogg Video

Ogg container
Theora video
Vorbis Audio
Firefogg

Open source GPL

Firefox 3.5 + extension
firefogg.org
Encoding H.264 video
with Handbrake
H.264 Video

MP4 container
H.264 video
AAC Audio
Handbrake

Open source GPL

Mac, windows, linux
Handbrake.org
At long last!
The markup!
<video src="video.mp4"></video>
<video src="video.mp4" width="500px" height=
500px"></video>
By default no controls

media.play()
media.pause()
media.paused
media.ended
media.defaultPlaybackRate=[value]
media.playbackRate = [value]
media.played
<video src="video.mp4" width="500px" height=
500px" controls></video>
Two additional attributes

preload
autoplay
<video src="video.mp4" width="500px" height=
500px" controls preload autoplay></video>
Making it work in all
(modern) browsers
<video width="500px" height="500px" controls
preload autoplay>
<source src="movie.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.ogv" type='video/ogg;
codecs="theora, vorbis"'>
</video>
Return of the Mime Type
VIDEO FILES MUST BE SERVED WITH THE
CORRECT MIME TYPE!

Content Type HTTP Header

Add Type video/ogg .ogg

Add Type video/mp4 .mp4
What about IE?
IE9 will support:

MP4 container
H.264 Video Codec
AAC Audio Codec
IE8 does support:

Flash
<video src="movie.ogv" width="500px" height="
500px" controls preload autoplay>
<object>
</object>
</video>
A complete example
<video width="500px" height="500px" controls preload autoplay
<source src="movie.mp4" type='video/mp4; codecs="avc1.
42E01E, mp4a.40.2"'>
<source src="movie.ogv" type='video/ogg; codecs="theora,
vorbis"'>
<object width="" height="" type="application/x-shockwave-
flash" data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
</object
</video>
Why?!
Why?!
Mobile
Devices
The World Today
The World Tomorrow
diveintohtml5.org
Carlos Cardona
HTML5 WG Member
WHATWG Contributor
School of Govsky Alumni
cardonadesigns.com
cgcardona@gmail.com