HTML Audio and Video

Learn to embed native audio and video content in web pages using HTML5 multimedia elements with proper fallbacks and accessibility.

HTML5 Multimedia Revolution

HTML5 transformed web multimedia by introducing native <audio> and <video> elements, eliminating the need for plugins like Flash or Silverlight. These elements provide built-in controls, accessibility features, and seamless integration with modern web technologies.

Modern multimedia elements support multiple formats, custom controls, captions, and JavaScript APIs for creating rich, interactive media experiences that work across all devices and browsers.

🎵 Key Concept

HTML5 multimedia elements provide native, accessible, and customizable media playback without external plugins, making the web more secure and user-friendly.

HTML Audio Element

The <audio> element embeds sound content in web pages with built-in playback controls: 

<!-- Basic audio with controls -->
<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    <source src="podcast.wav" type="audio/wav">
    Your browser does not support the audio element.
</audio>

<!-- Audio with all attributes -->
<audio 
    controls
    preload="metadata"
    loop
    muted
    autoplay>
    <source src="background-music.mp3" type="audio/mpeg">
    <source src="background-music.ogg" type="audio/ogg">
    Your browser does not support HTML5 audio.
</audio>

<!-- Inline audio source -->
<audio controls src="simple-audio.mp3">
    Your browser does not support the audio element.
</audio>
Audio Attributes:
  • controls - Shows play/pause/volume controls
  • autoplay - Starts playing automatically (use carefully)
  • loop - Repeats audio continuously
  • muted - Starts muted (required for autoplay)
  • preload - Controls when to load audio (none/metadata/auto)
  • src - Direct audio source (alternative to <source>)

HTML Video Element

The <video> element provides native video playback with comprehensive control options: 

<!-- Basic video with controls -->
<video width="640" height="360" controls>
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

<!-- Video with poster and all attributes -->
<video 
    width="800" 
    height="450"
    controls
    poster="video-thumbnail.jpg"
    preload="metadata"
    playsinline>
    
    <source src="course-intro.mp4" type="video/mp4">
    <source src="course-intro.webm" type="video/webm">
    
    <!-- Captions and subtitles -->
    <track src="captions-en.vtt" 
           kind="captions" 
           srclang="en" 
           label="English Captions">
    <track src="subtitles-es.vtt" 
           kind="subtitles" 
           srclang="es" 
           label="Spanish Subtitles">
    <track src="chapters.vtt" 
           kind="chapters" 
           srclang="en" 
           label="Chapters">
    
    Your browser does not support HTML5 video.
</video>

Video Attributes

  • controls - Show playback controls
  • width/height - Video dimensions
  • poster - Thumbnail before play
  • autoplay - Start automatically
  • loop - Repeat playback
  • muted - Start without sound
  • playsinline - iOS inline playback

Track Kinds

  • subtitles - Translation text
  • captions - Accessibility text
  • descriptions - Audio descriptions
  • chapters - Navigation markers
  • metadata - Script data

Media Format Support

<!-- Best practice: Multiple formats for compatibility -->
<video controls>
    <!-- MP4 for Safari, IE, Chrome -->
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    
    <!-- WebM for Chrome, Firefox, Opera -->
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
    
    <!-- Ogg for Firefox, Chrome, Opera -->
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    
    <!-- Fallback for older browsers -->
    <p>Your browser doesn't support HTML5 video. 
       <a href="video.mp4">Download the video</a> instead.</p>
</video>

<!-- Audio format compatibility -->
<audio controls>
    <!-- MP3 for wide compatibility -->
    <source src="audio.mp3" type="audio/mpeg">
    
    <!-- Ogg Vorbis for Firefox, Chrome, Opera -->
    <source src="audio.ogg" type="audio/ogg">
    
    <!-- WAV for uncompressed audio -->
    <source src="audio.wav" type="audio/wav">
    
    Your browser does not support HTML5 audio.
</audio>

Responsive Video

<!-- Responsive video container -->
<div class="video-container">
    <video controls width="100%" height="auto">
        <source src="responsive-video.mp4" type="video/mp4">
        <source src="responsive-video.webm" type="video/webm">
        Your browser does not support HTML5 video.
    </video>
</div>

<!-- CSS for responsive video -->
<style>
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* Aspect ratio container */
.video-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}

.video-aspect-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Accessibility Features

<!-- Accessible video with captions and descriptions -->
<video controls 
       aria-label="HTML Tutorial: Introduction to Semantic Elements">
    
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
    
    <!-- English captions for accessibility -->
    <track src="captions-en.vtt" 
           kind="captions" 
           srclang="en" 
           label="English" 
           default>
    
    <!-- Audio descriptions for visually impaired -->
    <track src="descriptions.vtt" 
           kind="descriptions" 
           srclang="en" 
           label="Audio Descriptions">
    
    <!-- Chapter navigation -->
    <track src="chapters.vtt" 
           kind="chapters" 
           srclang="en" 
           label="Chapters">
    
    <!-- Fallback content -->
    <p>This video covers HTML semantic elements. 
       <a href="transcript.html">Read the full transcript</a> 
       or <a href="tutorial.mp4">download the video</a>.
    </p>
</video>

<!-- WebVTT caption file example (captions-en.vtt) -->
/*
WEBVTT

00:00.000 --> 00:05.000
Welcome to HTML Tutorial on Semantic Elements

00:05.000 --> 00:12.000
Today we'll learn about header, nav, main, and footer elements

00:12.000 --> 00:18.000
These elements provide meaning to your document structure
*/

Complete Media Example

<!-- Media-rich educational content -->
<article class="lesson">
    <header>
        <h2>CSS Grid Layout Tutorial</h2>
        <p>Learn to create complex layouts with CSS Grid</p>
    </header>
    
    <!-- Main tutorial video -->
    <div class="video-section">
        <video controls 
               poster="css-grid-thumbnail.jpg"
               preload="metadata">
            
            <source src="css-grid-tutorial.mp4" type="video/mp4">
            <source src="css-grid-tutorial.webm" type="video/webm">
            
            <track src="grid-captions.vtt" 
                   kind="captions" 
                   srclang="en" 
                   label="English" 
                   default>
            
            <p>Your browser doesn't support HTML5 video. 
               <a href="css-grid-tutorial.mp4">Download the tutorial</a>.
            </p>
        </video>
    </div>
    
    <!-- Supplementary audio content -->
    <aside class="audio-summary">
        <h3>Quick Audio Summary</h3>
        <p>Listen to key takeaways from this lesson:</p>
        
        <audio controls preload="none">
            <source src="grid-summary.mp3" type="audio/mpeg">
            <source src="grid-summary.ogg" type="audio/ogg">
            Your browser does not support HTML5 audio.
        </audio>
    </aside>
    
    <!-- Downloadable resources -->
    <section class="resources">
        <h3>Download Resources</h3>
        <ul>
            <li><a href="css-grid-tutorial.mp4" download>Video (MP4)</a></li>
            <li><a href="grid-summary.mp3" download>Audio Summary (MP3)</a></li>
            <li><a href="grid-captions.vtt" download>Video Transcript</a></li>
        </ul>
    </section>
</article>

Best Practices

✅ Do

  • Provide multiple format sources
  • Include meaningful fallback content
  • Add captions for accessibility
  • Use appropriate preload settings
  • Optimize file sizes for web delivery
  • Include poster images for videos

❌ Avoid

  • Autoplay with sound (poor UX)
  • Very large file sizes
  • Missing fallback content
  • Single format only
  • Missing accessibility features
  • Unoptimized video dimensions