Images, Audio, & Video - Part 2

Adding Audio

HTML5 provides a quick and easy way to add audio and video files to be played on a website. Using the audio elementan audio clip can be added to a page. Just as with the img element, an audio element also needs a source URL specified via the src attribute.

<audio src="images-audio-video/jazz.ogg"></audio>

To accompany the src attribute on the audio element there are a handful of other attributes that may be used, the most popular of which include autoplay, controls, loop, and preload.

By default the audio element doesn’t show up on the page. If the Boolean attribute autoplay were passed in, nothing would be shown on the page, however the audio clip would automatically start playing upon loading the page. As a Boolean, the autoplay attribute serves as a toggle function. It will toggle the audio on or off when the page loads.

To actually show the audio element on the page, use the Boolean attribute controls. The controls attribute will show the default browser controls including play and pause, seeking, and volume.

<audio src="images-audio-video/jazz.ogg" controls></audio>

Adding Audio Demo

The loop attribute is also a Boolean attribute available to the audio element. Adding the loop attribute will repeat the audio clip endlessly, from beginning to end.

Lastly, the preload attribute has three different values, including none, auto, and metadata. The none value will not preload any information or data regarding the audio clip, while the auto value will preload all information and data. Themetadata value will preload media information about the clip, such as the length. The preload attribute is useful in the case that users might not actually need or want to listen to an audio clip. It helps save on bandwidth and allows the page to load faster for non-essential audio clips.

Audio Fallbacks

Different browsers may support different audio formats and some may not support audio at all. In this case we can list multiple audio fallbacks including different audio file formats, a Flash alternative, or the option to directly download the audio clip.

To start, using the HTML5 audio element we can specify different file formats using multiple sources via the sourceelement. The source element works in conjunction with the src and type attributes. The src attribute specifies the source URL while the type attribute specifies the MIME-type of the audio clip, helping browsers better understand the audio clip format.

Some browsers will not support the HTML5 audio element at all, in which case a Flash player fallback may be used. There are many different Flash players out there so you will need to research which one will work best for you. Two popular available options include SWFObject and Flowplayer.

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mpeg">
  <object type="application/x-shockwave-flash" data="player.swf?audio=jazz.mp3">
    <param name="movie" value="player.swf?audio=jazz.mp3">
    <p>This browser does not support the audio format. Please <a href="jazz.mp3" title="Jazz song">download</a> the audio clip.</p>
  </object>
</audio>

To cover every browser, including the ones that do not support ogg or mp3 audio formats and do not have a Flash plug-in installed, a link to simply download the audio clip is included. This link is placed within the Flash player code as a last case scenario should Flash not be available.

Adding Video

Adding in HTML5 videos is very similar to that of adding in audio. In this case however, we use the video element in place of the audio element. All of the same attributes (source, autoplay, controls, loop, and preload) and fallbacks apply here too.

With audio, if the controls Boolean attribute wasn’t specified the audio clip wouldn’t be shown. With videos, not specifying the controls attribute shows the video, however doesn’t provide any way to play it unless the autoplayBoolean attribute is also applied. Best practice here would be to include the controls attribute unless there is good a reason not to allow users to start, stop, or replay the video.

Since videos will be displayed on the page it doesn’t hurt to specify dimensions, most commonly with a fixed height orwidth in CSS. This helps ensure that the video isn’t too large and stays within the implied layout of a page. Additionally, specifying a size helps browsers render the videos faster and allows them to allocate the proper space needed for the video to be shown.

<video src="earth.ogv" controls></video>

Adding Video Demo

Customizing Audio & Video Controls

By default audio and video controls are determined by each browser independently. Depending on the website more control over the look and feel of the media player may be needed. In this case a customized playercan be built, but requires a little bit of JavaScript to get the player working.

Poster Attribute

One additional attribute available on the video element is the poster attribute. The poster attribute allows you to specify an image, in the form of a URL, to be shown before video is played. A poster image could be a still frame from the video or any other desired image. While not practical, the example below uses the picture of cows as the poster for the Earth video.

<video src="earth.ogv" controls poster="cows.jpg"></video>

Poster Demo

Video Fallbacks

As with the audio element, video fallbacks are also necessary and come in the same markup format with multiplesource elements. One option that could be used in place of building your own Flash player is YouTube or Vimeo. These video hosting websites make it dead simple to upload your own videos, then embed them onto a page.

<video controls>
  <source src="earth.ogv" type="video/ogg">
  <source src="earth.mp4" type="video/mp4">
  <object type="application/x-shockwave-flash" data="player.swf?video=earth.mp4">
    <param name="movie" value="player.swf?video=earth.mp4">
    <p>This browser does not support the video format. Please <a href="earth.mp4" title="Earth video">download</a> the video.</p>
  </object>
</video>

HTML5 Audio & Video File Formats

Browser support for the audio and video elements vary as does the file formats required with these elements. Each browser has their own interpretation of which audio and video file formats should be used.

To convert files into different formats there are a few tools to help out, both online and desktop based. To convert audio files the web application media.io does wonders. For video files the desktop application Miro Video Converter looks to do the trick.

Figure & Caption

With HTML5 also came the introduction of the figure and figcaption elements. These elements were created to semantically markup self-contained content or media, commonly with a caption. Before HTML5 this was frequently accomplished using ordered list. While ordered list worked, it was not semantically correct markup.

Figure

The figure block level element is used to wrap around different forms of media. It can surround images, audio clips, videos, blocks of code, diagrams, illustrations, or forms of media. More than one form of media may be contained within a figure at a time, such as multiple images or videos. Overall, the figure element should not disrupt the content or legibility of a page should it be moved to the bottom of a page or to an appendix.

<figure>
  <img src="images-audio-video/cows.jpg" alt="Brown and white cows in a field">
</figure>

Figure Demo

Figure Caption

To add a caption, or legend, to a figure element the figcaption element is used. The figcaption may appear at the top, bottom, or anywhere within the figure element, however it may only appear once.

FIGURE & CAPTION<figure>
  <img src="images-audio-video/cows.jpg" alt="Brown and white cows in a field">
  <figcaption>A couple of brown and white cows hanging out in a grass field.</figcaption>
</figure>

Figure & Caption Demo

A couple of brown and white cows hanging out in a grass field.