Audio and Video Implementation

Introduction to HTML Multimedia

The web has evolved far beyond static text and images. Modern websites incorporate rich multimedia elements like audio and video to create more engaging, informative, and accessible user experiences. Whether you're building an educational platform, a news site, a portfolio, or an entertainment service, understanding how to properly implement audio and video content is essential.

HTML5 introduced native support for audio and video through the <audio> and <video> elements, eliminating the need for third-party plugins like Flash. These powerful elements provide a standardized way to embed multimedia content with cross-browser compatibility, along with a rich set of attributes and APIs for customization and control.

In this lecture, we'll explore how to implement audio and video elements in HTML, understand their attributes and features, explore various formats and codecs, and learn best practices for accessibility, performance, and user experience.

graph TD A[HTML Multimedia] --> B[Audio Implementation] A --> C[Video Implementation] B --> B1[Audio Element] B --> B2[Audio Formats] B --> B3[Audio Attributes] B --> B4[Audio Controls] C --> C1[Video Element] C --> C2[Video Formats] C --> C3[Video Attributes] C --> C4[Video Controls] A --> D[Accessibility] A --> E[Advanced Techniques] A --> F[Media APIs]

HTML Audio Implementation

The <audio> element allows you to embed sound content in your web pages. Let's start with the basic implementation and then explore the various features and options.

Basic Audio Element

The simplest implementation of the audio element looks like this:

<audio src="audio-file.mp3" controls></audio>

Unlike the <img> element, the <audio> element requires a closing tag. This is because the audio element can contain nested elements like multiple <source> elements and fallback content.

Multiple Source Files

Not all browsers support the same audio formats, so it's good practice to provide multiple source files. The browser will use the first format it supports:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  <p>Your browser does not support the audio element. <a href="audio-file.mp3">Download the audio</a> instead.</p>
</audio>

The content between the opening and closing <audio> tags is displayed only if the browser doesn't support the audio element, providing a fallback experience.

Audio Attributes

The <audio> element supports several attributes that control its behavior:

Attribute	Value	Description
`src`	URL	Specifies the URL of the audio file
`controls`	boolean	Displays the browser's built-in playback controls
`autoplay`	boolean	Automatically starts playing the audio when the page loads (not recommended for accessibility reasons)
`loop`	boolean	Makes the audio repeat indefinitely
`muted`	boolean	Mutes the audio output (it can still play)
`preload`	none, metadata, auto	Indicates how the audio should be loaded when the page loads

Example with multiple attributes:

<audio controls preload="metadata" loop>
  <source src="background-music.mp3" type="audio/mpeg">
  <source src="background-music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

The `preload` Attribute

The preload attribute deserves special attention as it impacts both user experience and page performance:

preload="none": Suggests that the browser should not preload the audio at all. Use this when it's unlikely the user will play the audio.
preload="metadata": Suggests that the browser should load only metadata (e.g., length) when the page loads. This is a good compromise.
preload="auto": Suggests that the browser can preload the entire audio file. Use this when it's very likely the user will play the audio.

<!-- For background music that the user might not play -->
<audio src="background-music.mp3" controls preload="none"></audio>

<!-- For a main podcast episode that's the focus of the page -->
<audio src="podcast-episode.mp3" controls preload="auto"></audio>

Note: Browsers may ignore the preload attribute based on various factors, including user settings, network conditions, and whether the audio element is visible on the page.

Audio Formats and Codec Support

Different browsers support different audio formats. To ensure maximum compatibility, it's important to understand the common formats and their browser support.

Format	MIME Type	Browser Support	Features
MP3 (MPEG Audio Layer III)	`audio/mpeg`	All modern browsers	Widely supported, good compression, some patent concerns
OGG Vorbis	`audio/ogg`	Firefox, Chrome, Opera	Open format, good quality/compression ratio
WAV (Waveform Audio)	`audio/wav`	All modern browsers	Uncompressed, high quality, large file size
AAC (Advanced Audio Coding)	`audio/aac`	Most modern browsers	Better quality than MP3 at the same bit rate
FLAC (Free Lossless Audio Codec)	`audio/flac`	Chrome, Firefox, Opera, Edge	Lossless compression, higher quality but larger than MP3

