HTML 23 💻 video, audio and source elements - KandZ

The <video>, <audio>, and <source> elements allow you to embed multimedia content directly into your web pages without requiring third-party plugins. They provide native playback controls and support for multiple formats.

Overview of Multimedia Elements

Element	Purpose	Example
`<video>`	Embeds video content	`<video src="video.mp4" controls></video>`
`<audio>`	Embeds audio content	`<audio src="audio.mp3" controls></audio>`
`<source>`	Specifies media files (multiple formats)	`<source src="video.mp4" type="video/mp4">`

The Video Element `<video>`

The <video> element embeds video content directly into a webpage, providing native playback controls.

Basic Syntax:

<video controls autoplay width="400" height="300" muted loop>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Attributes:

Attribute	Purpose	Example
`controls`	Shows playback controls (play, pause, volume)	`controls`
`autoplay`	Starts playing automatically	`autoplay`
`muted`	Mutes the audio	`muted`
`loop`	Replays the video when it ends	`loop`
`width`	Sets video width (in pixels)	`width="640"`
`height`	Sets video height (in pixels)	`height="360"`
`poster`	Thumbnail image before playback	`poster="thumbnail.jpg"`
`preload`	Preloads video data	`preload="auto"`
`playsinline`	Plays inline on mobile devices	`playsinline`

Supported Video Formats:

Format	MIME Type	Browser Support
MP4 (H.264)	`video/mp4`	All modern browsers
WebM	`video/webm`	Chrome, Firefox, Edge, Safari (recent)
OGG (Theora)	`video/ogg`	Firefox, Chrome

The Audio Element `<audio>`

The <audio> element embeds audio content directly into a webpage.

Basic Syntax:

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

Attributes:

Attribute	Purpose	Example
`controls`	Shows playback controls	`controls`
`autoplay`	Starts playing automatically	`autoplay`
`muted`	Mutes the audio	`muted`
`loop`	Replays when it ends	`loop`
`preload`	Preloads audio data	`preload="auto"`

Supported Audio Formats:

Format	MIME Type	Browser Support
MP3	`audio/mpeg`	All modern browsers
OGG (Vorbis)	`audio/ogg`	Firefox, Chrome
WAV	`audio/wav`	All modern browsers (uncompressed)

The Source Element `<source>`

The <source> element is used within <video> and <audio> elements to specify media files in different formats.

Basic Syntax:

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

Attributes:

Attribute	Purpose	Example
`src`	URL of the media file	`src="video.mp4"`
`type`	MIME type of the media	`type="video/mp4"`
`media`	Media query for responsive selection	`media="(max-width: 768px)"`

Why Use Multiple Sources?

Browsers support different codecs. By providing multiple formats, you ensure cross-browser compatibility:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <!-- Fallback message -->
    Your browser does not support the video tag.
</video>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video, audio, and source Elements</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        .media-container {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
        }

        .media-container video,
        .media-container audio {
            width: 100%;
            max-width: 100%;
            border-radius: 8px;
            background: #1e1e1e;
        }

        video {
            background: #1e1e1e;
            border-radius: 8px;
        }

        .example-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }

        .format-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 15px 0;
        }

        .format-card {
            flex: 1;
            min-width: 150px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #ddd;
            text-align: center;
            transition: border-color 0.3s;
        }

        .format-card:hover {
            border-color: #007bff;
        }

        .format-card .icon {
            font-size: 2.5em;
            display: block;
        }

        .format-card .label {
            font-weight: bold;
            display: block;
            margin: 8px 0 5px;
        }

        .format-card .mime {
            font-size: 0.85em;
            color: #6c757d;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        .fallback-message {
            background: #f8d7da;
            padding: 20px;
            border-radius: 6px;
            text-align: center;
            color: #721c24;
            border: 2px dashed #dc3545;
        }

        .thumbnail-demo {
            background: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }

        .btn-group {
            margin-top: 15px;
        }

        button {
            background: #007bff;
            color: white;
            padding: 10px 25px;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s;
            margin-right: 10px;
        }

        button:hover {
            background: #0056b3;
        }

        button.reset {
            background: #6c757d;
        }

        button.reset:hover {
            background: #545b62;
        }
    </style>
