12 html5 audio and video
DESCRIPTION
TRANSCRIPT
![Page 1: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/1.jpg)
HTML5 Audio and Video Playing movies in your websites without Flash or Silverlight
![Page 2: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/2.jpg)
YouTube has been doing video for years
� How do they do it? � What's wrong with their solution?
![Page 3: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/3.jpg)
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
![Page 4: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/4.jpg)
The video container contains …
� Metadata � Audio track(s) � Video track � Synchronizing markers
![Page 5: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/5.jpg)
Containers come in many flavors
� Flash video (flv) � Audio/video interleave (avi) � Ogg (ogv) � MPEG4 (mp4/m4v) � WebM (webm)
![Page 6: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/6.jpg)
Let's look at the audio codecs first
![Page 7: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/7.jpg)
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
![Page 8: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/8.jpg)
� The most common format � Can have two channels � Bitrates from 64 kbps to 320 kbps � Can use variable bitrates � Patented
![Page 9: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/9.jpg)
AAC audio
� Introduced by Apple in 1997 � Up to 48 channels � Better quality than MP3s � Patented
![Page 10: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/10.jpg)
� Unpatented! � Open source, in fact � Unlimited channels
![Page 11: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/11.jpg)
Now let's look at the video codecs
� There are tons but we'll focus on these:
� H.264 � Theora � VP8
![Page 12: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/12.jpg)
H.264 video
� Low-bandwidth � High CPU requirements � Patented and licensed � Used in MP4/M4V containers
![Page 13: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/13.jpg)
Theora video
� Royalty-free, no patents � Fast, well-compressed � Usually seen in an Ogg container
![Page 14: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/14.jpg)
VP8 video
� High quality � Low complexity � Bought by Google and released as open source
![Page 15: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/15.jpg)
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
![Page 16: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/16.jpg)
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
![Page 17: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/17.jpg)
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.
![Page 18: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/18.jpg)
Can we get to the HTML now?
![Page 19: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/19.jpg)
The <video> tag
� <video src="filename.mp4" � width="320" height="240" � ></video>
![Page 20: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/20.jpg)
Demo: a bare video tag Hands-on a bare video tag
![Page 21: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/21.jpg)
We can add controls to our video
<video src="v.mp4" controls="on">!</video>!
![Page 22: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/22.jpg)
Demo: Adding controls Hands-on adding controls
![Page 23: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/23.jpg)
Other options
� autoplay � loop � muted � poster="image/poster.jpg" � preload="auto|metadata|none"
![Page 24: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/24.jpg)
Demo: Other video options Hands-on other video options
![Page 25: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/25.jpg)
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
![Page 26: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/26.jpg)
Demo: Multiple videos for multiple browsers Hands-on multiple videos for multiple browsers
![Page 27: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/27.jpg)
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
![Page 28: 12 html5 audio and video](https://reader034.vdocuments.site/reader034/viewer/2022051610/549276ecac7959182e8b4620/html5/thumbnails/28.jpg)
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