javascript - 如何在videojs中以编程方式添加RemoteTextTrack

Question

我正在使用 videojs 并想从 URL 添加字幕。但是播放器没有按预期进行。我的代码如下。

HTML

  <video id="media-player" class="video-js vjs-default-skin">

  </video>

JavaScript 代码

let videoOption = {
        controls: true,
        autoplay: true,
        fluid: true,
        preload: 'auto',
        poster: 'http://remote-url/1.png',
        sources: [{
          src: 'http://remote-url/1.mp4',
          type: 'video/mp4'
        }]
      };

  let captionOption = {
    kind: 'captions',
    srclang: 'en',
    label: 'English',
    src: 'http://remote-url/1.vtt'
  };

  const player = videojs('media-player', videoOption);
  player.addRemoteTextTrack(captionOption);  // palyer does not load caption
  console.log(player.textTracks().length) // print out => 0
  console.log(player.remoteTextTracks().length) // print out =>  0

Answer 1

在搜索了几个小时的互联网之后。终于找到了这个有用的答案。 @席晓打印出来的评论打错了，应该是大于0的数字。

所以在你添加之后

player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks(); 
console.log(tracks.length); // print out greater than 0

然后你可以打开字幕按钮

for (let i = 0; i < tracks.length; i++) { 
    const track = tracks[i];
    if(track.kind==='captions' && track.language === 'eng') {
        track.mode = 'showing';
    }
  }
}

所有这些代码都在 ready block 中。