On October 23rd, 2014, we updated our
By continuing to use LinkedIn’s SlideShare service, you agree to the revised terms, so please take a few minutes to review them.
HTML5 Audio and VideoPlaying movies in your websites without Flash orSilverlight
YouTube has been doing video for years How do they do it? Whats wrong with their solution?
The video that wenormally think of isreally a containerfor 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 Flashvideo (flv) Audio/video interleave (avi) Ogg (ogv) MPEG4 (mp4/m4v) WebM (webm)
Lets look at theaudio codecs first
Audio codecs are for saving the soundtracks Usuallythe 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 letslook at thevideo codecs There are tons but well 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 Highquality Low complexity Bought by Google and released as open source
So how are the popular containers andcodecs usually combined? Ogg ◦ Theora video ◦ Vorbis audio MP4 ◦ AAC audio ◦ H.264 video WebM ◦ Vorbis audio ◦ VP8 video
What is supported whereBrowser Ogg MP4 WebM Firefox 3.5 No 4.0 Internet No IE9 IE9 Explorer Chrome 5 No 6 Opera 10.5 No 10.6 Safari No 3.0 No
Heres 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 tothe HTML now?
The <video> tag <video src="filename.mp4" width="320" height="240" ></video>
Hands-on a bare video tagDemo: a bare video tag
We can add controls to our video<video src="v.mp4" controls="on">!</video>!
Demo: Adding controlscontrols Hands-on adding
Other options autoplay loop muted poster="image/poster.jpg" preload="auto|metadata|none"
Demo: Other other video options Hands-on 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 videosfor multiple browsersHands-on multiple videos for multiplebrowsers
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