Can't Control Display of Text Tracks via JS anymore?

[Manbearpixel]

I upgraded from v4.8.0 to v4.12.5 for support of some ad plugin for VideoJS but I now have noticed I can no longer control the display (show/hide) of a text track, in this case, captions.

I used to be able to run vjsPlayer.textTracks()[0].show() to show a text track, or vjsPlayer.textTracks()[0].disable() to hide a text track and then on top of that, trigger an event which updates the Closed Captions menu to reflect the change: this.player_.on(track.kind() + 'trackchange', vjs.bind(this, this.update));

All of that seems to now be missing in v4.12.5 and from looking at the changelog file I don't see why... I now see this error in the console:
this.vjsPlayer.textTracks(...)[0].show is not a function

So obviously it has been removed. Is there a new way of controlling the state of a closed caption / text track and updating the menu to reflect that change?

[gkatsev]

We really need to update our documentation for this :/
However, our text tracks are now spec compliant. The way you'd change whether you want a text track showing or not is by changing its mode. mode can be set to one of the following three options:

• showing - the text track is visible and updating and firing events
• disabled - the track track isn't visible and isn't firing events
• hidden - the track track isn't visible but it is firing events.
  So, to hide a track, you can do:

player.textTracks()[0].mode = 'disabled';

And to re-show the track:

player.textTracks()[0].mode = 'showing';

Going to close this, since hopefully, we won't need to do anything in core. But please ask questions here if you're having trouble or unsure of anything.

[Manbearpixel]

Okay, thanks @gkatsev . I see that the CC now switches within the menu to reflect whether a caption is active or not, but the class 'vjs-hidden' is still attached the the 'vjs-text-track-display' and no text has been loaded into there. Is there anything else I need to do to actually have the captions displaying? Even manually clicking the caption (without use of JS) does nothing.

[gkatsev]

Huh, that's weird. It should be showing up. Have an reduced test case?

[Manbearpixel]

@gkatsev Let me whip one up..

[Manbearpixel]

@gkatsev Heres a plunkr:
http://plnkr.co/edit/axPGuTfsIeVljddHw4uW

Loaded v4.12.5 - There are two players, one which adds a Closed Caption track dynamically (in the VideoJS ready function call using addTextTrack) and the other which loads manually (within the <video> tag)

I added color to menu items which are selected vjs-selected since the default is dark #000 which seems a bit off since the background is dark too, but thats just a preference I guess.

Both of them show ClosedCaptions but neither show the captions when enabled. Upon further inspection no text shows up either within the DOM element, so it's not an issue of positioning/styline as there is nothing there anyways.

This worked fine in v4.8.0, although that was a decent amount of versions ago. Can you reopen this issue?

[gkatsev]

Ah, I think I know what the issue is.
By default, we try to have the browser handle loading of captions, which is why the text track display is hidden. This also produces an issue because the browser needs to be told to load text tracks from other domains via the crossorigin attribute. This is being tracked here: #1888. You should be able to try that out yourself until we finally get around to making videojs track it for you. I believe you also need to enable CORS headers for your tracks in this scenario, but not certain, though, you probably want them enabled anyway.
If you want to use the tracks with the flash tech, you'll need CORS headers on the tracks because we download the tracks manually and parse them in javascript. You can also ask videojs to always load the emulated captions by passing "nativeTextTracks" to the html5 config in the options:

videojs('player', {
  html5: {
    nativeTextTracks: false
  }
});

Hopefully, that makes sense.

[Manbearpixel]

On our end, our Captions are open , so CORS is setup and available (this was an issue before but we fixed it) so in v4.8.5 it worked flawlessly.

I added the html5 option variable into the plugin and it works for manually adding the text track, but when it is added dynamically, through the ready function, it doesn't. Any additional thoughts? :/

[gkatsev]

Ah, so you do have CORS headers, cool. Adding crossorigin="anonymous" does make the second player work for me.
Also, I realized why the first player wasn't loading the text track. The APIs were also changed to be spec-compliant. addTextTrack creates a text track for you to use programmatically. addRemoteTextTrack needs to be used to load in a remote text track.
I update the plunkr with the above changes: http://plnkr.co/edit/0AbhO1e7nIac2qN7xtfz?p=preview

Also, if you get an error using addRemoteTextTrack it seems like it's yet another minification bug :/, but it should still work

[Manbearpixel]

Ah alright. Thanks for letting me know about the new function @gkatsev . I am noticing that there doesn't seem to be a control of styling for the captions either. >_>

[sgavali]

Can it be done for chapter track too ? Also can some one share an example. I'm not able to see JS in demo shared by gkatsev.

[gkatsev]

@sgavali can you elaborate on what you mean about the chapters track?

[sgavali]

https://github.com/videojs/video.js/blob/stable/docs/guides/tracks.md
Chapters: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.

I can dynamically create captions and chapters. But chapters can be only seen in PC chrome.
On Android chrome dynamic chapters are not visible, dynamic captions are working correctly.
If I add chapters in

On 5.x I can see chapter controls being created but they don't have any effect / chapter data,

Sample code:

    var player = videojs('example-video');
    player.nativeTextTracks = false;
    player.ready(function(){
        var oldTracks = player.remoteTextTracks();
        var i = oldTracks.length;
        while (i--) {
          player.removeRemoteTextTrack(oldTracks[i]);
        }
        var track1 = {
         kind: 'captions',
         src: 'subtitles.vtt',
         srclang: 'en',
         label: 'English',
         default: 'default'
        };
        player.addRemoteTextTrack(track1);

        var track2 = {
         kind: 'chapters',
         src: 'chapters.vtt',
         srclang: 'en',
         label: 'English',
         default: 'default'
        };
        player.addRemoteTextTrack(track2);
    });