Just as we can embed images in our web pages with the <img /> tag, we can (almost) just as easily insert audio and video web players elements with <audio> and <video>.

This is an HTML novelty, since before the current version - HTML 5 - you had to involve a plugin such as Flash or Silverlight, solutions which come with their own sets of inconveniences.

In this chapter we we'll learn how to create our own audio and video players, this means we will be able to play our own audio and video content on our web pages with these new HTML 5 elements... just like most video streaming sites.

Why did I wait until now to introduce these elements?

Audio and video sharing aren't often used because of the size of multimedia files.

Each time a user wants to watch your video or listen to your audio content, they will have to load a file that is often much heavier, thus requiring more bandwidth, than the web page itself. Which is why webmasters often prefer third-party solutions, such as the aforementioned video streaming sites, to handle their multimedia content.

Nevertheless, you might want to embed your own audio tracks or videos somewhere in your website at some point or another, so it's always best to know how these elements work and how to use them yourself.

And thanks to HTML 5, this is incredibly easy to do.

Audio and video formats

Before diving into the implementation of our audio and video players, we should talk about audio and video formats.

If you remember, when we talked about images in one of the first chapters of this tutorial, we spent a little while presenting the three main image formats.

The same dilemma exists for audio and video content: what are the different formats and which one should I use?

And if learning about a bunch of new formats wasn't enough, there is an added difficulty when dealing with audio and video data: not all formats are supported by all browsers.

Better get started.

Audio formats

There are many formats used for storing digital audio data, and most of those used with HTML5 are naturally compressed to reduce the file size.

We will cover the four formats used most often on websites.

• MP3: one of the most widely used formats, compatible with pretty much every modern browser.
• AAC: mainly used by Apple via iTunes, also compatible with all modern browsers.
• OGG: a free format, not protected by patent, but also incompatible with IE, Edge and Safari.
• WAV: compatible with all excepted IE, this is an uncompressed format and should therefore be avoided.

You can't really go wrong with MP3, as only older versions of Firefox don't support it.

But you can provide a OGG alternative as we'll see later on in this tutorial.

Here is a compatibility chart.

Avoid OGG alone due to compatibility and WAV because it's an uncompressed (larger) file format.

Compatibility between browsers and audio formats may change in the future, so if you're reading this tutorial a year after publication keep in mind that things may have evolved a little.

There are of course other audio formats, but they are very seldom used on HTML web pages.

Video formats

Just as with audio, there are different kinds of video formats, often recognizable by their file extension.

We will cover the three most used ones: MP4, WebM and OGG.

You may also have heard of the AVI format, it isn't used in HTML5 as it is unsupported by most browsers.

Here is a compatibility chart for video formats.

The best option is to go with MP4 as it works on all modern browsers.

An audio element

Now that we've covered the theory of audio and video files, let's move on to the practice.

To insert an audio element in our web page we will be using the <audio> tag.

We must also specify the location of the audio content with the src attribute, just like with images.

Here is a code example of a basic audio player in HTML.

<audio src="siteraw.mp3"></audio>

It's pretty cool up until you load your page and notice a very minor issue: nothing shows up.

It's also very normal, as this code only asks the browser to fetch the metadata (information about the file such as its length, etc) and do nothing else.

To display an actual audio player we must add the controls attribute.

It doesn't require a value.

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

The visual appearance of the audio player will vary from browser to browser.

Here are a few examples of what you obtain by default.

You can change the design of the audio element, add or remove buttons and stylize the player, but it requires a scripting language such as Javascript in addition to CSS so we won't cover it here.

We can, however, customize our audio player by adding the following attributes.

