CODEWITHSUNDEEP
javascriptreactjsreact-nativevideo.jscaption
Dheeraj Kumar
Dheeraj Kumar

Reputation: 120

how to remove caption setting option from caption cascading on videojs in React?

Actually I have used addRemoteTextTrack for adding custom cascading on videojs. This is working fine. But when I am clicking on caption setting option. caption i.e being duplicated. I need a solution for this problem. That may be either I hide caption settings option from video or after making some changes after which repeat ion won't be occurred.

For adding caption I have added this code on videojs.

player.addRemoteTextTrack({ mode: 'showing', kind: "captions", label: "English", language: "en" }, false);

enter image description here

Upvotes: 1

Views: 2034

Answers (2)

Sami Hamaizi
Sami Hamaizi

Reputation: 3

Add this to your css

.vjs-subs-caps-button {
  display: none;
}

if you are using styled-components you can do this to your video component container

const Container = styled.div`
.vjs-subs-caps-button {
  display: none;
}

then wrrap you video compoennt like this :

<Container>
  <VideoJS
    options={videoJsOptions}
  />
</Container>

`

Upvotes: 0

Dario Fiore
Dario Fiore

Reputation: 473

The "easiest" way to hide it is to set the textTrackSettings option to false and then add a bit of css to the page:

var player = videojs(videoEl, {
  // make the text track settings dialog not initialize
  textTrackSettings: false
});

Then in your css file:

/* hide the captions settings item from the captions menu */
.vjs-texttrack-settings {
  display: none;
}

Upvotes: 2

Related Questions