For maximum compatibility, it's recommended to provide at least MP3 and OGG formats:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Choosing the Right Format

When deciding which formats to use, consider these factors:

MP3: Best for general-purpose audio because of its universal support
OGG: Good as a fallback for browsers that might have issues with MP3
WAV: Best for short sound effects or when quality is paramount
AAC: Good for higher quality audio in smaller file sizes
FLAC: Best for music where audio quality is critical (but consider bandwidth costs)

graph LR A[Audio Format Selection] --> B{High Quality Need?} B -->|Yes| C{Bandwidth Concern?} B -->|No| D[MP3] C -->|Yes| E[AAC] C -->|No| F{Lossless Required?} F -->|Yes| G[FLAC] F -->|No| H[OGG Vorbis]

HTML Video Implementation

The <video> element allows you to embed video content in your web pages. Like the audio element, it supports multiple source formats and provides controls for playback.

Basic Video Element

The simplest implementation of the video element looks like this:

<video src="video-file.mp4" controls width="640" height="360"></video>

Similar to the <audio> element, the <video> element requires a closing tag to accommodate nested elements and fallback content.

Multiple Source Files

Providing multiple video formats ensures better cross-browser compatibility:

<video controls width="640" height="360">
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  <p>Your browser does not support the video element. <a href="video-file.mp4">Download the video</a> instead.</p>
</video>

Video Attributes

The <video> element supports various attributes:

Attribute	Value	Description
`src`	URL	Specifies the URL of the video file
`controls`	boolean	Displays the browser's built-in playback controls
`width`, `height`	pixels	Specifies the dimensions of the video player
`autoplay`	boolean	Automatically starts playing the video when the page loads (use with caution)
`loop`	boolean	Makes the video repeat indefinitely
`muted`	boolean	Mutes the audio output of the video
`poster`	URL	Specifies an image to show before the video plays
`preload`	none, metadata, auto	Indicates how the video should be loaded when the page loads
`playsinline`	boolean	Allows the video to play inline on iOS devices instead of entering fullscreen mode

Example with multiple attributes:

<video controls width="640" height="360" poster="video-thumbnail.jpg" preload="metadata" playsinline>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  Your browser does not support the video element.
</video>

The `poster` Attribute

The poster attribute is particularly useful for videos. It specifies an image to display before the video starts playing, which can:

Provide a visual preview of the video content
Improve page load performance by not loading video data immediately
Create a more polished user experience

<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="promotional-video.mp4" type="video/mp4">
  <source src="promotional-video.webm" type="video/webm">
</video>

Best Practice: Always include a poster image that represents the video content well. This is especially important for videos that don't autoplay.

Video Formats and Codec Support

Like audio, video formats have varying levels of browser support. Understanding the common formats and their use cases is crucial for effective implementation.

Format	MIME Type	Container	Common Codecs	Browser Support
MP4	`video/mp4`	MPEG-4	H.264, AAC	All modern browsers
WebM	`video/webm`	WebM	VP8/VP9, Vorbis/Opus	Chrome, Firefox, Opera, Edge
Ogg	`video/ogg`	Ogg	Theora, Vorbis	Firefox, Chrome, Opera
AV1	`video/mp4; codecs=av01`	Various	AV1	Growing support in modern browsers

For maximum compatibility, it's recommended to provide both MP4 and WebM formats:

<video controls width="640" height="360">
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Understanding Video Codecs

A video file typically contains:

Container: The wrapper format (MP4, WebM, etc.)
Video codec: The algorithm that compresses the video (H.264, VP9, etc.)
Audio codec: The algorithm that compresses the audio (AAC, Vorbis, etc.)

For more specific browser targeting, you can include codec information in the type attribute:

<video controls>
  <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
  <source src="video.webm" type="video/webm; codecs='vp9, opus'">