• controls : adds play and pause buttons, a volume control and everything else you would expect on a multimedia player.
• autoplay : automatically starts playing once the element is loaded (not recommended as it's very annoying).
• loop : the audio file will be played in a loop, once you reach the end it will start back at the beginning.
• muted : the audio output starts muted.
• preload : determines whether the audio content can be preloaded. It can take the following values: auto to load the entire file, metadata to load only the metadata and none to preload nothing and save a little more bandwidth. You can't force the browser to preload your content, it's always the browser that decides whether to do so or not (for example, most mobile browser will never preload anything).

You can try these out to see how they work in greater details.

That's because unlike with <img />, a standalone tag, you can add content inside the <audio> element.

Said content will only be displayed if the browser doesn't support the <audio> feature, allowing you to display an error message and/or provide a fallback solution.

<audio src="siteraw.mp3" controls>

    <p>Your browser sucks! Stop using noob browsers!</p>

    <p>You can still <a href="siteraw.mp3">download the audio file</a>.</p>

</audio>

Multiple audio formats

It's possible that some browsers support the <audio> element but not the MP3 format (it happens with some older versions of Firefox).

In this case, rather than a cumbersome fallback solution we can simply provide an alternative file with a different format.

To do so we won't apply a src attribute to the audio player itself, instead we will add one or more <source> elements inside the <audio> tag.

<audio controls>

    <source src="siteraw.mp3"></source>

    <source src="siteraw.ogg"></source>

</audio>

The browser will automatically interpret whichever format it recognizes.

Note that you can also add an error notice or fallback with this setup, you just have to add your content after the <source> tags.

A video element

Just like we did with <audio>, we can add a video player to our web page using the <video> element.

We'll need the src attribute to specify the location of our video file.

<video src="siteraw.mp4"></video>

Once again, you'll be disappointed if you leave your code like that: right now it only fetches the video metadata.

Let's add a controls attribute to display our video player.

<video src="siteraw.mp4" controls></video>

The result is shown in the figure below.

There are other attributes you can play with, most of which are similar to those of the audio element.

• controls : adds play and pause buttons, a volume control, full-screen mode and so on.
• autoplay : the video starts playing automatically once it's done loading.
• loop : the video will be played in a loop, starting over each time it's finished.
• muted : the audio output of the video starts muted.
• preload : works just like with audio, same values. If nothing is specified the browser will just use the first frame of the video.
• poster : the location of the "thumbnail" image to be shown until the video is played.

As with the audio player, you can provide content inside the <video> tag that will only be displayed if the element is unsupported and the browser doesn't recognize the tag.

Multiple video formats

And just like with our audio player, we can provide several file with different formats to allow the browser to pick whichever one it can read.

The methodology is exactly the same, we just use the <source> tag instead of the src attribute.

<video poster="siteraw.png" controls>

    <source src="siteraw.mp4"></source>

    <source src="siteraw.ogg"></source>

</video>

It's a common practice to indicate the primary file first and add the alternatives after, as we did in our example.

Text transcript

There is one last feature we need to cover: text transcripts.

You can provide subtitles or any other type of timed text overlays to enhance your videos.

It's a little more intricate than what we've seen up until now as you'll need to create a file containing your desired text with a specific format.

But first, let's introduce a new HTML element: <track>.

It's a child element of <video>, meaning it goes inside, and it needs a src attribute that points towards the location of the text transcript file.

This file should be in WebVTT format (extension .vtt). We don't have one for the moment so just enter anything you want.

Here is my HTML code.

<video src="siteraw.mp4" controls>

        <track kind="subtitles" src="siteraw.vtt"></track>

</video>

I also gave it a kind attribute which indicates the type of text to be displayed.

This attribute is only useful for semantic purposes and can take the following values: captions, chapters, descriptions, metadata or subtitles.

You aren't limited to only one <track>.

For instance, if you have several language options for your subtitles you can add several <track> elements one after the other.

In this case, use the default attribute (it doesn't require a value) on one of them to make it the default element.

<video src="siteraw.mp4" controls>

        <track kind="subtitles" src="siteraw_en.vtt" default></track>

        <track kind="subtitles" src="siteraw_de.vtt"></track>

</video>

That's because you don't have a WebVTT file.

Let's create one.

The transcript file

The first step is obviously to create a WebVTT file, in my case I'll name it siteraw.vtt.

A WebVTT (Video Text Tracks) file contains cues, written in a specific format, that communicate to the browser what text to display as well as how and when to display it.

Here is the format of a generic WebVTT file.

WEBVTT

{START} --> {END}
{TEXT}

Every file must start with the WEBVTT string.

After that, it's just a matter of providing the start and end times of your text on one line, immediately followed on the next line by the text itself.

You can repeat this two-line process for each individual subtitle or other type of text.

WEBVTT

00:00:01.000 --> 00:00:05.000
Why is SiteRaw so awesome?

00:00:06.000 --> 00:00:15.000
Because <i>SiteRaw</i> is the most awesome website!

In the above code, we defined the first subtitle as "Why is SiteRaw so awesome?" and set it to appear on the video for four seconds, between the first and fifth second.

Same with the second subtitle which will appear between the sixth and fifteenth second.

As you can see from the last line, you can include formatting tags in your subtitles: <b>, <i> and <u> for bold, italic and underline respectively.

Here is what the result looks like.

You can also customize the subtitles with CSS with the ::cue pseudo-element.

Note that not all CSS properties are applicable here, so limit yourself to those relevant to text and background stylization.

video::cue {
    background: greenyellow;
    color: black;
}

Try it out.