Lesson 14: Audio/Video

You can embed sound and video directly into a webpage using the audio and video tags. We’ll explore how to embed them, set up controls, and make them accessible.

Audio and video tags#

The <video> and <audio> tags let you add media players directly to your webpage using a src attribute. You can also place multiple <source> tags inside them to offer the browser different file formats. Use the <audio> tag for sound files and the <video> tag for moving images.

The tags support attributes like controls, autoplay, loop, muted, and preload. The <video> tag also accepts height, width, and poster attributes.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

This video example uses a single source pointing to a WebM file. The poster attribute displays an image while the video loads. The controls attribute gives the user playback buttons.

Always include fallback text between the tags. If the browser doesn’t support HTML5 video, it will display the fallback text instead. The closing video tag is required even if you don’t have fallback text.

If you omit the src attribute from the opening tag, you can use <source> tags inside instead.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm" />
  <source src="videos/machines.mp4" type="video/mp4" />
  <source src="videos/machines.ogv" type="video/ogv" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="vtt/subtitles-en.vtt"
    default
  />
  <track
    label="Francais"
    kind="subtitles"
    srclang="fr"
    src="vtt/subtitles-fr.vtt"
  />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Each <source> child has a src attribute pointing to the file. The type attribute tells the browser the format of the file. This stops the browser from downloading files it can’t play.

By default, the browser shows the first frame of the video. You can override this with the poster attribute to show a custom image while the video downloads.

Always define the size of the video. If the poster image and the video have different sizes, the page layout might jump when the video starts playing.

Make sure to include the controls attribute. Without it, users can’t pause the media, adjust the volume, or enter full screen. Omitting controls is a bad user experience, especially if you autoplay the media. Many browsers block videos from playing automatically unless they’re muted.

Subtitles and captions#

You can add text like subtitles or captions using the <track> element. These files must be in a standard WebVTT format.

<track
  label="English"
  kind="subtitles"
  srclang="en"
  src="vtt/subtitles-en.vtt"
  default
/>

There are different values for the track kind attribute. Use subtitles for dialogue translation and captions to transcribe dialogue along with sound effects.

Adding subtitles and captions makes your media accessible. It helps people in noisy rooms, users with broken speakers, and anyone with hearing loss.

Background videos#

Designers often want muted, auto-playing background videos that loop forever.

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm" />
  <source src="videos/machines.mp4" type="video/mp4" />
  <source src="videos/machines.ogv" type="video/ogg" />
</video>

Background videos aren’t accessible on their own. Don’t put important information in a background video without offering playback controls or captions. Since this video is purely decorative, we add role="none" and skip fallback text.

To save bandwidth, you should remove the audio track from the video file before uploading it.

If a video loops forever, you must give the user a way to pause it. The easiest way is to show the default controls.

Custom controls#

If you want to build custom play buttons instead of using the browser defaults, you’ll need JavaScript. For now, it’s best to stick to the built-in controls because they are easier to set up and work automatically with screen readers.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).