Audio and Video in HTML5 - Learn HTML

Earlier, native web technologies such as HTML didn't allow embedding video and audio on the Web. Plugin-based technologies became popular for handling such content, but they had many problems, including not working well with HTML/CSS features, security and accessibility issues. Later, HTML5 specification introduced such features with the <video> and <audio> elements.

The <audio> element is used to embed audio files to a web page, and the <video> element is used to embed a video.

How to Add Audio on the Web Page

Before HTML5, audio was added to the page as background sound using the non-standard <bgsound> tag. The file was played while the page was viewed, and the user couldn’t mute the sound. In HTML5, we can embed audio files using the <audio> tag, and there is no need to connect third-party plugins. The audio element can be controlled with HTML or Javascript and styled with CSS.

In the code, the src attribute refers to the URL of the audio file, and the controls attribute adds a control panel (play button, progress bar, volume control).

Audio and Video in HTML5

<audio src="name.ogg" controls></audio>

Warning

Always include the controls attribute unless you provide your own accessible controls in JavaScript. Without it, keyboard and screen-reader users have no way to play, pause, or adjust the volume of the media.

Audio Codecs and Audio File Formats

As not all browsers support all audio formats, the audio file is encoded/decoded with an audio codec (a digital electronic device or computer-based software application that aids in the compression and decompression of a digital audio data). All formats of audio files are added simultaneously via the <source> element with the src attribute.

When defining different file formats, we recommend defining a MIME-type for each file so that the browser can pick the format it supports. The MIME-type is set with the type attribute. The browser uses the first <source> it can play, so order them from the most preferred or most widely supported format to the least.

Example of adding different formats of audio files:

Example of Audio Codecs and Audio File Formats

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
     <source src="/build/audios/audio.mp3" type="audio/mpeg" />
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Try it Yourself »

The most popular audio formats are the following ones:

MP3 – the most popular audio format, which uses lossy compression to reduce the file size. It is supported by virtually every browser, so it is a safe default <source>.

AAC (Advanced Audio Codec) — an MP3 alternative that delivers higher quality at the same or stronger compression. It is also widely supported across modern browsers (served as audio/mp4 or audio/aac).

Ogg Vorbis — a free, open-source format supported in Firefox and Chrome, but not in Safari. It offers good sound quality but is less commonly used by device players.

Codec and browser support, in short: MP3 and AAC are supported almost everywhere, including Safari, so list one of them as a fallback <source>. Ogg Vorbis and WebM (Opus) are royalty-free and play in Firefox and Chrome but not in Safari. A common, safe ordering is the open format first and MP3/AAC last, so every browser finds something it can play.

How to Add Video Files

In previous version of HTML, videos were embedded into the site via third-party plugins, such as QuickTime, RealPlayer or Flash. HTML5 has a new <video> tag, which is used to insert a video into the web page.

In a code, it looks like this:

Audio and Video in HTML5

<video src="example.webm" controls></video>

The src attribute indicates the URL of the file, and the controls attribute displays the playback controls.

Autoplay, the muted attribute, and accessibility

You can ask the browser to start playing as soon as the media is ready with the autoplay attribute. However, modern browsers block autoplay with sound to avoid surprising the user. As a result, autoplay only works reliably when the media is also muted:

<video autoplay muted controls src="example.webm"></video>

Use autoplay sparingly. Media that starts on its own, especially with sound, is disorienting for screen-reader users and people with cognitive or vestibular sensitivities. WCAG requires that any audio playing for more than three seconds has a way to pause or stop it, so keep controls present whenever you use autoplay.

The poster attribute

For <video>, the poster attribute sets a placeholder image shown before the video plays (or while it loads). It gives users a meaningful preview instead of a blank frame:

<video controls poster="/build/images/preview.jpg" src="example.webm"></video>

The preload attribute

The preload attribute hints how much the browser should buffer before the user presses play:

none — do not buffer anything until the user starts playback.
metadata — load only the metadata (duration, dimensions, first frame).
auto — the browser may download the whole file in advance.

