12 html5 audio and video
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


12 html5 audio and video






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

12 html5 audio and video Presentation Transcript

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