JavaScript: The Definitive Guide, 6th Edition

Scripting Audio and Video

HTML5 introduces <audio> and <video> elements that are, in theory, as easy to use as the <img> element. In HTML5-enabled browsers, you no longer need to use plug-ins (like Flash) to embed sounds and movies in your HTML documents:

<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>

In practice, the use of these elements is trickier than this, since browser vendors have not been able to agree on a standard audio and video codec that all will support, so you typically end up using <source> elements to specify multiple media sources in different formats:

<audio id="music">
<source src="music.mp3" type="audio/mpeg">  
<source src="music.ogg" type='audio/ogg; codec="vorbis"'>
</audio>

Note that <source> elements have no content: there is no closing </source> tag, and you do not need to end them with />

Browsers that support <audio> and <video> elements will not render these element’s content. But browsers that do not support them do render their content, so you can put fallback content (such as an <object> element that invokes the Flash plug-in) inside:

<video id="news" width=640 height=480 controls preload>
  <!-- WebM format for Firefox and Chrome -->
  <source src="news.webm" type='video/webm; codecs="vp8, vorbis"'>
  <!-- H.264 format for IE and Safari -->
  <source src="news.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <!-- Fall back on the Flash plugin -->
  <object width=640 height=480 type="application/x-shockwave-flash"
          data="flash_movie_player.swf" ...