CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
Leff
Leff

Reputation: 1276

Removing volume control in video html player

I am wondering how can I remove the video volume control from an HTML player? As it is stated in the api, the controlslistattribute's allowed values are nodownload, nofullscreen and noremoteplayback. And since I would like to implement a sound volume controller outside of the player.

    <video
      width="100%"
      src={mediaModel.url}
      onContextMenu={disableEvent}
      controlsList="nodownload"
      onPlay={() => onVideoPlay()}
      onEnded={() => onVideoEnded()}
      controls
      disablePictureInPicture
    />

Is there a way to achieve this?

Upvotes: 0

Views: 1849

Answers (1)

johannchopin
johannchopin

Reputation: 14844

An easy solution for that is to hide the button using css:

video::-webkit-media-controls-volume-slider {
  display: none;
}

video::-webkit-media-controls-mute-button {
  display: none;
}
<video width="100%" src='' controlsList="nodownload" controls disablePictureInPicture />

Upvotes: 2

Related Questions