Audio and Video

🎬 Media and Accessibility: Audio and Video

The Story of the Magic Music Box

Imagine you have a magic box that can play music and show movies. But this isn’t just any box — it’s a smart box that knows how to share sounds and pictures with everyone, even people who can’t hear or see well.

That’s exactly what HTML’s <audio> and <video> elements do! They’re your magic boxes for the web.

🎵 The Audio Element

What is it?

Think of <audio> like a tiny radio you can put anywhere on your webpage. It plays sounds — music, podcasts, animal noises, anything!

<audio src="song.mp3" controls></audio>

What happens?

• A play button appears
• People can click it to hear your sound
• It’s that simple!

⚙️ Audio Element Configuration

Your audio player has superpowers you can turn on or off:

<audio
  src="background.mp3"
  controls
  loop
  muted>
</audio>

Think of it like a TV remote:

• controls = Show the remote
• autoplay = TV turns on by itself
• loop = The show restarts when it ends
• muted = Volume at zero

🎯 Audio Sources and Fallback

The Problem

Not every browser speaks the same language! Some understand MP3, some prefer OGG, others like WAV.

The Solution: Multiple Sources

Give your browser choices — like offering both pizza AND pasta at dinner:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.wav" type="audio/wav">
  Your browser can't play audio.
</audio>

How it works:

1. Browser tries MP3 first
2. Can’t play it? Tries OGG
3. Still stuck? Tries WAV
4. Nothing works? Shows the text message

graph TD
    A["Browser loads audio"] --> B{Can play MP3?}
    B -->|Yes| C["🎵 Play MP3"]
    B -->|No| D{Can play OGG?}
    D -->|Yes| E["🎵 Play OGG"]
    D -->|No| F{Can play WAV?}
    F -->|Yes| G["🎵 Play WAV"]
    F -->|No| H["📝 Show fallback text"]

📺 The Video Element

What is it?

Just like <audio> is a radio, <video> is a TV you put on your webpage!

<video src="movie.mp4" controls></video>

That’s it! You now have a movie player on your page.

⚙️ Video Element Configuration

Videos have the same superpowers as audio, plus extra ones:

<video
  src="nature.mp4"
  controls
  width="640"
  height="360"
  autoplay
  muted
  loop>
</video>

Pro tip: Browsers often block autoplay unless you also add muted. It’s like a rule: “You can play automatically, but quietly!”

🎬 Video Sources and Fallback

Same idea as audio! Different browsers like different video formats:

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser doesn't support video.
</video>

Common video formats:

• MP4 — Works almost everywhere
• WebM — Smaller files, great quality
• OGG — Open and free

🖼️ Video Poster Attribute

What is a poster?

Before someone presses play, they see a preview image — like a movie poster at the theater!

<video
  src="adventure.mp4"
  controls
  poster="adventure-thumbnail.jpg">
</video>

Without a poster: Black screen or first frame (often dark/blurry)

With a poster: Beautiful image that says “Click me!”

Good Poster Tips:

• Use an exciting moment from the video
• Make sure it’s the right size
• Keep file size small (JPEG works great)

📝 The Track Element for Captions

Making Videos for Everyone

Some people:

• Can’t hear well
• Speak a different language
• Watch in quiet places (libraries, offices)

Captions help them all!

How to Add Captions

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

The Track Attributes

Types of Tracks (kind)

• captions — For deaf/hard of hearing (includes sounds like “[door slams]”)
• subtitles — Translations to other languages
• descriptions — Describes what’s happening visually
• chapters — Navigation points in long videos
• metadata — Hidden info for scripts

What’s a VTT File?

It’s a simple text file that tells the browser:

• WHEN to show text
• WHAT text to show

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello! Welcome to our video.

00:00:05.000 --> 00:00:08.000
Today we're learning about HTML.

🌟 Putting It All Together

Here’s a fully accessible video player:

<video
  controls
  width="640"
  height="360"
  poster="thumbnail.jpg">

  <!-- Video sources for compatibility -->
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">

  <!-- Captions for accessibility -->
  <track
    src="english.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default>
  <track
    src="spanish.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish">

  <!-- Fallback message -->
  Sorry, your browser can't play videos.
</video>

graph TD
    A["Video Element"] --> B["Poster Image"]
    A --> C["Source 1: MP4"]
    A --> D["Source 2: WebM"]
    A --> E["Track: English Captions"]
    A --> F["Track: Spanish Subtitles"]
    A --> G["Fallback Text"]

🎯 Quick Summary

🚀 You Did It!

You now know how to:

✅ Add audio to any webpage ✅ Configure audio with controls, loop, and more ✅ Provide multiple audio sources ✅ Add video to your pages ✅ Configure video with size, autoplay, and poster ✅ Provide multiple video sources ✅ Make videos accessible with captions

Remember: The best websites work for EVERYONE. Adding captions and fallbacks isn’t just nice — it’s the right thing to do!

Now go make some media magic! 🎬✨