CODEWITHSUNDEEP
javascriptdynamicvideo.jscaptions
mahyard
mahyard

Reputation: 1238

Dynamically change videojs captions with addTextTrack()

I'm trying to build some thing like a video gallery which you can select a video to show up by clicking on its thumbnail. Now I'm at phase of loading appropriate subtitles for the chosen video. Thanks to google I understand that videojs has a method to help me called addTextTrack() but unfortunately there is not a good sample or documentation for it. After all I tried to find its parameters and behavior via reading the video.dev.js codes. but as I understand this method has just three params (kind, label, language) and the thing that I didn't understand is that: How can I set the src to load the subtitle file. I think its a bug and it doesn't work properly and I want to report it if you're agree with me.

The following code adds cc icon to the player but it doesn't show the subtitle (How can it be shown when I didn't tell him the URL to load)

var myPlayer = videojs('video-id');
myPlayer.addTextTrack('captions', 'En', 'English');

I checked videojs 5.0.0 addTextTrack method and there wasn't any significant changes.

Upvotes: 3

Views: 5464

Answers (2)

Numb3rs
Numb3rs

Reputation: 111

The text track did never get updated dynamically and after a long search, I had found a solution for my problem. When I change the video source I replace the text track and set it on mode="showing":

let player = videojs('first-player');
player.addRemoteTextTrack({
            kind: 'captions',
            src: 'my-track-path.vtt',
            mode: 'showing'
}, false);

Upvotes: 3

mahyard
mahyard

Reputation: 1238

After about a month without any answer to my question, I don't know yet why addTextTrack() doesn't work properly. But thanks God, I found a way to achieve my goal:

To dynamically changing all text tracks

var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
  player.removeRemoteTextTrack(oldTracks[i]);
}
myNewTracks.forEach(function(track) {
  player.addRemoteTextTrack(track);
});

Upvotes: 6

Related Questions