Upload
rap-payne
View
879
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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