</video>

flowchart TD A[Video File] --> B[Container Format] A --> C[Video Codec] A --> D[Audio Codec] B --> B1[MP4] B --> B2[WebM] B --> B3[Ogg] C --> C1[H.264/AVC] C --> C2[VP8/VP9] C --> C3[AV1] C --> C4[Theora] D --> D1[AAC] D --> D2[Vorbis] D --> D3[Opus]

Choosing the Right Format

When deciding which formats to use, consider these factors:

MP4 (H.264): Best for universal compatibility
WebM (VP9): Better compression than H.264 but not as widely supported
AV1: Best compression but newer and not as widely supported

Best Practice: For most websites, providing both MP4 and WebM formats offers a good balance between compatibility and quality/file size.

Responsive Video Techniques

Making videos responsive is crucial for a good user experience across different devices and screen sizes.

Basic Responsive Video

The simplest approach is to set a maximum width and let the height adjust automatically:

<style>
  video {
    max-width: 100%;
    height: auto;
  }
</style>

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Maintaining Aspect Ratio

To ensure your video maintains its aspect ratio while being responsive, you can use a container div with padding:

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
  </video>
</div>

This technique works for common aspect ratios:

16:9 (widescreen): padding-bottom: 56.25%
4:3 (standard): padding-bottom: 75%
21:9 (ultrawide): padding-bottom: 42.85%

Using CSS Grid or Flexbox

Modern CSS layout techniques can also help with responsive videos:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
  }
  .video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="grid-container">
  <div class="video-wrapper">
    <video controls>
      <source src="video1.mp4" type="video/mp4">
    </video>
  </div>
  <div class="video-wrapper">
    <video controls>
      <source src="video2.mp4" type="video/mp4">
    </video>
  </div>
</div>

The aspect-ratio property is particularly useful for maintaining video dimensions, but it doesn't have universal browser support yet. For better compatibility, you can combine it with the padding technique.

Accessibility for Audio and Video

Making multimedia content accessible is not just good practice—it's essential for many users and often required by law in many jurisdictions.

Audio Accessibility

For audio content, provide text alternatives such as transcripts:

<figure>
  <audio controls>
    <source src="podcast-episode.mp3" type="audio/mpeg">
    <source src="podcast-episode.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
  <figcaption>Episode 42: Interview with Jane Smith</figcaption>
</figure>

<details>
  <summary>View Transcript</summary>
  <div class="transcript">
    <p><strong>Host:</strong> Welcome to our podcast. Today we're talking with Jane Smith...</p>
    <p><strong>Jane:</strong> Thank you for having me. I'm excited to discuss...</p>
    <!-- Rest of transcript -->
  </div>
</details>

Video Accessibility: Captions and Subtitles

For video content, provide captions using the <track> element with WebVTT files:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
  <track src="captions-es.vtt" kind="subtitles" srclang="es" label="Español">
  Your browser does not support the video element.
</video>

The <track> element attributes:

src: URL of the text track file
kind: Type of text track (subtitles, captions, descriptions, etc.)
srclang: Language of the text track
label: Title of the text track (displayed in the browser UI)
default: Indicates the default track

WebVTT Format

WebVTT (Web Video Text Tracks) is the standard format for video captions. Here's a simple example:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to our tutorial on HTML video implementation.

00:00:05.000 --> 00:00:09.000
In this video, we'll explore how to add video content to web pages.

You can even style captions with CSS within the VTT file:

WEBVTT

STYLE
::cue {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-family: sans-serif;
}
::cue(b) {
  color: yellow;
}

00:00:01.000 --> 00:00:04.000
Welcome to our tutorial on HTML video implementation.

Audio Descriptions

For users with visual impairments, provide audio descriptions that narrate important visual content:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
  <track src="descriptions.vtt" kind="descriptions" srclang="en" label="Audio Descriptions">
  Your browser does not support the video element.
</video>

Additional Accessibility Considerations

