HTML Video

title

HTML5 Video

author

Sam Bashton

HTML5 video support ⌘

• HTML5 supports a `<video>` tag
• This means you can 'easily' add videos to a website, and have playback without any effort
  • Except that that the details mean this isn't really true..

Video codecs ⌘

• Video has to be encoded in some way
• Almost all codecs are in some way patent encumbered
• Different browsers support different codecs
• Video files must therefore be encoded multiple times
• ... with further fallbacks for older browsers that do not support HTML5 video

Video codecs: WebM ⌘

• Mime type `video/webm`
• VP8 video codec developed by Google
• In theory free and open
• But the MPEG LA have accused it of patent infringement
• Supported in Chrome + Firefox by default
• Not supported in MSIE or Safari by default

Ogg Theora Vorbis ⌘

• In theory free and open
• No specific accusation of patent infringement, but hints from MPEG LA
• Worse performance than WebM
• Supported in Chrome + Firefox by default
• Not supported in MSIE or Safari by default

MP4 H264 ⌘

• Non-free: patented, requires a license from the MPEG LA
• Supported in MSIE 9+, Chrome, Safari
  • But Google did say they were going to remove support from Chrome
    • Although, that was some time ago, and it's still supported...
• Not supported in Firefox by default

Dealing with cross-browser compatibility ⌘

• As seen previously, there is no one codec supported by all browsers
• HTML5 allows multiple files to be specified, with the browser picking one it can play

  <video controls>
    <source src="somevideo.webm" type="video/webm">
    <source src="somevideo.mp4" type="video/mp4">
    I'm sorry; your browser doesn't support HTML5 video.
    <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> 
  </video>

Exercise ⌘

• Go to http://www.youtube.com/html5 and enable HTML5
• View a video
• What method/codec does your browser use to play the video?