Bharat
Bharat

Reputation: 133

How to disable HTML Video Player playback speed / three dots

I don't want to show playback speed in my video, is there any controls or controlList properties to disable that option like controls disablepictureinpicture controlslist="nodownload"

Upvotes: 13

Views: 20262

Answers (4)

Amir Mahdi Nassiri
Amir Mahdi Nassiri

Reputation: 1330

As of Chrome version 104 adding noplaybackrate to controlsList hides the "Playback Speed" from the menu, but users can still right-click on the video and choose "Show all controls" to bring it back!

Additionally, adding noplaybackrate to controlsList doesn't work in Firefox as of version 103.

What I did to force my video to play at regular rate (1) is to subscribe to onratechange and bring it back to the playback rate that I want as below:

let video = document.getElementById(mediaElementId);

video.onratechange = function () {
    video.playbackRate = 1;
};

Upvotes: 4

Ewald Bos
Ewald Bos

Reputation: 1770

you can add the following:

video.controlsList = "noplaybackrate";

however if you want to deactivate others as well, then as such:

video.controlsList = "noplaybackrate nodownload"

and you have the last one in the list "Picture in Picture"

disable this one as such:

video.disablePictureInPicture = true;

now your three dots are gone

and to be complete to also disable the full screen function

video.controlsList = "noplaybackrate nodownload nofullscreen"

Upvotes: 16

Brian Dobony
Brian Dobony

Reputation: 229

Add the parameter 'noplaybackrate' to controlsList. It works for me.

Upvotes: 18

iamdlm
iamdlm

Reputation: 1973

According to the docs only three options are available (nodownload, nofullscreen, and noremoteplayback) and none seems to do what you want.
And you can't style the browser's default control set, but you can use the (JavaScript) Media API to build your own control set which of course you can style in any way that you like. See this CodePen.

Upvotes: 4

Related Questions