HTML Media

HTML Audio and Video

Learning Objectives

• Embed audio and video without requiring a third-party player.
• Understand source and track.
• Provide captions and fallback content.
• Choose appropriate playback and loading options.

1. Embedding Audio

<audio controls>
    <source src="lesson.mp3" type="audio/mpeg">
    <source src="lesson.ogg" type="audio/ogg">
    Your browser does not support embedded audio.
</audio>

The browser selects a supported source. controls enables the browser's playback controls.

2. Embedding Video

<video controls width="640" height="360"
       preload="metadata"
       poster="lesson-cover.jpg">
    <source src="lesson.mp4" type="video/mp4">
    <source src="lesson.webm" type="video/webm">
    Your browser does not support embedded video.
</video>

poster specifies an image displayed before video playback. preload is a hint about resource loading, not a guarantee. Choose source formats based on codec support and your audience's browser requirements.

3. Important Media Attributes

• controls: displays native playback controls.
• autoplay: requests automatic playback, subject to browser policies.
• muted: initially mutes the media.
• loop: repeats playback.
• preload: hints whether metadata or media should be loaded early.
• poster: specifies a video preview image.
• width and height: communicate video display dimensions.

4. Captions and Subtitles With track

<video controls width="640">
    <source src="lesson.mp4" type="video/mp4">
    <track
        kind="captions"
        src="captions-en.vtt"
        srclang="en"
        label="English"
        default>

track supplies timed text such as captions, subtitles, descriptions or chapters. WebVTT files commonly use the .vtt extension.

Example WebVTT File

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the HTML course.

00:00:04.500 --> 00:00:07.000
Today we will learn about video.

Captions include relevant spoken dialogue and important non-speech audio information. Subtitles generally focus on dialogue, often translating it into another language.

5. Accessible Media

• Provide captions for prerecorded video with audio when required.
• Provide transcripts for audio where appropriate.
• Do not rely on audio alone to communicate essential information.
• Avoid unexpected autoplay with sound.
• Make controls usable with a keyboard.

6. Common Mistakes

• Using a file path that does not exist.
• Assuming every browser supports every media codec.
• Providing video without captions.
• Using autoplay without considering user experience and browser restrictions.
• Confusing source with track.

Practice Exercises

1. Embed an audio lesson with controls.
2. Embed a video with a poster image.
3. Add an English caption track using a WebVTT file.
4. Test the player in two different browsers.

Section 13 Revision Quiz