What's New Tutorial Index References RSS Feed Contact

Audio and Video

In the early days of the web, playing back audio and video in the browser was a messy business. An external player like RealPlayer and QuickTime was necessary to handle even the most basic formats. The only reliable support one could get for out-of-the-box playback was for MIDI files (which are ironically not well-supported today). By the mid-2000s, sites like YouTube were using embedded Flash players to play back video in the browser; this still required the install of Adobe Flash and the security updates needed to keep it safe.

Nowadays, browsers come with support for a variety of audio and video formats, no questions asked, no additional software needed. What's important to note is that this page will not go over codecs and containers, as these are a heavy enough topic to be their own page in the Extras section. This page will only focus on the two elements needed to display audio and video on the page, conveniently named audio and video.

The audio element

The audio element is a fairly basic element with a lot of optional moving parts. It only requires one attribute, src, plus another (controls) if you're not providing your own player in JavaScript.

<audio src="clayne_ds.mp3" controls></audio>

(Song is "Vertigo Blues" by c.layne, used here under the terms of CC BY-NC 3.0.)

Eagle-eyed readers will notice that audio has a closing tag, despite ostensibly working like img. This is because the element supports specifying multiple formats for maximum browser support, as well as fallback content in case the browser doesn't support any of them (or the audio element in general). If you have multiple formats, you can specify them using source elements nested inside the audio element, and the browser will play the first one it recognizes. Otherwise, it'll display the HTML nested inside it in its place.

<audio controls>
	<source src="clayne_ds.opus" type="audio/ogg">
	<source src="clayne_ds.ogg" type="audio/ogg">
	<source src="clayne_ds.mp3" type="audio/mp3">
	<p>Seems like your browser doesn't support the <code>audio</code> element. <a href="clayne_ds.mp3">Click here</a> for a direct link to the audio file.</p>
</audio>

audio has a lot of extra, optional attributes for finer control over how the audio is played and loaded on the page. You should handle some of these with caution, as users can be extremely sensitive to content blaring at them as they load a page, and you might end up annoying them more than enriching their experience.

loop
If set, once the audio plays in its entirety, it will play again automatically.
muted
This starts the player with its volume muted, requiring the user to unmute it to hear what's playing.
preload
preload is the only attribute other than src that resembles a traditional attribute (that is, an attribute whose value you set to something rather than just adding it to the opening tag). By setting it to auto, the browser will preload the entire file for immediate playback, while setting it to none disables this (it'll load when the user goes to play the file). metadata will only load the metadata, like the length of the file.
autoplay
Ostensibly, autoplay will cause the file to begin playing immediately as it's loaded; however, because the potential for abuse is so high, browsers are either disabling it by default or giving users the ability to disable it by default, Firefox being the big one at the moment.

The video element

video works identically to audio with the addition of three extra, optional attributes. I'll use these in a full example first.

<video controls width="427" height="240" poster="sintel_poster.png">
	<source src="sintel_trailer-480p.mp4" type="video/mp4">
</video>
width and height
Naturally, these control the width and height of the player. The video will always grow to the smaller of the dimension and keep its shape, with padding being placed on the other two sides. You can't stretch a video out of shape like you can an image.
poster
This sets an image to be displayed in the player before the video itself is played. Normally, it's used for some kind of promotional image or a shot that represents the video in question.

Summary:

  1. In the past, plugins like QuickTime and Adobe Flash were required to play audio and video directly in the browser. Browsers now have multimedia support built-in.
  2. To embed audio into a page, use the audio element.
    • audio can take either a src attribute or feature nested source elements to specify multiple audio files. If a browser doesn't support one format, it'll use one of the ones it does support.
    • If the browser doesn't support any of the formats on offer, you can feature other HTML tags inside the audio element to display instead. This is called fallback content.
    • audio also features several optional attributes for controlling the functionality of the player:
      • controls adds visible player controls.
      • loop will loop the audio when played.
      • muted starts the audio muted.
      • preload="auto" will load the file as the page is being loaded in for faster playback. Setting it to none instead of auto disables this, while setting it to metadata loads in only the metadata of the file.
      • autoplay will play the media file as soon as it's loaded. Don't rely on this working, as some browsers ignore it or let the user disable it entirely thanks to its high potential for abuse.
  3. For video, use the video element.
    • video works identically to audio with the addition of three extra optional attributes:
      • width and height will naturally control the height and width of the player.
      • poster displays an image in the player before the video itself is played.

Further reading