preload is only a hint, and browsers may ignore it. On mobile or data-sensitive pages, prefer metadata or none so you do not download large files the visitor may never watch.

Video Codecs and Video File Formats

Each browser supports a particular set of codecs, so to play video everywhere you should provide the file in a few formats. As with audio, every format is listed in its own <source> element, starting with the most preferred one. Each video file must have a MIME-type, set with the type attribute.

To make sure the server hands video files to the browser correctly, you may also need to declare their MIME types in the server configuration (see below).

Example of adding different formats of video files:

Example of Video Codecs and Video File Formats

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Today there are 3 basic video formats: MP4/MPEG-4, OGG and WebM. For video data compression and their playback, we use codecs.

For a video file of the MPEG-4 format, the H.264 video codec and AAC audio codec are used. If you want to use codecs, you must get a license.

For the Ogg video file, use the open-source Theora video codec and the Vorbis audio codec.

For WebM video files, use the VP8 (or VP9) video codec and the Vorbis (or Opus) audio codec. In this case, a license is not required.

Serving the right MIME types

The server tells the browser what kind of file it is sending through the Content-Type response header (the MIME type). If a server sends a media file with the wrong or a missing MIME type, the browser may refuse to play it even when it supports the codec. Many servers are not configured to serve Ogg, WebM, or MP4 out of the box, so you may need to add the mapping yourself.

On Apache, add the following to a .htaccess file in your site folder:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

On Nginx, add the corresponding entries to the types { ... } block (usually in mime.types):

types {
    audio/ogg  oga;
    audio/wav  wav;
    video/ogg  ogv ogg;
    video/mp4  mp4;
    video/webm webm;
}

How to Add Subtitles and Captions

Text tracks such as subtitles and captions are added to audio and video files via the <track> element, which is placed as a child of <audio> or <video>. Each track points to a WebVTT (.vtt) file.

Providing captions for prerecorded media is an accessibility requirement: a <track kind="captions"> satisfies WCAG 2.1 Success Criterion 1.2.2, which deaf and hard-of-hearing users rely on to understand the audio.

The kind attribute tells the browser what type of text track it is:

subtitles — translations or transcriptions of dialogue for viewers who can hear but do not understand the language. This is the default.
captions — like subtitles, but also describe sound effects and other audio cues for viewers who cannot hear.
descriptions — a text description of the video content, intended to be read aloud for users who cannot see the screen.
chapters — chapter titles used to navigate the media.
metadata — tracks used by scripts and not displayed to the user.

Example of adding captions to a video file:

Captions for a video file with the track element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
    </video>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Tip

To align the video player on the page, place the <video> element into the <div> container, assign it a class, and then define the width and the height for it, corresponding to the size of your video.

Audio and Video Attributes

Attribute	Description
autoplay	Allows the audio/video to automatically start playing while the rest of the page is loading.
controls	Allows controlling the audio/video playback, including volume, pause/resume playback.
loop	Allows the audio/video to play again whenever it finishes.
muted	Makes the media play with the turned off sound by default.
preload	Specifies buffering large files. It can have one of these values: "none" (does not buffer the file), "auto" (buffers the media file), or "metadata" (buffers only the metadata for the file).
src	The URL of the audio/video to embed. It is optional.
poster	This is a URL of an image displayed before the video is played.
width	Specifies the display area width of the video, in CSS pixels.
height	Specifies the display area height of the video, in CSS pixels.

Practice

Which two HTML5 elements embed media directly, without plugins?

The audio element and the video elementThe embed element and the file elementThe multimedia element and the sound elementThe mp3 element and the mp4 element

Practice

For autoplay to work reliably in modern browsers, the media should also be:

Muted, because browsers block autoplay that has soundSet with the loop attributeGiven a poster imagePreloaded with preload set to auto

Practice

Which track kind satisfies WCAG 1.2.2 by describing dialogue and sound effects for deaf users?

kind set to captionskind set to chapterskind set to metadatakind set to descriptions