12 html5 audio and video

1,274 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,274
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

12 html5 audio and video

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

×