HTML Video

HTML Video: Embedding Movies, Controls, and Subtitles

The HTML <video> element embeds video files—such as MP4, WebM, and Ogg clips—directly into web pages, offering built-in playback controls, poster thumbnail preview images, and subtitles.

Video Tag Syntax and Core Attributes

The <video> tag supports multiple nested <source> tags to ensure cross-browser compatibility:

<video width="800" height="450" controls poster="cover.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    Your browser does not support the video tag.
</video>

Key video attributes:

1. controls: Displays native browser play, pause, volume, seeker, and fullscreen controls.
2. poster: Specifies an image URL displayed while the video downloads or before playback begins.
3. autoplay: Starts playback automatically (must be paired with muted to work in modern browsers).
4. loop: Automatically restarts video playback when reaching the end.
5. muted: Silences default video audio output.
6. <track>: Supplies .vtt timed text files for subtitles and closed captions.

Video Source Fallback Flow

flowchart TD
    A["<video> Tag Execution"] --> B{"Browser supports WebM?"}
    B -- Yes --> C["Play video.webm source"]
    B -- No --> D{"Browser supports MP4?"}
    D -- Yes --> E["Play video.mp4 source"]
    D -- No --> F["Display Fallback Text Message"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Video Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">

    <h2>Product Feature Preview Video</h2>

    <!-- Styled responsive video container -->
    <div style="background-color: #1e293b; padding: 1rem; border-radius: 12px; max-width: 700px;">
        <video 
            controls 
            poster="https://images.unsplash.com/photo-1518770660439-4636190af475" 
            style="width: 100%; height: auto; border-radius: 8px; display: block;" 
            preload="metadata">
            <source src="https://www.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support HTML video.
        </video>
    </div>

</body>
</html>

Best Practices

• Always include muted when using autoplay: Browsers strictly block autoplaying videos that contain active audio tracks.
• Always provide a poster image: Displaying a poster image prevents a blank black video box from showing before media loads.
• Include <track> subtitle files: Closed captions ensure hearing-impaired users and users in silent environments can read video dialogue.

Self-Check Challenge

Write a <video> tag configured with controls, muted, loop, and explicit width="640" dimensions!