How to add controls to HTML Video?

Adding controls to HTML video can greatly enhance user interaction and accessibility on your web pages. In this guide, we cover everything you need to know, from basic video controls that every video should have to advanced features that can doubly enhance interactivity.

Understanding HTML Video Element

Before HTML5 became widely adopted, playing videos on websites often required specific plugins like Adobe Flash or Silverlight. This was because web browsers didn't have built-in ways to handle videos. To solve this, companies of major browsers like Firefox, Chrome, Mozilla, and Edge got together and came up with a solution to how web pages handle videos. They introduced HTML5, which includes new `<video>` and `<audio>` tags that browsers understand directly. Now, websites can use these tags to show videos without needing extra plugins. 

This supports video streaming in all browsers that support HTML5. Not to mention, it boasts features like the JavaScript API, which allows for better interactivity and flexible control over video elements.

Here's a simple example of how to use the <video> tag:

<video src="video.webm" type="video/webm" controls>
</video>

You can provide multiple video sources to ensure compatibility across different browsers. Here's how:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Here, the <source> tag is an empty tag—which means it doesn't need a closing tag, except when using XHTML.

Basic HTML Video Controls

Here are the most commonly used HTML5 video custom controls:

Play

You can play a video by accessing the play() method of the video element. Here's how:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">Play</button>

Pause

You can pause a video by accessing the pause() method of the video element. Here's how:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>

Seeking

You can seek your desired position in the video or go to the current playback point by using the currentTime property of the video element. Here's an example:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').currentTime = 10">Seek to 10 seconds</button>
<p>Current time: <span id="currentTimeDisplay">0</span> seconds</p>
<script>
  const video = document.getElementById('myVideo');
  video.ontimeupdate = function() {
    document.getElementById('currentTimeDisplay').innerText = video.currentTime.toFixed(2);
  };
</script>

Volume

You can adjust the volume or mute the video by adjusting the volume or even using the muted setting of the video element.

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').volume = 0.5">Set Volume to 50%</button>
<button onclick="document.getElementById('myVideo').muted = true">Mute</button>
<button onclick="document.getElementById('myVideo').muted = false">Unmute</button>

Fullscreen Toggle

You can switch between fullscreen and normal mode using the requestFullscreen method and exitFullscreen method.

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="toggleFullscreen()">Toggle Fullscreen</button>

<script>
  function toggleFullscreen() {
    const video = document.getElementById('myVideo');
    if (!document.fullscreenElement) {
      video.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }
</script>

Advanced HTML Video Control Features

Captions & Subtitles (when available)

Captions and subtitles are simply textual representations of the audio present in videos. Subtitles translate the language into, perhaps, another language that is understandable by users, whereas captions merely transcribe the audio in the video (they might include language as text or even insightful details like sound effects or the identity of the speakers on screen).

If you want to make your videos highly accessible, you ought to add subtitles or captions. The easiest way to do this in HTML is by using the <track> element with WebVTT (Web Video Text Tracks).

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

Audio Tracks (when available)

Audio tracks allow you to offer multiple audio versions for a single video—this could be in different languages or even commentary tracks. The bottom line is to boost accessibility and improve user experience through multiple options that cater to diverse user preferences.

If you want to add audio tracks to your video, you simply need to use the <track> element along with the kind attribute set to audio.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="audio_en.vtt" kind="captions" srclang="en" label="English Audio">
  <track src="audio_es.vtt" kind="captions" srclang="es" label="Spanish Audio">
</video>

Playback Speed

Playback speed lets users control the speed at which they view a video—you can watch a video faster or slower than its normal speed (i.e. 1x). This is particularly helpful for viewers who simply want to skim through a video quickly or for those who need more time to understand the video.

You can adjust the playback speed using the playbackRate property of the video element. Here's how:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').playbackRate = 0.5">0.5x Speed</button>
<button onclick="document.getElementById('myVideo').playbackRate = 1">Normal Speed</button>
<button onclick="document.getElementById('myVideo').playbackRate = 2">2x Speed</button>

In addition to this, there are many other attributes, like controlslist, which decides which controls appear when the browser shows its default video controls (like nodownload, nofullscreen, and noremoteplayback). Another important attribute, crossorigin, determines if videos can be securely used across different web elements like <canvas>.

How to add custom video controls in HTML?

Here’s a step-by-step method to add custom HTML video player controls and customize them exactly how you want them on your website:

1. Start by embedding your video using the <video> element (video.mp4 in this example). The attribute enables default browser controls, which you'll replace with custom controls later if desired.

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

2. Next, add buttons and style them. Create buttons for play/pause, volume, seek, and fullscreen inside a <div>. Give each a unique ID for control. Then, style them in your CSS file to make them look aesthetic.

<div id="controls">
  <button id="playPauseBtn">Play/Pause</button>
  <button id="volumeBtn">Set Volume</button>
  <button id="seekBtn">Seek 10s</button>
  <button id="fullscreenBtn">Fullscreen</button>
</div>

3. In your JavaScript file, link each button to a function that handles its action. For example, clicking "Play/Pause" toggles between playing and pausing.

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeBtn = document.getElementById('volumeBtn');
const seekBtn = document.getElementById('seekBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');

playPauseBtn.addEventListener('click', playPause);
volumeBtn.addEventListener('click', () => setVolume(0.5));
seekBtn.addEventListener('click', () => seek(10));
fullscreenBtn.addEventListener('click', toggleFullscreen);

function playPause() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

function setVolume(volume) {
  video.volume = volume;
}

function seek(time) {
  video.currentTime += time;
}

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

4. HTML5 video doesn't have a built-in stop or replay method, so you'll need to create your own using pause() and setting currentTime. 

function stopVideo() {
  video.pause();
  video.currentTime = 0;
}

function replayVideo() {
  video.currentTime = 0;
  video.play();
}

Browser Compatibility for HTML Video Controls

Here's an overview of which versions of each browser support HTML video controls:

Browser	Versions Supported
Chrome	4 - 125, 126, 127 - 129
Edge	12 - 125, 126
Safari	11 - 17.4, 17.5 - TP
Firefox	20 - 130
Opera	11.5 - 109, 110
Safari on iOS	11 - 17.4, 17.5 - 18.0
Android Browser	2.1 - 2.2 (Partial), 2.3 - 4.4.4, 126

Conclusion

The <video> element was introduced in HTML5 in 2008 to provide a standardized way to embed video content in web pages. Today, developers use JavaScript to make video players look and work better. This helps keep the playback experience consistent across different web browsers. In summary, we've covered the steps for adding standard video controls like play button HTML, pause, volume down/up, seek, captions, and more. We've explored how to customize these controls to match your website's design and functionality requirements. Now, get started and optimize your videos for enhanced functionality and accessibility!

FAQs

1. How to hide video controls in HTML?

To hide video controls in HTML, eliminate the controls attribute from your <video> tag. You can use JavaScript to toggle controls dynamically. You can also hide HTML5 video controls using CSS—use the display: none; property on the <video> element or its controls. Here's how you can do it:

/* Hide all controls */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}
/* For Firefox */
video::-moz-media-controls {
  display: none !important;
}
/* For Edge */
video::-ms-media-controls {
  display: none !important;
}
/* General fallback */
video {
  /* Remove default browser controls */
  controls: none !important;
}

2. Why are the controls not working in the HTML video player?

There are several reasons why controls might not work. They could be due to missing or incorrect JavaScript handling, syntax issues (you may have placed the div in front of the video), unsupported video formats, browser compatibility issues, or conflicts with other scripts on the page. Make sure to test your code and ensure it accurately accesses video elements and handles events like play, pause, seek, etc.

3. What is a control list in HTML?

In HTML, the controlslist attribute is used by developers to choose which controls will appear in a video player's interface. It's used with the controls attribute which shows the default list of controls (like play, pause, volume, and fullscreen). If you define controlslist with keywords like nodownload or nofullscreen, you can further control which controls are visible and how they behave.

4. How to add video in HTML without controls?

To add a video in HTML without default controls, simply omit the controls attribute from the <video> tag:

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