Home › Tips & Tricks ›

HTML 5 tips - how to get streaming video properly embedded into content

in

For maximum compatibility, here’s what your video workflow will look like:

  1. Make one version that uses Theora video and Vorbis audio in an Ogg container.
  2. Make another version that uses WebM (VP8 + Vorbis).
  3. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  4. Link to all three video files from a single <video> element, and fall back to a Flash-based video player.

 eg:

<video width="320" height="240" controls>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

and be sure the www server has the proper MIME header types configured:

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

(courtesy of diveintohtml5.org)