Ensure controls are keyboard accessible
Avoid autoplaying content with sound, which can be disruptive for screen reader users
Provide a visible focus state for interactive elements
Include a transcript for video content when possible
Use ARIA attributes when building custom controls

Embedding External Media

Often, you may need to embed videos or audio from external platforms like YouTube, Vimeo, or SoundCloud. These platforms typically provide an embed code that uses an <iframe>.

YouTube Embedding

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
></iframe>

Making YouTube embeds responsive:

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Vimeo Embedding

<iframe 
  src="https://player.vimeo.com/video/76979871" 
  width="640" 
  height="360" 
  frameborder="0" 
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen
></iframe>

SoundCloud Embedding

<iframe 
  width="100%" 
  height="166" 
  scrolling="no" 
  frameborder="no" 
  allow="autoplay" 
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
></iframe>

Privacy-Enhanced Embedding

For better privacy, many platforms offer privacy-enhanced embedding options that don't set cookies until the user interacts with the embed:

<!-- Privacy-enhanced YouTube embed -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
></iframe>

Loading Embeds on Interaction

For better performance, consider loading embeds only when users interact with them:

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: #000;
    cursor: pointer;
  }
  .video-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
  }
  .video-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 1.5rem;
    border: none;
    cursor: pointer;
  }
  .video-container .play-button:hover {
    background-color: rgba(230, 33, 23, 0.8);
  }
</style>

<div class="video-container" data-src="https://www.youtube.com/embed/dQw4w9WgXcQ">
  <img src="video-thumbnail.jpg" alt="Video thumbnail">
  <button class="play-button" aria-label="Play video">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path fill="white" d="M8 5v14l11-7z"/>
    </svg>
  </button>
</div>

<script>
  document.querySelectorAll('.video-container').forEach(container => {
    container.addEventListener('click', function() {
      const iframe = document.createElement('iframe');
      iframe.setAttribute('src', this.dataset.src);
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
      iframe.setAttribute('title', 'YouTube video player');
      
      // Clear the container and add the iframe
      this.innerHTML = '';
      this.appendChild(iframe);
      this.style.cursor = 'default';
    });
  });
</script>

JavaScript Media APIs

HTML audio and video elements expose powerful JavaScript APIs that allow for custom controls, playback manipulation, and interactive features.

Basic Media Control

You can control media playback programmatically:

<video id="myVideo" src="video.mp4" width="640" height="360"></video>

<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>
<button onclick="document.getElementById('myVideo').currentTime = 0">Reset</button>
<button onclick="document.getElementById('myVideo').volume = 0.5">Half Volume</button>

Media Events

Audio and video elements emit various events that you can listen for:

<video id="myVideo" src="video.mp4" width="640" height="360"></video>

<script>
  const video = document.getElementById('myVideo');
  
  // Play/pause events
  video.addEventListener('play', () => console.log('Video started playing'));
  video.addEventListener('pause', () => console.log('Video paused'));
  
  // Loading events
  video.addEventListener('loadstart', () => console.log('Started loading video'));
  video.addEventListener('canplay', () => console.log('Can start playing video'));
  video.addEventListener('canplaythrough', () => console.log('Can play through without buffering'));
  
  // Progress events
  video.addEventListener('timeupdate', () => console.log(`Current time: ${video.currentTime}`));
  video.addEventListener('progress', () => console.log('Downloading video data'));
  video.addEventListener('ended', () => console.log('Video finished playing'));
  
  // Error events
  video.addEventListener('error', () => console.error('An error occurred'));
</script>

Custom Video Player Example

Here's a simple example of a custom video player using HTML, CSS, and JavaScript:

<div class="custom-player">
  <video id="myVideo" src="video.mp4" width="640" height="360"></video>
  
  <div class="controls">
    <button id="playPauseBtn">Play</button>
    
    <div class="progress-container">
      <div id="progressBar" class="progress-bar"></div>
    </div>
    
    <div class="volume-container">
      <button id="muteBtn">Mute</button>
      <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
    </div>
    
    <button id="fullscreenBtn">Fullscreen</button>
  </div>
