VideoJs 文本轨道提示为空的解决方法

Question

我需要能够从VideoJs的TextTracks对象中获取Cues数组。

我有以下代码：

videojs("example_video_1", {}, function(){
   // Player (this) is initialized and ready.
    var aTextTrack =  this.textTracks()[0];

    aTextTrack.show();
    var theArray = this.textTracks()[0]['$'];
    console.log(theArray);
    console.dir(this.textTracks()[0]['$']);
    // EXAMPLE: Start playing the video.
    this.play();

}); 

变量 theArray 打印为空，但是 console.dir 打印了数组的内容。我该如何获取这些值呢？我知道这与 JavaScript 异步变量有关。

谢谢

- Adrian Avendano

Answer 1

这是正确的答案。由于videoJS的文档不多，我花了一些时间来破解它。

videojs("example_video_1", {}, function(){
    // Player (this) is initialized and ready.
    var aTextTrack =  this.textTracks()[0];
    aTextTrack.on('loaded', function() {
            console.log('here it is');
            cues = aTextTrack.cues();
            console.log('Ready State', aTextTrack.readyState()) 
            console.log('Cues', cues);
    });

    aTextTrack.show();//this method call triggers the subtitles to be loaded and loaded trigger
    this.play();

});

- Adrian Avendano

Answer 2

@Adrian; 这些是VideoJS的压缩内部对象，如果您在代码中使用它们，它将使工作在下一个VideoJS版本中过时。

如果可能的话最好利用VideoJS的API。在这种情况下，他们没有API来读取字幕，所以您有几个选择：

1. 使用CSS重新设计您想要的字幕显示对象。

2. 使用JS扫描字幕显示HTML并在文本更改时触发事件。然后，您可以捕获文本并在JS应用程序中使用它。

扫描div会对浏览器产生压力，因此如果可能，我建议尝试#1。

- JaredBroad

Answer 3

截至2015年，您可以在文本轨道上监听loadeddata事件（videojs PR），尽管其文档不是非常清晰。

// add a text track
player.one('loadedmetadata', () => {
  player.addRemoteTextTrack({
    kind: 'captions',
    language: 'en',
    label: 'English',
    src: '/path/to/subtitles',
  }, true)
})

// listen for text tracks being added
player.textTracks().addEventListener('addtrack', (event) => {
  // listen for the track's cues to finish loading
  event.track.on('loadeddata', () => {
    doSomethingWithCues()
  })
})

- velvetkevorkian