How to disable Chrome Media Controls button with Javascript? (Stop it from showing names of videos or audio playing)

user_12209793 0
Viewed 465

I'm working on a webgame that displays YouTube and Vimeo videos. It's crucial that users not be able to see the title of the YouTube video, and they can do exactly that when clicking the media controls button in the top right of the chrome browser. The attached screenshot shows what I mean. I don't want that popup to happen. Any ideas, or potential solutions will be greatly appreciated.

[![Music Notes with 3 bars to the left is what I want to delete][1]][1]

The worst case scenario is that I would have to be able to detect when it occurs so I can take preventative action with Javascript.

Please provide any answers. I can't find any other forum with anything relating to this.

frontend google-chrome browser javascript
1 Answers

The only way I can think of right now is to override the active mediaSession metadata with yours.
For this you'll need to play an audio file from your page (preferably a short one, maybe just silence).

// set the mediaSession's metadata to an empty MediaMetadata
navigator.mediaSession.metadata = new MediaMetadata({});
// we need to start playing an audio so that our metadata is set
const aud = new Audio("silence.mp3");
aud.loop();
aud.play(); // this requires the user already interacted with your page

Outsourced live example since StackSnippets' iframes don't allow YT's embedded videos.

user_37027970
Related