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

经过数小时的互联网搜索。终于找到了这个有用的答案。 @Xi Xiao的打印输出注释不正确，应该是大于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块中。

Answer 2

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

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 3

我已经构建了一个基于HTML-5“video-js”的页面来实现软字幕（使用VTT）。

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

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

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

3 个答案: