If we want to control media playing in html, there are two options.

First, we could use the native controls by setting the controls attribute in video tag.

<video controls src="https://yaox023.com/static/big_buck_bunny_720p_surround.mp4" ></video>

Then we get a basic controls like below if in Chrome.

The second option is to draw your own elements and control media playing by native api.

As you can see, there is no middle ground here. Either you want them all or none of them. Sometimes, we just want some of them, and that's Controls List API comes in.

This API is intended to provide options to to pick which components of the controls should be available to the users.

To use this API, we need to check browser support first. Because for now, only browsers based on chromium support this.

window.onload = () => {
  const video = document.querySelector('video');
  if (video && video.controlsList && video.controlsList.supports('noplaybackrate')) {
    console.log('"noplaybackrate" is supported.');
  }
}

if the above check passes, then we can use it in html.

<video controls controlsList="noplaybackrate" src="https://yaox023.com/static/big_buck_bunny_720p_surround.mp4" ></video>

As the name says, noplaybackrate will disable playbackrate in controls.

As explainer says, currently we have four controlsList token to use.

<video controls controlslist="nofullscreen nodownload noremoteplayback noplaybackrate"></video>

Note that noplaybackrate has just been added in Chrome version 93. It is always recommended to check if your browser supports it before using it.