VideoJs TextTracks Cues empty

Question

I need to be able to get the Cues array from TextTracks object in VideoJs.

I have the following code:

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

}); 

The var theArray prints as empty but console.dir prints the contents of the Array. How can I get these values? I know its related with javascript asyc variables.

Cheers

Answer 1

This is the right answer. It took me a while to hack it as there is not much documentation on 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; these are the minified internal objects of VideoJS and if you use them for your code it would render work obsolete with the next version of VideoJS.

It would be better to tap into the API for VideoJS if possible. In this case they don't have an API to read out the subtitles so you have a few options:

1. Use CSS to restyle the subtitle-display object where you want it.

2. Use JS to scan the subtitle-display HTML and fire an even when the text changes. Then you could capture the text and use it in your JS application how you'd like.

Scanning a div will be intensive on the browser so I'd recommend #1 if possible.

Answer 3

As of 2015 you can listen for the loadeddata event on the text track (videojs PR), although it's not very clearly documented

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