Add Video and Audio Contents to HTML

This post is base on Video and audio content on MDN.

In the early days, HTML didn’t have the ability to embed video and audio on the Web, so Flash become popular for handling such content, it worked ok but has a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

HTML5 specification introduced the <video> and <audio> elements.

The <video> Element

An example to embed a video into your webpage using the <video> element:

1
2
3
4
5
6
<video src="video.mp4" controls>
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="video.mp4">link to the video</a>
</p>
</video>

Use the controls attribute to include the browser’s own video control interface, otherwise you can build your own interface to provide a way to start and stop the media, and to adjust the volume, using some JavaScript API.

Compatibility

Different browsers support different video and audio formats, we can do something to prevent this from being a problem.

Some terminologies first:

Formats like MP3, MP4 and WebM are called container formats. They define a structure in which each the audio and video tracks that make up the media are stored, along with metedata describing the media, what codecs are used to encode its tracks, and so forth.

The audio and video tracks in the structure (or container) hold data in the appropriate format for the codec to encode the media. As we talked before, different browsers support different video and audio formats, different containers contain different video and audio formats, so different browsers support different containers (or formats like MP3, MP4 and WebM).

For example:

  • A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers.
  • An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.
  • The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.

Codec

The codecs described above exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large.

Things become more complicated because not only does each browser support a different set of container formats, they also each support a different selection of codecs. In order to maximize the likelihood that your website will work on a user’s browser, you may need to provide each media file you use in multiple formats. If your site and the user’s browser don’t share a media format in common, your media simply won’t play.

Some guides when choosing formats and codecs to reference on MDN:

Solution

To solve these problems in code, we take the src attribute out of the <video> tag and includs seperate <source>s:

1
2
3
4
5
6
7
8
<video>
<source src="chengdu.mp4" type="video/mp4" />
<source src="chengdu.webm" type="video/webm" />
<p>
Browser not support HTML5 video. Here is a
<a href="chengdu.mp4">link to the video</a>
</p>
</video>

The browser will go through the <source> and play the first one that it has the codec to support. If type attribute is not used, browsers will try to play it until they find the playable one. If type is used, browsers can simply judge by the type.

Other <video> Attributes

  • width and height can be used to change the video’s size, the video will keep the aspect ratio whether these values maintain the aspect ratio, some extra top and bootom padding will be added to make it satisfy the width and height.
  • autoplay
  • loop
  • muted turns off the sound by default.
  • poster specifies the cover image.
  • preload is used for buffering large files, can be set to.
    • none doesn’t buffer the file.
    • auto buffers the media file.
    • metadata buffers only the metadata for the media file.

The <audio> element

The <audio> element and the <video> element works very similar, with a few difference that width, height and poster attributes are not supported since there is no visual component in the <audio> elements.

Displaying Text Tracks

The most exciting part comes! Text tracks can not only help people who don’t or can’t hear the audio, but also help you with SEO, since search engine always make use of texts, they even allow search engine to link directly to certain time of your media! To add subtitles/captions to you video or audio, we use the WebVTT (Web Video Text Tracks) format file and the <track> element.

Before exploring the WebVTT file, let’s see the difference between subtitles and captions.

  • subtitles are translations of foreign material, for people who don’t understand the words spoken in the audio.
  • captions are synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can’t hear the audio understand what is going on.

A typical WebVTT file looks like this:

1
2
3
4
5
6
7
8
9
WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

To get this displayed with the HTML media, you need to:

  1. save it as a .vtt file
  2. link the file to the <track> element, <track> should be placed within the <video> element, but after all <source> elements, use the kind attribute to specify whether the file is subtitles or captions, further, use the srclang attribute to tell the browser the language written in the WebVTT file.

An example:

1
2
3
4
5
<video>
<source src="chengdu.mp4" type="video/mp4" />
<source src="chengdu.webm" type="video/webm" />
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
</video>

Miscellaneous

Restarting media playback

Use load() to restart the media:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<audio controls muted>
<source src="song.mp3" type="audio/mp3" />
<p>
Your browser doesn't support HTML5 audio, here is a
<a src="song.mp3">link to the audio.</a>
</p>
</audio>
<div>
<button>Click Me to Replay</button>
</div>

<script>
const audio = document.querySelector("audio");
const btn = document.querySelector("button");
btn.addEventListener("click", () => audio.load());
</script>
</body>

Video and audio content by Mozilla Contributors is licensed under CC-BY-SA 2.5