Search code examples
javascriptvideovideo.jssubtitle

I changed the vtt subtitle file using javascript in videojs, but the content is not reflected


        if (__evt__.player.options_.tracks[0] != null) {
        //__evt__.player.options_.tracks[0] = {src: vttsrc,kind:'subtitles' ,srclang:'ko',label:'korean'};
        //__evt__.player.options_.tracks.splice(0,1,{src: vttsrc,kind:'subtitles' ,srclang:'ko',label:'korean'})
        console.log(__evt__.player.textTracks_.tracks_);
        __evt__.player.textTracks_.tracks_[0].src = vttsrc;
        __evt__.player.textTracks_.tracks_[0].label = "02";
        __evt__.player.options_.tracks[0].src = vttsrc;
        __evt__.player.options_.tracks[0].label = "02";
        //__evt__.player.textTracks_.tracks_[0] = {src: vttsrc,kind:'subtitles' ,srclang:'ko',label:'korean'};
        console.log(__evt__.player.textTracks_.tracks_);

    } else {
        __evt__.player.options_.tracks.push({src: vttsrc,kind:'subtitles' ,srclang:'ko',label:'korean'});
    }

The above source code pushes the subtitles for the first video, and after that, the track information is modified and reflected in javascript at the [0]th.

The normal operation of the first subtitle has been confirmed. When the second video was played, it was also confirmed that the label was changed normally.

However, there is a problem that the subtitles of the second video are not output normally, and the first subtitles are output.


Solution

  • Rather than modifying options after player init, use removeRemoteTextTrack() and addRemoteTextTrack() to replace the tracks.

    https://docs.videojs.com/tutorial-text-tracks.html#remote-text-tracks