Video and audio properly

The beginner tutorials showed how to embed a video or audio file with <video> and <audio>. What comes next: captions and subtitles, poster images, sensible fallbacks, and the attributes that stop media elements from being awkward on real sites.

Multiple formats with `<source>`

Browsers do not all support the same codecs. List several <source> elements and let the browser pick the first one it can play:

<video controls width="800" height="450" poster="intro-poster.jpg">
    <source src="intro.webm" type="video/webm">
    <source src="intro.mp4" type="video/mp4">
    <p>Your browser does not support HTML video.
       <a href="intro.mp4">Download the video</a> instead.</p>
</video>

The text inside <video> (but outside <source>) is your fallback – shown when the element is not supported or no source matches. A download link is more helpful than a bare apology.

The `poster` attribute

poster points to an image displayed before the user presses play. Use a frame that represents the content – not a random stock photo that misleads people about what they will watch.

Posters should be reasonably sized (they are not a substitute for lazy-loading a huge video file) and should include the same kind of meaningful imagery you would expect in a thumbnail.

Captions and subtitles with `<track>`

Deaf and hard-of-hearing users, people watching without sound, and non-native speakers all benefit from captions. Subtitles (usually for translation) use the same mechanism. Add tracks inside the <video> element:

<video controls>
    <source src="lesson.mp4" type="video/mp4">
    <track kind="captions" src="lesson-en.vtt" srclang="en" label="English" default>
    <track kind="subtitles" src="lesson-es.vtt" srclang="es" label="Español">
    <track kind="descriptions" src="lesson-desc.vtt" srclang="en" label="Audio description">
    <p><a href="lesson.mp4">Download the video</a></p>
</video>

Track files are usually WebVTT (.vtt) – plain text with timestamps. The kind attribute tells the browser how to offer the track:

captions – dialogue and important sounds for people who cannot hear the audio.
subtitles – translation of dialogue when the audio language differs from the viewer’s.
descriptions – narration of visual action for blind users (often handled separately from dialogue captions).
chapters – navigation markers within the video.
metadata – data for scripts; not usually shown in the default player UI.

default on one track turns it on when playback starts (only use it on one track per kind). srclang and label populate the player’s track menu.

A minimal WebVTT example

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to Going further with HTML.

00:00:04.500 --> 00:00:08.000
Today we are looking at video accessibility.

Each cue is a time range followed by the text to display. Tools and services can generate VTT files from transcripts; for short teaching videos, writing them by hand is manageable.

Useful `<video>` attributes

controls – show the browser’s play/pause, volume, and fullscreen UI.
preload="none", metadata, or auto" – hint how much to buffer before play. none saves bandwidth on pages with many clips.
playsinline – prevents iOS from forcing fullscreen on play (important for embedded clips).
muted – required for autoplay to work in most browsers.
loop – restart when finished.

Autoplay with sound is widely blocked – and annoying when it is not. If you autoplay a background loop, mute it, keep it short, and respect prefers-reduced-motion in your CSS or JS layer.

Audio elements

<audio> follows the same pattern without a visual poster:

<figure>
    <figcaption>Episode 12 - Tables and accessibility</figcaption>
    <audio controls preload="metadata">
        <source src="episode-12.mp3" type="audio/mpeg">
        <source src="episode-12.ogg" type="audio/ogg">
        <p>Your browser does not support audio playback.
           <a href="episode-12.mp3">Download the MP3</a>.</p>
    </audio>
</figure>

Podcasts and music clips still deserve a text alternative – a transcript link nearby is the usual approach when captions inside the player are not supported for audio-only content.

Hosted vs self-hosted

Large video files eat bandwidth. For most marketing and teaching sites, hosting on YouTube or Vimeo and embedding their player is the practical choice – they handle transcoding, captions UI, and adaptive streaming.

Self-hosting suits short loops, controlled course material, or when you need full control over the player and captions files. If you self-host, you are responsible for file size, formats, and accessible tracks.

Embedding third-party players

An <iframe> embed from a video platform still needs an accessible title on the iframe and, where possible, captions enabled in the platform’s settings. Do not rely on autoplaying embeds with no user control.

<iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Intermediate HTML - video and audio tutorial"
    width="560"
    height="315"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>

Checklist

Multiple sources or a widely supported format plus fallback link.
Captions for speech-heavy video (aim for captions on all teaching content).
Poster image that honestly previews the content.
controls unless there is a very good reason – and then provide another way to control playback.
Transcript or description available when the media carries information not repeated elsewhere on the page.

Video and audio are not decorative extras on a learning site. Build them so the content is reachable, understandable, and usable when sound is off or when the browser falls back to a plain download link.

Video and audio properly – tracks, captions, poster, fallbacks