</head>
<body>

    <h1>video, audio, and source Elements</h1>

    <!-- ====== VIDEO DEMO ====== -->
    <h2>1. Video Element</h2>

    <div class="media-container">
        <h3>Basic Video with Controls</h3>

        <video controls width="100%" poster="https://via.placeholder.com/800x400/1e1e1e/007bff?text=Video+Thumbnail">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            <div class="fallback-message">
                Your browser does not support the video tag.
            </div>
        </video>
        <p><small>MP4 and OGG formats provided for cross-browser compatibility.</small></p>
    </div>

    <!-- ====== VIDEO WITH ATTRIBUTES ====== -->
    <div class="media-container">
        <h3>Video with Multiple Attributes</h3>
        <p>This video has: <code>controls</code>, <code>muted</code>, <code>loop</code>, <code>width="100%"</code>, and <code>poster</code>.</p>

        <video controls muted loop width="100%" poster="https://via.placeholder.com/800x400/28a745/ffffff?text=Loading...">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>

        <div class="example-box">
            <h4>🔍 Attributes Demonstrated:</h4>
            <ul>
                <li><code>controls</code> — Play/Pause, Volume, Fullscreen buttons</li>
                <li><code>muted</code> — Audio starts muted</li>
                <li><code>loop</code> — Video replays automatically</li>
                <li><code>poster</code> — Thumbnail image displayed before playback</li>
            </ul>
        </div>
    </div>

    <!-- ====== AUDIO DEMO ====== -->
    <h2>2. Audio Element</h2>

    <div class="media-container">
        <h3>Audio Player with Controls</h3>

        <audio controls style="width: 100%;">
            <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
            Your browser does not support the audio tag.
        </audio>

        <p><small>MP3 and OGG formats provided for cross-browser compatibility.</small></p>
    </div>

    <!-- ====== AUDIO WITH ATTRIBUTES ====== -->
    <div class="media-container">
        <h3>Audio with Loop and Autoplay</h3>
        <p>This audio has: <code>controls</code>, <code>autoplay</code>, <code>muted</code>, and <code>loop</code>.</p>

        <audio controls autoplay muted loop style="width: 100%;">
            <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
            Your browser does not support the audio tag.
        </audio>

        <div class="example-box">
            <h4>🔍 Attributes Demonstrated:</h4>
            <ul>
                <li><code>controls</code> — Play/Pause, Volume buttons</li>
                <li><code>autoplay</code> — Starts playing on load</li>
                <li><code>muted</code> — Audio starts muted (required for autoplay in most browsers)</li>
                <li><code>loop</code> — Replays automatically</li>
            </ul>
            <p><strong>Note:</strong> Most modern browsers require <code>muted</code> for <code>autoplay</code> to work.</p>
        </div>
    </div>

    <!-- ====== SOURCE ELEMENT ====== -->
    <h2>3. The Source Element</h2>

    <div class="media-container">
        <h3>Multiple Source Formats for Cross-Browser Compatibility</h3>

        <video controls width="100%">
            <!-- MP4 (most compatible) -->
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <!-- WebM (good compression) -->
            <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
            <!-- OGG (open format) -->
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            <div class="fallback-message">
                Your browser does not support the video tag.
            </div>
        </video>

        <div class="example-box">
            <h4>🔍 How the Browser Chooses:</h4>
            <ol>
                <li>Browser checks the first <code>&lt;source&gt;</code></li>
                <li>If it supports the format, it uses that file</li>
                <li>If not, it moves to the next <code>&lt;source&gt;</code></li>
                <li>If none are supported, the fallback message is shown</li>
            </ol>
        </div>
    </div>

    <!-- ====== RESPONSIVE VIDEO ====== -->
    <div class="media-container">
        <h3>Responsive Video</h3>
        <p>The video below adapts to the container width using <code>max-width: 100%</code> and auto height.</p>

        <video controls style="max-width: 100%; height: auto; border-radius: 8px;" poster="https://via.placeholder.com/800x400/ffc107/343a40?text=Video+Ready">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
    </div>

    <!-- ====== FORMAT REFERENCE ====== -->
    <h2>4. Supported Formats</h2>

    <h3>Video Formats</h3>
    <div class="format-grid">
        <div class="format-card">
            <span class="icon">🎬</span>
            <span class="label">MP4</span>
            <span class="mime">video/mp4</span>
            <span style="display: block; font-size: 0.85em; color: #28a745;">✅ All browsers</span>
        </div>
        <div class="format-card">
            <span class="icon">🎬</span>
            <span class="label">WebM</span>
            <span class="mime">video/webm</span>
            <span style="display: block; font-size: 0.85em; color: #ffc107;">⚠️ Chrome, Firefox, Edge</span>
        </div>
        <div class="format-card">
            <span class="icon">🎬</span>
            <span class="label">OGG</span>
            <span class="mime">video/ogg</span>
            <span style="display: block; font-size: 0.85em; color: #ffc107;">⚠️ Firefox, Chrome</span>
        </div>
    </div>

    <h3>Audio Formats</h3>
    <div class="format-grid">
        <div class="format-card">
            <span class="icon">🎵</span>
            <span class="label">MP3</span>
            <span class="mime">audio/mpeg</span>
            <span style="display: block; font-size: 0.85em; color: #28a745;">✅ All browsers</span>
        </div>
        <div class="format-card">
            <span class="icon">🎵</span>
            <span class="label">OGG</span>
            <span class="mime">audio/ogg</span>
            <span style="display: block; font-size: 0.85em; color: #ffc107;">⚠️ Firefox, Chrome</span>
        </div>
        <div class="format-card">
            <span class="icon">🎵</span>
            <span class="label">WAV</span>
            <span class="mime">audio/wav</span>
            <span style="display: block; font-size: 0.85em; color: #28a745;">✅ All browsers (uncompressed)</span>
        </div>
    </div>

    <!-- ====== REFERENCE TABLES ====== -->
    <h2>5. Quick Reference</h2>

    <h3>Video Element Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>controls</code></td>
                <td>Shows playback controls</td>
                <td><code>&lt;video controls&gt;</code></td>
            </tr>
            <tr>
                <td><code>autoplay</code></td>
                <td>Starts on load (needs muted)</td>
                <td><code>autoplay</code></td>
            </tr>
            <tr>
                <td><code>muted</code></td>
                <td>Mutes audio</td>
                <td><code>muted</code></td>
            </tr>
            <tr>
                <td><code>loop</code></td>
                <td>Replays when ended</td>
                <td><code>loop</code></td>
            </tr>
            <tr>
                <td><code>poster</code></td>
                <td>Thumbnail image</td>
                <td><code>poster="thumb.jpg"</code></td>
            </tr>
            <tr>
                <td><code>width</code>/<code>height</code></td>
                <td>Video dimensions</td>
                <td><code>width="640" height="360"</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Audio Element Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>controls</code></td>
                <td>Shows playback controls</td>
                <td><code>&lt;audio controls&gt;</code></td>
            </tr>
            <tr>
                <td><code>autoplay</code></td>
                <td>Starts on load (needs muted)</td>
                <td><code>autoplay</code></td>
            </tr>
            <tr>
                <td><code>muted</code></td>
                <td>Mutes audio</td>
                <td><code>muted</code></td>
            </tr>
            <tr>
                <td><code>loop</code></td>
                <td>Replays when ended</td>
                <td><code>loop</code></td>
            </tr>
        </tbody>
    </table>

    <!-- ====== BEST PRACTICES ====== -->
    <h2>6. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Always provide <strong>multiple source formats</strong> (MP4 + WebM/OGG)</li>
            <li>Always include <strong>fallback text</strong> for unsupported browsers</li>
            <li>Use <code>controls</code> for <strong>user-friendly playback</strong></li>
            <li>Use <code>poster</code> to show a <strong>thumbnail</strong> before playback</li>
            <li>Use <code>muted</code> with <code>autoplay</code> (required in most browsers)</li>
            <li>Optimize video files for <strong>web performance</strong></li>
            <li>Use <strong>semantic HTML</strong> and proper <strong>ARIA labels</strong></li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <code>autoplay</code> without <code>muted</code> (often blocked)</li>
            <li>Don't use only one format — some browsers won't play it</li>
            <li>Don't use <strong>YouTube links</strong> in <code>src</code> (use embed instead)</li>
            <li>Don't use large files without compression</li>
            <li>Don't forget the <strong>fallback message</strong></li>
        </ul>
    </div>

    <!-- ====== CODE EXAMPLES ====== -->
    <h2>7. Code Examples</h2>

    <div style="background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', monospace; line-height: 1.8;">
        <h3 style="color: #569cd6; margin-top: 0;">Basic Video:</h3>
        <pre style="margin: 0; color: #d4d4d4;">
            <span style="color: #569cd6;">&lt;video</span> <span style="color: #9cdcfe;">controls</span> <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"640"</span> <span style="color: #9cdcfe;">height</span>=<span style="color: #ce9178;">"360"</span> <span style="color: #9cdcfe;">poster</span>=<span style="color: #ce9178;">"thumbnail.jpg"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"video.mp4"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"video/mp4"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"video.webm"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"video/webm"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #6a9955;">&lt;!-- Fallback message --&gt;</span>
                <span style="color: #ce9178;">Your browser does not support the video tag.</span>
            <span style="color: #569cd6;">&lt;/video&gt;</span>
        </pre>

        <h3 style="color: #569cd6;">Basic Audio:</h3>
        <pre style="margin: 0; color: #d4d4d4;">
            <span style="color: #569cd6;">&lt;audio</span> <span style="color: #9cdcfe;">controls</span> <span style="color: #9cdcfe;">muted</span> <span style="color: #9cdcfe;">loop</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"audio.mp3"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"audio/mpeg"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"audio.ogg"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"audio/ogg"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #ce9178;">Your browser does not support the audio tag.</span>
            <span style="color: #569cd6;">&lt;/audio&gt;</span>
        </pre>

        <h3 style="color: #569cd6;">Video with All Attributes:</h3>
        <pre style="margin: 0; color: #d4d4d4;">
            <span style="color: #569cd6;">&lt;video</span>
                <span style="color: #9cdcfe;">controls</span>
                <span style="color: #9cdcfe;">autoplay</span>
                <span style="color: #9cdcfe;">muted</span>
                <span style="color: #9cdcfe;">loop</span>
                <span style="color: #9cdcfe;">width</span>=<span style="color: #ce9178;">"100%"</span>
                <span style="color: #9cdcfe;">poster</span>=<span style="color: #ce9178;">"thumbnail.jpg"</span>
                <span style="color: #9cdcfe;">playsinline</span>
            <span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"video.mp4"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"video/mp4"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">&lt;source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"video.webm"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"video/webm"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #ce9178;">Your browser does not support the video tag.</span>
            <span style="color: #569cd6;">&lt;/video&gt;</span>
        </pre>
    </div>