</div>

<script>
  const video = document.getElementById('myVideo');
  const playPauseBtn = document.getElementById('playPauseBtn');
  const progressBar = document.getElementById('progressBar');
  const muteBtn = document.getElementById('muteBtn');
  const volumeSlider = document.getElementById('volumeSlider');
  const fullscreenBtn = document.getElementById('fullscreenBtn');
  
  // Play/Pause
  playPauseBtn.addEventListener('click', () => {
    if (video.paused) {
      video.play();
      playPauseBtn.textContent = 'Pause';
    } else {
      video.pause();
      playPauseBtn.textContent = 'Play';
    }
  });
  
  // Update progress bar
  video.addEventListener('timeupdate', () => {
    const progress = (video.currentTime / video.duration) * 100;
    progressBar.style.width = `${progress}%`;
  });
  
  // Click on progress bar to seek
  document.querySelector('.progress-container').addEventListener('click', (e) => {
    const progressContainer = e.currentTarget;
    const rect = progressContainer.getBoundingClientRect();
    const pos = (e.clientX - rect.left) / rect.width;
    video.currentTime = pos * video.duration;
  });
  
  // Mute/Unmute
  muteBtn.addEventListener('click', () => {
    video.muted = !video.muted;
    muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
  });
  
  // Volume control
  volumeSlider.addEventListener('input', () => {
    video.volume = volumeSlider.value;
    video.muted = (video.volume === 0);
    muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
  });
  
  // Fullscreen
  fullscreenBtn.addEventListener('click', () => {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) { /* Safari */
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) { /* IE11 */
      video.msRequestFullscreen();
    }
  });
</script>

Note: This is a basic example. A production-ready custom video player would include more features, better styling, and accessibility enhancements.

Best Practices for Media Implementation

Here are some key best practices to follow when implementing audio and video on your website:

Performance Considerations

Optimize file sizes: Compress media files appropriately to reduce loading times
Use appropriate preload settings: Set preload="metadata" or preload="none" for content that isn't immediately needed
Consider lazy loading techniques: Load media only when it's about to come into view
Provide multiple formats: Use more efficient formats like WebM where supported
Use appropriate dimensions: Don't serve larger videos than needed for the display size

User Experience Considerations

Always include controls: Users should be able to play, pause, and adjust volume
Avoid autoplay with sound: This can be disruptive and unwelcome
Include poster images: Give users a preview of video content
Make media responsive: Ensure content works well on all screen sizes
Provide fallbacks: Include text alternatives for users who can't access media content

Accessibility Considerations

Add captions and subtitles: Use <track> elements for video content
Provide transcripts: Include text versions of audio and video content
Ensure keyboard accessibility: All controls should be usable without a mouse
Include audio descriptions: Narrate important visual content for users who can't see the video
Use semantic markup: Wrap media in appropriate containers like <figure> with <figcaption>

Legal and Ethical Considerations

Respect copyright: Only use media you have permission to use
Consider bandwidth usage: Not all users have unlimited data plans
Disclose autoplay: If you must use autoplay, inform users beforehand
Consider privacy: Use privacy-enhanced embedding for third-party content
Provide content warnings: Warn users about potentially sensitive content

Practical Exercise: Creating a Media Library

Let's apply what we've learned by creating a simple media library page that includes both audio and video content with proper implementation.

Exercise Requirements:

Create a responsive layout with both audio and video content
Implement proper audio and video elements with controls
Provide multiple source formats for better compatibility
Include captions for video content
Make the media content responsive
Add appropriate accessibility features

Start with this HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Library</title>
  <style>
    /* Your CSS here */
  </style>
</head>
<body>
  <header>
    <h1>My Media Library</h1>
  </header>
  
  <main>
    <section class="video-section">
      <h2>Featured Videos</h2>
      <!-- Your video content here -->
    </section>
    
    <section class="audio-section">
      <h2>Featured Audio</h2>
      <!-- Your audio content here -->
    </section>
  </main>
  
  <footer>
    <p>© 2025 My Media Library</p>
  </footer>
