VideoJs TextTracks Cues为空

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();

}); 

var theArray打印为空，但console.dir打印数组的内容。我怎样才能获得这些价值？我知道它与javascript asyc变量有关。

干杯

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();

});

Answer 2

@Adrian;这些是VideoJS的缩小的内部对象，如果你将它们用于你的代码，它将使得下一版本的VideoJS的作品变得过时。

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

1. 使用CSS将字幕显示对象重新放置在您想要的位置。

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

在浏览器上扫描div会非常密集，所以如果可能，我建议＃1。

Answer 3

从 2015 年开始，您可以在文本轨道 (videojs PR) 上收听 loadeddata 事件，尽管它没有很清楚地记录

// 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()
  })
})