</body>
</html>

Quick Reference

Element	Purpose	Key Attributes
`<video>`	Video playback	`controls`, `autoplay`, `muted`, `loop`, `poster`, `width`, `height`
`<audio>`	Audio playback	`controls`, `autoplay`, `muted`, `loop`
`<source>`	Media file specification	`src`, `type`, `media`

Best Practices Checklist

✅ Provide multiple source formats (MP4 + WebM/OGG)
✅ Include fallback text for unsupported browsers
✅ Use controls for user playback control
✅ Use poster for a thumbnail image
✅ Always use muted with autoplay (required in most browsers)
✅ Optimize media files for web performance
✅ Use playsinline for mobile video playback
✅ Test across different browsers and devices

Pro Tip: When using autoplay, always include muted. Most modern browsers block autoplay with sound. For mobile, also include playsinline to allow the video to play in the page instead of opening a full-screen player. Use <source> with multiple formats to ensure the broadest browser compatibility!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Multimedia Elements

The Video Element <video>

Basic Syntax:

Attributes:

Supported Video Formats:

The Audio Element <audio>

Basic Syntax:

Attributes:

Supported Audio Formats:

The Source Element <source>

Basic Syntax:

Attributes:

Why Use Multiple Sources?

Complete Example

Quick Reference

Best Practices Checklist

Ads Blocker Detected!!!

The Video Element `<video>`

The Audio Element `<audio>`

The Source Element `<source>`