HTML Video controls Property: Display Video Controls

Table of Contents

HTML Video `controls` Property: Display Video Controls

The HTML <video> controls attribute specifies whether or not video controls should be displayed. These controls typically include buttons for playing, pausing, adjusting volume, seeking, and toggling full-screen mode, providing users with essential functionalities for interacting with video content. By default, video controls are not shown unless this attribute is present.

Purpose of the `controls` Attribute

The primary purpose of the controls attribute is to enhance the user experience by providing standard playback controls. It ensures that users can easily start, stop, adjust volume, and navigate through the video content without needing custom JavaScript-based controls.

Syntax

The controls attribute is a boolean attribute. If present, it enables the video controls; if absent, the controls are hidden.

<video controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Attribute Values

The controls attribute does not accept any specific values. Its mere presence enables the controls. If you want to hide the controls, simply omit the attribute from the <video> tag.

Example 1: Basic Video with Controls

This example demonstrates how to include the controls attribute to display the default video controls.

<video width="640" height="360" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

The output will be a video player with the default browser controls visible beneath the video.

Example 2: Video without Controls

In this example, the controls attribute is omitted, resulting in a video player without any visible controls.
This is generally not user-friendly unless you provide custom controls via JavaScript.

<video width="640" height="360">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

The output will be a video player without visible playback controls.

Example 3: Dynamically Adding and Removing Controls with JavaScript

This example demonstrates how to dynamically add or remove the controls attribute using JavaScript, providing a way to toggle the visibility of the video controls based on user interaction.

<video id="myVideo" width="640" height="360">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<button id="toggleControlsBtn">Toggle Controls</button>

<script>
  const videoElement = document.getElementById("myVideo");
  const toggleButton = document.getElementById("toggleControlsBtn");

  toggleButton.addEventListener("click", function () {
    if (videoElement.hasAttribute("controls")) {
      videoElement.removeAttribute("controls");
    } else {
      videoElement.setAttribute("controls", "controls");
    }
  });
</script>

In this example, clicking the “Toggle Controls” button will dynamically add or remove the controls attribute from the video element, toggling the visibility of the playback controls.

Best Practices

Always Include Controls: Unless you have a specific reason to hide the default controls (e.g., providing custom controls), always include the controls attribute to ensure a user-friendly experience.
Accessibility: Ensure that your video content is accessible. While the controls attribute provides basic controls, you may need to provide additional accessibility features such as captions and transcripts.
Custom Controls: If you choose to implement custom controls, ensure they are fully functional and provide an equivalent user experience to the default controls. 🧑‍💻

Use Cases

Educational Videos: Providing students with the ability to pause, rewind, and adjust the volume while watching lectures.
Marketing Videos: Allowing potential customers to easily engage with promotional content.
Video Tutorials: Enabling users to navigate through step-by-step instructions at their own pace.
Embedded Media: Providing users with familiar controls for embedded video content.

Browser Support

The controls attribute is widely supported by all modern browsers, including:

Chrome
Edge
Firefox
Safari
Opera

Conclusion

The controls attribute in the HTML <video> tag is essential for providing users with standard playback controls. It enhances the user experience, ensures accessibility, and allows users to easily interact with video content. Whether you’re creating educational videos, marketing materials, or embedded media, the controls attribute is a fundamental part of delivering a user-friendly video experience. 🎬