Integrate Video in HTML: The <video> Tag

Embedding a video is no longer a complex task requiring third-party plugins. Thanks to the HTML5 <video> element, adding rich multimedia is as simple as adding an image. However, mastering this tag involves more than just the src attribute. A professional, robust video implementation considers compatibility, accessibility, performance, and user experience.

The Anatomy of a Robust Video Element

Let's look at a complete, production-ready video element and break down its parts.

<video controls preload="metadata" poster="images/thumbnail.jpg" width="640" height="360">
  <source src="videos/my-video.webm" type="video/webm">
  <source src="videos/my-video.mp4" type="video/mp4">
  <track src="captions/captions.vtt" kind="captions" srclang="en" label="English">
  <track src="subtitles/subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
  <p>Your browser doesn't support embedded videos. You can <a href="videos/my-video.mp4">download it</a> instead.</p>
</video>

1. Essential Attributes for Control

Attributes are the settings for your video player. The most critical ones are:

• controls: A boolean attribute that displays the browser's default user interface for playback (play/pause, volume, fullscreen, etc.). Without this, the user can't control the video (unless you build your own controls with JavaScript).
• width / height: Setting these prevents the page layout from "jumping" as the video loads. It's crucial for good Core Web Vitals.
• autoplay: A boolean attribute that, if present, will *try* to play the video automatically. **Warning:** Nearly all modern browsers will block autoplay unless the muted attribute is also present.
• muted: Mutes the video by default. This is the key to making autoplay work.
• loop: Makes the video automatically restart when it finishes.

2. Solving the Compatibility Puzzle with <source>

There is no single video format (codec) that is supported by 100% of browsers. This is where the <source> tag becomes essential.

• The <video> tag acts as a container. Inside it, you list multiple <source> elements.
• The browser reads the list from top to bottom and plays the **first one** it understands.
• Best Practice: Provide **WebM** first, as it offers superior compression and quality. Follow it with **MP4 (H.264)**, which provides the near-universal fallback for browsers that don't support WebM (like Safari).
• The type attribute is critical. It tells the browser the MIME type of the file, so it doesn't waste time downloading a file it can't play.

3. Accessibility is Non-Negotiable: The <track> Tag

A silent video is an inaccessible video for many users. The <track> tag is the solution. It overlays timed text over the video, using a WebVTT (.vtt) file format.

The kind attribute is the most important:

• kind="captions": For users who are deaf or hard of hearing. Includes all spoken dialogue **and** other important sounds (e.g., "[door slams]", "[tense music]").
• kind="subtitles": A translation of the dialogue for users who speak a different language.
• kind="descriptions": For users who are blind or visually impaired. An audio-description track that describes on-screen visuals.
• kind="chapters": Used to create navigation points within the video.

The text between the opening <video> and closing </video> tags (after all <source> and <track> tags) is the **fallback content**. It is only displayed by ancient browsers that don't understand the video tag at all.

4. Performance & User Experience

Video files are large. How you load them matters.

Key Takeaway: A modern <video> element is more than a src. It's responsive (with CSS), compatible (with <source>), accessible (with <track>), and performant (with preload and poster).