Interacting with VideoJS cues (vtt captions) from javascript

[bryfry]

Cross posted from StackOverflow. Any help is greatly appreciated!

I'm attempting to interact with cues loaded from a vtt file via video.js. I can do it easily and repeatable from the browser inspect console but never from the videojs load-success function. I have a suspicion that the textTrack is parsed (I can access id, kind, mode attributes) but not read (cues are null). I can't find anywhere in the documentation or source if there is a way to force the track to be read or if there is a callback or event I should be listening for.

Basic video.js invocation. Working fine, showing captions and video:

<video id="video" ..... >
  <source ..... />
  <track kind="captions" src="captions.vtt" srclang="en" default />
</video>

js, attempting to access cues:

<script>
  videojs.options.flash.swf = '/static/js/video-js.swf';
  var player = videojs('video', {}, function(){
      var tracks = player.textTracks();
      var captions; // captions track

      // find all the tracks we care about
      for (var i=0; i<tracks.length; i++) {
        var isCaptions = tracks[i].kind === "captions"
        if (isCaptions) {
          captions = tracks[i];
        }
      }
      console.log(captions, captions.id, captions.kind, captions.mode, captions.cues);
      player.play();
    }
  );
</script>

console.log:

t.t {d: t.Ea.extend.d, X: Array[0], Ga: Array[0], addEventListener: function, vdata1427596024498: 320…}
"vjs_text_track_316" "captions" "hidden" null

interactive console:

> c = player.textTracks()[0].cues[0].text
<- "first caption"

Tested with latest grunt-built master branch (version 4.12.5) in Google Chrome Version 41.0.2272.104 (64-bit)

[gkatsev]

As @heff said in IRC and the SO, it's because the tracks haven't necessarily loaded. If you interact with the tracks after a loadedmetadata event or something like that, you're much more likely to have gotten a hold of them after they're ready.

[gkatsev]

Going to close this because having a track load event is being tracked elsewhere: #1949 and #1864

[chimilord]

Hi @gkatsev,

A quick question, exists some way to get the name of vtt file? It's for sending the path to my chromecast application.

Thanks!

[chemoish]

@chimilord At what point are you wanting to get the name of the vtt file?

<video id="player_id"><track id="captions" kind="captions" srclang="en" label="English" src="captions.vtt"></track></video>

// textTrack and remoteTextTrack seem to both be populated regardless of how the text track was added.
videojs('player_id').textTracks()[0].src
videojs('player_id').remoteTextTracks()[0].src
videojs('player_id').getTrackById('captions').src

---

// only available to browsers with native text tracks—you do not need to rely on the load event
document.querySelector('#captions').addEventListener('load', function (event) {
    // event.target.src === captions.vtt
    // event.srcElement.src === captions.vtt
    // event.target.track === TextTrack{}
});

[gkatsev]

As @chemoish said, if you're using native text tracks, you can grab it from the track element (<track>) as opposed to the track object (TextTrack).
We do actually store the src of the track in emulated text tracks, though, I would probably advise against using it because it is non-standard.

Hopefully, at some point we'll actually emulate the Track element (since we need it for the load event) we'll have a consistent interface.

[chimilord]

Thanks @chemoish & @gkatsev ,

I'm using an application/dash+xml so, the path of vtt file is inside of the mpd file.
The myPlayer.textTracks(); returns an object with all cues, but I want the baseUrl of AdaptationSet to send it to my cast applications.

Thanks!

[chemoish]

Interesting, I haven't ran that use case before.

Reference:

• http://dash.edgesuite.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1.mpd
• http://vm2.dashif.org/dash.js/samples/captioning/caption_vtt.html