HTML5 for Publishers

Chapter 3. <audio>/<video> for Publishers

One of the most exciting features of HTML5 is that it offers native support for audio and video content. On the Web, this means that reliance on browser plugins in order to facilitate display of multimedia content is becoming a thing of the past. On the ereader side, HTML5 and EPUB 3 open the door to embedding this same multimedia content directly within an ebook. Let’s take a quick look at HTML5’s new <audio> and <video> elements.

A Two-Minute Introduction to the <audio> and <video> Elements

The standard HTML5 <audio> element looks like this:

<audio id="new_slang">
<source src="new_slang.wav" type="audio/wav"/>
<source src="new_slang.mp3" type="audio/mp3"/>
<source src="new_slang.ogg" type="audio/ogg"/>
<em>(Sorry, &lt;audio&gt; element not supported in your
  browser/ereader, so you will not be able to listen to
  this song.)</em>
</audio>

The <audio> element serves as a container, which holds a series of <source> elements that reference your audio files (src attribute) in whichever formats you have available (type attribute). If you only have one format available, you can abbreviate the markup as follows:

<audio id="new_slang" src="new_slang.wav">No song for you!</audio>

However, current best practice is to provide audio in multiple formats—usually WAV, MP3, and Ogg—in order to ensure compatibility across the range of HTML5 audio–compliant browsers and ereaders (see HTML5 Audio/Video Compatibility in the Browser and Ereaders).

The <audio> element ...