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 element is a fairly basic element with a lot of optional moving parts. It only requires one attribute,
src, plus another (
<audio src="clayne_ds.mp3" controls></audio>
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.
- If set, once the audio plays in its entirety, it will play again automatically.
- This starts the player with its volume muted, requiring the user to unmute it to hear what's playing.
preloadis the only attribute other than
srcthat 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
nonedisables this (it'll load when the user goes to play the file).
metadatawill only load the metadata, like the length of the file.
autoplaywill 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.
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>
- 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.
- 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.
- 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.
- To embed audio into a page, use the
audiocan take either a
srcattribute or feature nested
sourceelements 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
audioelement to display instead. This is called fallback content.
audioalso features several optional attributes for controlling the functionality of the player:
controlsadds visible player controls.
loopwill loop the audio when played.
mutedstarts the audio muted.
preload="auto"will load the file as the page is being loaded in for faster playback. Setting it to
autodisables this, while setting it to
metadataloads in only the metadata of the file.
autoplaywill 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.
- For video, use the
videoworks identically to
audiowith the addition of three extra optional attributes:
heightwill naturally control the height and width of the player.
posterdisplays an image in the player before the video itself is played.