The chapters Text Tracks cues sometimes isn't ready on loadedmetadata

[borzaka]

Description

I have a chapters Text Tracks, and the cues sometimes isn't ready inside the loadedmetadata event.
Reduced test case: http://output.jsbin.com/sacoda/1

Steps to reproduce

• Open the reduced test case link, and check the console, sometimes you will see the error right away.
• If not, try to refresh the page couple of times.
• If you still not see the error in the console, then try to change the network throttling to 3G or 4G and refresh the page again until you see the error.

Results

Expected

The chapter file contains 5 cues, so the console.log(this.textTracks()[0].cues.length); should output 5 in the console.

Actual

The chapter file or it's cues sometimes isn't ready inside the loadedmetadata event, so it gives you an error.

Error output

I have this 3 console.log() lines:

console.log(this.textTracks()[0]);
console.log(this.textTracks()[0].cues);
console.log(this.textTracks()[0].cues.length);

And the output is this:

TextTrack {tech_: Html5, cues_: Array(0), activeCues_: Array(0), src: "https://raw.githubusercontent.com/mockenoff/HTML5-Video-Player/master/oceans.vtt", addEventListener: function…}
null
VIDEOJS: ERROR: TypeError: Cannot read property 'length' of null
    at Player.<anonymous> (http://output.jsbin.com/huvigetogu:40:40)
    at HTMLDivElement.bound (http://vjs.zencdn.net/5.20.1/video.js:22940:15)
    at HTMLDivElement.data.dispatcher (http://vjs.zencdn.net/5.20.1/video.js:22731:31)
    at Object.trigger (http://vjs.zencdn.net/5.20.1/video.js:22853:25)
    at Player.trigger (http://vjs.zencdn.net/5.20.1/video.js:1523:12)
    at Player.(anonymous function) [as handleTechLoadedmetadata_] (http://vjs.zencdn.net/5.20.1/video.js:12477:17)
    at Html5.bound (http://vjs.zencdn.net/5.20.1/video.js:22940:15)
    at HTMLVideoElement.bound (http://vjs.zencdn.net/5.20.1/video.js:22940:15)
    at HTMLVideoElement.data.dispatcher (http://vjs.zencdn.net/5.20.1/video.js:22731:31)

Note this: cues_: Array(0), but if I open that down, it is now cues_: Array(5) (Chrome says: Value below was evaluated just now.)

Additional Information

versions

videojs

5.20.1

browsers

Chrome 59.0.3071.115 (Official) (64 bit)

OSes

Windows 10

other

• The ChaptersButton component was successfully filled with the chapter's cues.
• Emulate HTMLTrackElement to enable load event. #2804 is probably related, but the cues is needed for my custom function, and I wasn't able to figure out what was the solution there and how to implement it in my code.

[gkatsev]

Yup, unfortunately loadedmetadata doesn't guarantee that the tracks have loaded. It, at best, guarantees that the list has been populated. You should listen to the load event of the track element or wait and periodically check until cues is no longer set to null to know that it's loaded.
To be able to listen to the load event, it'll probably be easiest to just include the chapter track programmatically:

var ch = player.addRemoteTextTrack({
  kind: 'chapters',
  src: '...'
});

ch.addEventListener('load', function() {
  console.log('ch has loaded');
});

Example https://jsbin.com/biveyo/2/edit?html,console,output

Hope this helps.