2. WHO I AM
• Ben Wilkins
• Director of Interactive Media atagency)
Talstone Group (an advertising
• A husband and a father
• A die-hard fan of the Kentucky Wildcats
3. WHAT IS HTML5 VIDEO?
HTML5 video is an element introduced in the
HTML5 draft specification for the purpose of
playing videos or movies, partially replacing the
object element.*
*Wikipedia
4. WHAT IS HTML5 VIDEO?
• A DOM object played directly by
the browser’s built-in player
• Does not require 3rd party plugins
• Still evolving
6. FLASH vs. HTML5
• Flash growth depends on Adobe support
• HTML5 video reduces load time
• Interaction and skins for HTML5 video
can be customized using JavaScript
and stylesheets
• HTML5companies by all of the major
internet
is supported
7. DOWNSIDES
• Limited full screen support
• Not supported by older browsers
(*cough* Internet Explorer *cough*)
• It’s technically in beta
• Everyone wants a different codec
8. BROWSER SUPPORT
FireFox 3.5+, Safari 3.0+, Chrome 3.0+,
Opera 10.5+, iPhone/iPad 1.0+, Android 2.0+
And...
10. CODECS & CONTAINERS
H.264 and AAC (.mp4)
• H.264 developed by MPEG group (2003)
• MP4 developed by Apple
• Uses AAC audio codec
• H.24 is patent-encumbered
11. CODECS & CONTAINERS
Theora and Vorbis (“Ogg”, .ogv)
• Developed by Xiph.org Foundation
• source-friendly
Royalty-free, open standard and open
• Unencumbered by any known patents
12. CODECS & CONTAINERS
VP8 and Vorbis (“WebM”, .webm)
• Announced May
• Development sponsored by Google
• Most promising container thus far
13. CODECS & CONTAINERS
A year from now, the landscape will look
drastically different, largely due to WebM:
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
Ogg — 3.5+ ** 5.0+ 10.5+ – –
MP4 9.0+ – 3.0+ 5.0+ – 3.0+ 2.0+
WebM 9.0+* 4.0+ ** 6.0+ 10.6+ – ***
* Microsoft has implied that the user has to install a VP8 codec, but nothing has been confirmed.
** Safari will play anything QuickTime can play, but QT only comes with MP4 support pre-installed.
*** Google has committed to supporting WebM “in a future release” of Android, but has not set a timeline.
14. CODECS & CONTAINERS
Which should I use?
• You need to use ALL OF THEM.
• FireFox will continue to reject MP4 as long as
the MPEG group continues to charge a
licensing fee for encoding & decoding.
• Apple will continue to reject Ogg because
FireFox is rejecting MP4.
• Google can try to convince Apple to use
WebM, which would make it compatible
with every browser and device.
16. ENCODING: OGG
• FireFogg: A free plug-in for FireFox
• Encoded locally
• Open source with an API available for use
17. ENCODING: WEBM
• Can now also be done with FireFogg
• WebM is also supported(CLI) a
command line interface
in ffmpeg,
18. MARKING IT UP
Technically, all you need is:
<video src=”trailer.webm”></video>
However, if you’ve been paying attention, you know
we need more.
19. MARKING IT UP
Just like images, you should add width and height:
<video src=”trailer.webm” width=”320” height=”240”></video>
20. MARKING IT UP
Let’s remove the source for now and add controls.
<video width=”320” height=”240” controls></video>
21. MARKING IT UP
Preloading... just hear me out.
If the whole point of the page is to view the video, it
makes sense to have the browser start downloading
the video as soon as the page loads.
<video width=”320” height=”240” controls preload></video>
Telling the browser NOT to preload:
<video width=”320” height=”240” controls preload=”none”></video>
22. MARKING IT UP
Autoplay... just hear me out, again.
Some people hate autoplay, some love it. The truth is
that sometimes it’s the correct thing to do.
<video width=”320” height=”240” controls autoplay></video>
23. MARKING IT UP
Before I go on, I should mention MIME
Types. Place the following lines in
your .htaccess file to send the correct MIME
Types to browsers.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
* If your video won’t play in FireFox, this is likely the reason why.
Make sure the video/ogg MIME Type has been added correctly.
24. MARKING IT UP
Adding the source back, but this time I’m going to
add all three codecs. The video element can contain
more than one source, and the browser will go down
the list until it finds one it can play.
<video width=”320” height=”240” controls autoplay>
<source src=”trailer.mp4” type=”video/mp4”>
<source src=”trailer.webm” type=”video/webm”>
<source src=”trailer.ogv” type=”video/ogg”>
</video>
Adding the type attribute lets the browser know if it
can play the file.
25. MARKING IT UP:
A FALLBACK PLAN
But what about IE?
• Most people that use IE also have Flash
installed, and the modern versions of Flash
support H.264 video, so you can use the
MP4 you already encoded.
• HTML5 let’s you nest an <object> element
inside the <video> tag.
• FlowPlayer is a free Flash video player.
26. MARKING IT UP:
A FALLBACK PLAN
• HTML5 will ignore all children of the
<video> element (other than <source>).
• This allows you to use HTML5 in newer
browsers and gracefully fall back to Flash
in older browsers.
• Video forand others have expanded on it
popular,
Everybody made this method
since.
27. MARKING IT UP:
iOS ISSUES
• Prior to iOS4, videos were not
recognized if a poster attribute is
included. The poster attribute lets you
display a custom image while the video
loads or until the user presses play.
• iOSlisted,onlylist your MP4 file first.
file
will
so
recognize the first source
28. MARKING IT UP:
ANDROID ISSUES
• The type attribute on the source
element confuses Android. Since
Android can only read H.264, just leave
off the type attribute for the MP4 file.
This does not affect other browsers.
• The controls attribute is not supported,
but it doesn’t hurt anything to
include it.
29. THE FULL CODE
<video id="movie" width="320" height="240" preload controls>
<source src="trailer.mp4" />
<source src="trailer.webm" type="video/webm" />
<source src="trailer.ogv" type="video/ogg" />
<object width="320" height="240"
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" />
<param name="flashvars"
value='config={"clip": {"url": "http://example.com/vids/trailer.mp4",
"autoPlay":false, "autoBuffering":true}}' />
<p>Download video as <a href="trailer.mp4">MP4</a>,
<a href="trailer.webm">WebM</a>, or <a href="trailer.ogv">Ogg</a>.</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
});
</script>
30. GOING FORWARD
• More useful analytics
• Easier social sharing
• Easy branding
• Calls to action and tracking
• Email capabilities
• Who knows... Maybe TV?
