Courses / HTML · Advanced

HTML Media

Self-paced 40 sections 54 people viewed this
html html5 html tutorial learn html web development semantic html html forms html accessibility html seo html interview questions html projects beginner to advanced html

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

  1. Which attribute displays native playback controls?
    1. controls
    2. caption
    3. scope
  2. Which element provides alternative media sources?
    1. source
    2. footer
    3. label
  3. Which element provides timed text tracks?
    1. track
    2. figure
    3. summary
  4. True or false: autoplay is guaranteed to work with sound in every browser.
  5. Which file format is commonly used for web captions?
    1. WebVTT
    2. SQL
    3. CSS

Answer Key and Explanations

  1. a. controls enables the native media controls.
  2. a. source offers media resource alternatives.
  3. a. track supplies timed text associated with media.
  4. False. Browser autoplay policies can block playback, particularly with sound.
  5. a. WebVTT is a common format for timed text tracks.