</body>
</html>

Here's a complete solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Library</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f8f9fa;
    }
    
    header, footer {
      text-align: center;
      padding: 2rem;
      background-color: #343a40;
      color: white;
    }
    
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    section {
      margin-bottom: 3rem;
    }
    
    h2 {
      margin-bottom: 1.5rem;
      color: #343a40;
      border-bottom: 2px solid #dee2e6;
      padding-bottom: 0.5rem;
    }
    
    /* Video styling */
    .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
      margin-bottom: 1.5rem;
      background-color: #000;
      border-radius: 8px;
    }
    
    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    
    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }
    
    /* Audio styling */
    .audio-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .audio-card .header {
      padding: 1rem;
      background-color: #e9ecef;
    }
    
    .audio-card .content {
      padding: 1rem;
    }
    
    .audio-card audio {
      width: 100%;
      margin-bottom: 1rem;
    }
    
    .audio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }
    
    /* Transcript styling */
    .transcript {
      background-color: #f8f9fa;
      padding: 1rem;
      border-radius: 4px;
      margin-top: 1rem;
      max-height: 150px;
      overflow-y: auto;
      font-size: 0.9rem;
    }
    
    details summary {
      cursor: pointer;
      color: #007bff;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .video-grid, .audio-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>My Media Library</h1>
  </header>
  
  <main>
    <section class="video-section">
      <h2>Featured Videos</h2>
      
      <div class="video-grid">
        <figure>
          <div class="video-container">
            <video controls preload="metadata" poster="thumbnails/nature-video.jpg">
              <source src="videos/nature-video.mp4" type="video/mp4">
              <source src="videos/nature-video.webm" type="video/webm">
              <track src="captions/nature-en.vtt" kind="subtitles" srclang="en" label="English">
              <track src="captions/nature-es.vtt" kind="subtitles" srclang="es" label="Español">
              Your browser does not support the video element.
            </video>
          </div>
          <figcaption>Exploring Nature's Beauty</figcaption>
        </figure>
        
        <figure>
          <div class="video-container">
            <video controls preload="metadata" poster="thumbnails/tutorial-video.jpg">
              <source src="videos/tutorial-video.mp4" type="video/mp4">
              <source src="videos/tutorial-video.webm" type="video/webm">
              <track src="captions/tutorial-en.vtt" kind="subtitles" srclang="en" label="English">
              Your browser does not support the video element.
            </video>
          </div>
          <figcaption>HTML Multimedia Tutorial</figcaption>
        </figure>
      </div>
    </section>
    
    <section class="audio-section">
      <h2>Featured Audio</h2>
      
      <div class="audio-grid">
        <div class="audio-card">
          <div class="header">
            <h3>Podcast Episode: Web Development Trends</h3>
          </div>
          <div class="content">
            <audio controls preload="metadata">
              <source src="audio/podcast-episode.mp3" type="audio/mpeg">
              <source src="audio/podcast-episode.ogg" type="audio/ogg">
              Your browser does not support the audio element.
            </audio>
            <p>Join our hosts as they discuss the latest trends in web development for 2025.</p>
            <details>
              <summary>View Transcript</summary>
              <div class="transcript">
                <p><strong>Host 1:</strong> Welcome to our podcast. Today we're talking about web development trends in 2025.</p>
                <p><strong>Host 2:</strong> That's right. Let's dive into the most important developments we're seeing.</p>
                <p><strong>Host 1:</strong> First up is the continued importance of responsive design...</p>
                <!-- More transcript content -->
              </div>
            </details>
          </div>
        </div>
        
        <div class="audio-card">
          <div class="header">
            <h3>Ambient Music: Focus Session</h3>
          </div>
          <div class="content">
            <audio controls preload="metadata" loop>
              <source src="audio/ambient-music.mp3" type="audio/mpeg">
              <source src="audio/ambient-music.ogg" type="audio/ogg">
              Your browser does not support the audio element.
            </audio>
            <p>Ambient background music designed to help you focus during work or study sessions.</p>
          </div>
        </div>
      </div>
    </section>
  </main>
  
  <footer>
    <p>© 2025 My Media Library</p>
  </footer>
</body>
</html>

Note: For this exercise, you would need actual media files and caption files. In a real project, you would replace the placeholder paths with actual file paths.

Summary and Key Takeaways

In this lecture, we've covered the essentials of implementing audio and video content in HTML:

Basic Implementation: How to use the <audio> and <video> elements
Multiple Source Formats: Providing different file formats for better browser compatibility
Attributes and Options: Understanding controls, preload, autoplay, and other attributes
Responsive Techniques: Making media content work well on all screen sizes
Accessibility Features: Adding captions, transcripts, and proper controls
JavaScript APIs: Leveraging media APIs for custom functionality
Embedding External Media: Using iframes for third-party content
Best Practices: Performance, user experience, and accessibility considerations

Remember these key principles:

Always provide fallbacks for browsers that don't support specific formats
Make accessibility a priority with captions, transcripts, and accessible controls
Consider performance implications with appropriate preload settings and file optimizations
Respect user preferences by avoiding autoplay with sound and providing proper controls
Make media responsive for a good experience on all devices

By following these practices, you'll create multimedia experiences that are engaging, accessible, and performant for all users.

Homework Assignment

Create a multimedia landing page for a fictional product or service with the following requirements:

Hero Section: Include a background video (with or without sound) that:
- Autoplays (but muted)
- Loops continuously
- Is appropriately sized for different screens
- Has a fallback background image
Product Demonstration Video: Include a main feature video that:
- Has proper controls
- Includes captions in at least one language
- Has a descriptive poster image
- Provides multiple source formats (MP4 and WebM)
- Includes a transcript or audio description
Testimonials Section: Include at least two audio testimonials that:
- Have proper controls
- Include transcripts
- Use appropriate preload settings
- Provide multiple formats (MP3 and OGG)
Additional Media: Include at least one embedded media item from a third-party platform (YouTube, Vimeo, SoundCloud, etc.) that:
- Is responsive
- Uses privacy-enhanced embedding where possible
- Has appropriate attribution and context
Custom Controls: Create at least one custom control for either an audio or video element using JavaScript (e.g., custom play button, progress bar, etc.)
Accessibility Features: Ensure all media is accessible with:
- Proper semantic markup
- Keyboard-accessible controls
- Appropriate text alternatives
- ARIA attributes where needed

Submit your HTML, CSS, and JavaScript files, along with a brief explanation of your implementation choices, accessibility considerations, and any challenges you faced.

Introduction to HTML Multimedia

HTML Audio Implementation

Basic Audio Element

Multiple Source Files

Audio Attributes

The preload Attribute

Audio Formats and Codec Support

Choosing the Right Format

HTML Video Implementation

Basic Video Element

Multiple Source Files

Video Attributes

The poster Attribute

Video Formats and Codec Support

Understanding Video Codecs

Choosing the Right Format

Responsive Video Techniques

Basic Responsive Video

Maintaining Aspect Ratio

Using CSS Grid or Flexbox

Accessibility for Audio and Video

Audio Accessibility

Video Accessibility: Captions and Subtitles

WebVTT Format

Audio Descriptions

Additional Accessibility Considerations

Embedding External Media

YouTube Embedding

Vimeo Embedding

SoundCloud Embedding

Privacy-Enhanced Embedding

Loading Embeds on Interaction

JavaScript Media APIs

Basic Media Control

Media Events

Custom Video Player Example

Best Practices for Media Implementation

Performance Considerations

User Experience Considerations

Accessibility Considerations

Legal and Ethical Considerations

Practical Exercise: Creating a Media Library

Exercise Requirements:

Summary and Key Takeaways

Homework Assignment

The `preload` Attribute

The `poster` Attribute