如何在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

事实证明，在任何 API 调用之前都需要 ready 函数。

let player = videojs('media-player', videoOption);
player.ready(function () {
  player.addRemoteTextTrack(captionOption);
  console.log(player.textTracks().length) // print out => 0
  console.log(player.remoteTextTracks().length) // print out =>  0
});

Answer 2

我构建了一个基于 HTML-5 "video-js" 的页面，实现了软字幕（使用 VTT）。

您可能想查看源代码，看看是否有任何编码对你的努力有用。页面在这里：

http://weasel.firmfriends.us/Soft-VTT-Cloud/

Answer 3

在搜索了几个小时的互联网之后。终于找到了这个有用的答案。 @席晓打印出来的评论打错了，应该是大于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';
    }
  }
}

所有这些代码都在就绪块中。

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

How to addRemoteTextTrack programmatically in videojs

javascript

video.js