HTML5 Audio and Video

In the old days, you needed an external player if you wanted to implement audio and video into your website. YouTube originally used a Flash player; RealPlayer and QuickTime were common even earlier. About the only built-in support for multimedia you'd find was for MIDI files (which are ironically not very well supported anymore).

Nowadays, browsers feature built-in support for audio and video—provided you're playing with the right formats. We'll go over a couple prominent formats, and then how to set them up.

Audio formats

Opus

Opus is an audio codec that combines a voice-optimized mode and a normal audio mode more akin to MP3 or AAC, both with very little delay. This makes it ideal for both real-time audio chat (as seen in apps like Discord) and streaming music. You can also deliver regular .opus files to a client and their browser will be able to play it.

Software support for Opus is fairly good. Chrome, Opera, and Firefox have both been able to handle it for a while, and Edge isn't too shabby with it either. Safari support on both Mac and iOS is very recent and limited.

Ogg Vorbis

Vorbis is another open-source codec; it's been around a while, much longer than Opus, and has been used in big-budget and indie video games (Minecraft, Grand Theft Auto: San Andreas, and World of Warcraft, to name a few), on web radio like NPR, and on streaming services like Spotify.

You can expect similar support to Opus if you use it, though Safari doesn't support Vorbis whatsoever.

MP3

The mother of all internet music, MP3 is in the situation of being both widely supported and rather outdated. MP3 used to be patent-restricted (meaning you couldn't freely distribute the encoders or the players), but now, it's a totally free and open format. Quality-wise, MP3 is larger and sounds worse than either Opus or Vorbis, but support is strong for it, even for Safari.

For most uses, Opus will be your best bet. If you need or want Safari and iOS support, or you're hosting MP3s anyway, you'll be fine in that format.

Video formats

WebM

WebM is another open-source media format, most commonly used for videos. Based partially off Matroska (MKV) files, WebM is pretty much the go-to format for web video. Wikipedia is a prominent proponent of its usage.

Software support for WebM is also fairly good. Once again, Chrome, Firefox, and Opera all support it widely, while Safari doesn't and Edge has only partial support.

H.264

H.264 is the most supported of any of the video formats we'll go over, at 94% support globally, but it's also not a free format, using patented and more expensive to support technology. It's most prominently used in the encoding of Blu-Ray discs and through services like Vimeo and the iTunes store. It's a good, safe choice, but if you're concerned about going totally open source, it's a non-starter.

Using <audio> and <video>

To put all that in practice, use the <audio> and <video> tags like so:

<audio src="http://www.songfight.org/music/dizzy_spells/clayne_ds.mp3" controls></audio>

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

This will embed a small player for the audio file. Without the controls, the audio file will still be embedded, but you'll need to control it using a script. (This can be useful if you'd like to code your own player, though, instead of using the browser's default.)

A few additional attributes can be set for audio playback:

• autoplay will make the file start playing as soon as it's loaded. Most users hate this, though, so please don't.
• loop will make the file play again after reaching the end of the file, if set to true.
• muted, if set to true, will load the player muted.
• There's no requirement that browsers have to follow a set preload value, but generally, this will fetch the audio file prior to playback.

Video works much the same, with additional attributes for setting the player height, width (both in CSS pixels), and for setting a "poster", or an image to show in the place of the video during download.

<video src="http://download.blender.org/durian/trailer/sintel_trailer-480p.mp4" controls width="640"></video>

(Video is the trailer for Sintel, the Durian open movie project, used here under the terms of CC BY 3.0.)

Providing format fallbacks

Usefully, if you need to ensure maximum compatibility, you can set several different videos to be loaded, depending on which one the browser supports, as well as text and markup that'll only display if the browser doesn't support HTML5 audio and video. To make use of this, use the longhand syntax:

<audio controls>
	<source src="audio.opus" type="audio/opus">
	<source src="audio.ogg" type="audio/ogg">
	<source src="audio.mp3" type="audio/mp3">
	<p><strong>This browser is too old to support HTML5 audio.</strong> <a href="audio.mp3">Click here</a> to listen to the MP3 stream directly.</p>
</audio>
	

This is why the <audio> and <video> elements aren't void elements, by the way. They're allowed to contain fallback content, unlike images, which aren't.

Embedding external players

At the end of the day, the simplest solution might just be to use an external player, just like in the old days. Sites like YouTube and Soundcloud provide their own free audio/video hosting, meaning you won't eat their bandwidth costs. You can also embed their player directly into your site and let them handle the format issue.