Cover by David Flanagan

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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= ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required