Video tag in HTML

The (<video>) Video tag in HTML is used to embed a video player directly into a web page.

It allows users to watch video content within a browser without needing external plugins like Flash. The <video> element is supported by most modern browsers and provides a versatile way to display multimedia content in websites.

Why Use the Video tag in HTML <video>?

Before HTML5, embedding video content on web pages required the use of plugins such as Flash, QuickTime, or Windows Media Player. This often led to issues with compatibility, performance, and accessibility.

HTML5 introduced the <video> tag as a built-in feature, removing the need for third-party plugins and enabling native video playback. The (<video>) video tag in HTML element is a significant step in making multimedia content more accessible and user-friendly across different platforms.

<video src="video.mp4" width="640" height="360" controls>
  Your browser does not support the video tag.
</video>

In the example above:

1. The src attribute specifies the video file location.
2. The width and height attributes define the dimensions of the video player.
3. The controls attribute is used to display video controls (like play, pause, volume, etc.).
4. The text “Your browser does not support the video tag” is displayed for users whose browsers do not support the <video> tag.

Key Attributes of the <video> Video Tag in HTML

The <video> tag comes with several attributes that enhance its functionality and control over the video playback experience. These attributes are used to modify the behavior of the video player, define video sources, and specify options like autoplay and looping.

1. src

The src attribute specifies the path to the video file. It can be a relative or absolute URL. However, it is common practice to include multiple video sources within the <video> tag to ensure cross-browser compatibility.

<video src="video.mp4" controls></video>

2. controls

The controls attribute is essential for enabling the default video controls. These controls typically include play/pause, volume control, and a progress bar.

<video src="video.mp4" controls></video>

3. autoplay

The autoplay attribute specifies that the video should automatically begin playing as soon as it is ready. This is useful for scenarios where you want a video to play without requiring user interaction, such as on introductory pages or background videos.

<video src="video.mp4" autoplay></video>

4. loop

The loop attribute makes the video play repeatedly, restarting from the beginning once it reaches the end. This is useful for background videos or looping animations.

<video src="video.mp4" loop></video>

5. muted

The muted attribute is used to start the video with the audio turned off. It is often used in conjunction with autoplay to avoid videos playing with sound unexpectedly.

<video src="video.mp4" muted autoplay></video>

6. preload

The preload attribute hints to the browser how much of the video should be loaded when the page is loaded. The possible values for preload are:

1. auto: The browser should load the entire video when the page loads.
2. metadata: The browser should only load metadata (e.g., duration, dimensions).
3. none: The browser should not preload the video.

<video src="video.mp4" preload="auto" controls></video>

7. playsinline

The playsinline attribute ensures that the video is played inline on mobile devices rather than in fullscreen mode. This is useful for videos that should appear within the page layout rather than taking over the screen.

<video src="video.mp4" playsinline></video>

8. width and height

The width and height attributes define the size of the video player. These values can be set in pixels or percentage, depending on how you want the video to scale on different devices.

<video src="video.mp4" width="800" height="600" controls></video>

10. webkit-playsinline

This is a webkit-specific version of playsinline for Safari on iOS. It’s included for compatibility with older versions of Safari.

Advanced Video Tag in HTML Usage

Subtitles and Captions with <track>

The <track> element is used to add subtitles, captions, or other text tracks to a video. It provides additional information that can be displayed alongside the video. The kind attribute specifies the type of text track (e.g., subtitles, captions, descriptions).

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>

The src attribute points to the subtitle file, typically in WebVTT format.

The kind attribute can be set to “subtitles”, “captions”, or “descriptions”.

The srclang attribute specifies the language of the subtitle file.

The label attribute provides a label for the subtitle track (used in the video player’s track menu).

Events: Video Tag in HTML

You can control video playback through JavaScript by attaching event listeners to the <video> tag. Common video events include:

• play: Triggered when the video starts playing.
• pause: Triggered when the video is paused.
• ended: Triggered when the video ends.
• timeupdate: Triggered as the video progresses.

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

<script>
  const video = document.getElementById("myVideo");

  video.addEventListener("play", () => {
    console.log("The video is now playing.");
  });

  video.addEventListener("pause", () => {
    console.log("The video has been paused.");
  });

  video.addEventListener("ended", () => {
    console.log("The video has ended.");
  });
</script>

Accessibility Considerations of Video Tag in HTML

When using the <video> tag, it’s essential to ensure accessibility for users with disabilities. Consider the following best practices:

• Captions and Subtitles: Use the <track> element to provide subtitles for the deaf or hard of hearing.
• Keyboard Accessibility: Ensure that the video player can be controlled using a keyboard (e.g., spacebar to play/pause, arrow keys for seeking).
• Audio Description: Provide audio descriptions for visually impaired users through the <track> element.
• Focus Management: Ensure that the video player is easily navigable and can be focused on with the keyboard.

Conclusion

The video tag in HTML provides a powerful and flexible way to embed videos in web pages. It removes the need for third-party plugins, offering seamless video playback across all modern browsers.

The various attributes, such as controls, autoplay, loop, and preload, allow for detailed control over the video playback experience. Additionally, features like multiple video sources and subtitle tracks ensure a wide range of compatibility and accessibility options.

Check our Tailwind UI Design Components