Adding Video and Audio to a Web Page

To add video and audio to a web page, use the HTML video and audio elements with controls, multiple sources, captions, a poster image and smart preload settings.

How to add a video in HTML

The <video> element plays a video file that you host yourself. The most important attribute is controls: it shows the play button, the timeline and the volume. Without it, users have no way to play or pause the video.

<video src="videos/latte-art.mp4" controls width="640" height="360" poster="images/latte-art-poster.jpg">
  Your browser cannot play this video. <a href="videos/latte-art.mp4">Download the video</a> instead.
</video>

You will see a video player with a picture on it. The poster is the image shown before the video starts, like a cover on a DVD box. The width and height reserve space so the page doesn't jump while the video loads. The text inside the element appears only in very old browsers that can't play video.

Offering multiple sources

Not every browser supports every video format. Instead of src on the video, you can list several <source> elements. The browser goes down the list and plays the first one it can. Put the smaller, more modern format first.

• MP4 (H.264 video) plays in every modern browser. It is the safe choice.
• WebM (VP9 or AV1 video) files are often smaller, and support is now very good.

The type attribute tells the browser the format, so it doesn't download files it can't play.

Adding captions with the track element

Captions are the words spoken in the video, shown as text on the screen. They help deaf and hard-of-hearing users, people watching without sound on a train, and people learning a language. They are written in a simple text file format called WebVTT (with the .vtt extension).

Add them with the <track> element inside <video>:

• kind="captions" (or kind="subtitles" for translations).
• src is the .vtt file.
• srclang is the language code, like en or es.
• label is the name shown in the captions menu.
• default turns the track on at the start.

<video controls width="640" height="360" poster="images/latte-art-poster.jpg" preload="metadata">
  <source src="videos/latte-art.webm" type="video/webm">
  <source src="videos/latte-art.mp4" type="video/mp4">
  <track kind="captions" src="captions/latte-art-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="captions/latte-art-es.vtt" srclang="es" label="Español">
  <p>Your browser cannot play this video. <a href="videos/latte-art.mp4">Download the MP4</a>.</p>
</video>

The browser picks the WebM file if it can, otherwise the MP4. English captions show by default, and users can switch to Spanish subtitles in the player menu. A WebVTT file looks like this:

WEBVTT

00:00:01.000 --> 00:00:04.000
First, pour the milk slowly into the centre.

00:00:04.500 --> 00:00:08.000
Then move the jug from side to side to make the pattern.

Note: Captions files usually need to come from the same website as your page. If you open your HTML file directly from your computer (with a file:// address), some browsers won't load them. Use a local web server to test.

Autoplay, muted and preload rules

Browsers block videos that start with sound by themselves, because surprise noise annoys users. A video can only autoplay if it is muted. On iPhones, add playsinline so the video plays inside the page instead of jumping to full screen. This is common for short background clips:

<video autoplay muted loop playsinline width="1280" height="720" poster="images/beach-poster.jpg">
  <source src="videos/beach-waves.mp4" type="video/mp4">
</video>

This video starts by itself, with no sound, and loops forever. Use autoplay rarely. Moving content can distract people, and it uses mobile data. If a video autoplays, keep controls or another way to pause it.

The preload attribute tells the browser how much to download before the user presses play:

• preload="none": download nothing. Best for pages with many videos.
• preload="metadata": download only the length and size. A good default.
• preload="auto": the browser may download the whole file.

How to add audio in HTML

The <audio> element works just like <video>, but with no picture. Use it for podcasts, music or sound clips.

<figure>
  <figcaption>Episode 12: Starting your first vegetable garden (24 minutes)</figcaption>
  <audio controls preload="none">
    <source src="audio/episode-12.mp3" type="audio/mpeg">
    <source src="audio/episode-12.ogg" type="audio/ogg">
    <a href="audio/episode-12.mp3">Download episode 12 (MP3)</a>
  </audio>
  <p><a href="transcripts/episode-12.html">Read the transcript</a></p>
</figure>

You will see a podcast title and a small audio player with play, timeline and volume. MP3 works everywhere. Nothing downloads until the user presses play, because of preload="none".

Tip: For audio-only content, give users a written transcript (all the words as text). It helps deaf users and is also great for SEO, because search engines can read the text.

Practice exercise

Add a short product video to a page. Give it controls, a poster image, two <source> elements (WebM and MP4), English captions with default, and preload="metadata". Then add an <audio> player for a short welcome message below it.

Hint: Write your own .vtt file with two or three lines of captions, following the WebVTT example above, and test with a local server.

Key takeaways

• Use <video> and <audio> with controls so users can play and pause.
• List several <source> elements with type; MP4 is the safe fallback.
• Add captions with <track kind="captions"> and a WebVTT file.
• Autoplay only works when the video is muted; use it rarely.
• Choose preload carefully to save users' data.