Is it possible to add a caption track to a jwplayer instance after setup?

Question

I have a html template which, when published, lists the variables of that story, and one of them is a closed caption file if captions have been made for the story:

var file_cc = "../xml/cc/example.vtt";

in the external js file I setup my player (other varaibles come from the story page):

jwplayer("vplayer").setup({
    icons: false,
    sources: [
       {file: origurl},
       {file: origurlsd}
    ],
    image: origimg,
    width: "70%",
    aspectratio: "16:9",
    abouttext: "...",
    aboutlink: "...",
    skin: "/res/libraries/jwplayer/skins/target-v6-11/glow.xml"
});

In that external js I then detect if the file_cc var exists using .get()

$.get(file_cc, function() {
    console.log("found file")
})

but now, in the .done() and fail() sections of the .get() function I want to update jwplayer("vplayer) with a tracks: array.

How do I do that?

NOTE: As it turns out JWPlayer is not able to insert a totally new caption that has already been initialised. (see emaxsaun's comments to first answer). Feature requested here: http://support.jwplayer.com/customer/en/portal/questions/14415444-feature-request-allow-subtitles-to-be-inserted-after-initialisation — Daniel, Oct 13 '15 at 06:48
What I ended up doing was putting the jwplayer setup in both the success and fail functions - if successful, tracks array was added to the setup otherwise it was setup as usual. — Daniel, Oct 16 '15 at 02:45

zer00ne · Answer 1 · 2015-09-17T22:17:46.193

3

Don't know the complete code you're working with, so I'll take an educated guess:

var jw = jwplayer("vplayer");
jw.setup({
    icons: false,
    sources: [
       {file: origurl},
       {file: origurlsd}
    ],
    tracks: [{
        file: "cc_file",
        kind: "captions",
        'default': true,
        label: 'English'
    }],
    image: origimg,
    width: "70%",
    aspectratio: "16:9",
    abouttext: "...",
    aboutlink: "...",
    skin: "/res/libraries/jwplayer/skins/target-v6-11/glow.xml"
});
$.get(file_cc, function() {
    console.log("found file");
    var ccList = jw.getCaptionsList();
    var ccList[1] = file_cc;    
    ccList.setCurrentCaptions(1);
    jw.on('complete', done);
    jw.on('error', fail);
    function done() {...}
    function fail() {...}
});

To make more sense of this mess refer to: http://support.jwplayer.com/customer/en/portal/articles/1413089-javascript-api-reference#captions

UPDATE

Since the captions list entirely depends on a single setup of JW Player (as Ethan has stated), perhaps you could invoke $.get() by the JW Player's events.

var jw = jwplayer("vplayer");
jw.setup({
    icons: false,
    sources: [
       {file: origurl},
       {file: origurlsd}
    ],
    tracks: [{
        file: "cc_file",
        kind: "captions",
        'default': true,
        label: 'English'
    }],
    image: origimg,
    width: "70%",
    aspectratio: "16:9",
    abouttext: "...",
    aboutlink: "...",
    skin: "/res/libraries/jwplayer/skins/target-v6-11/glow.xml"
});

jw.on('captionsList', function(event){
    $.get('cc_file', function() {...}
});

jw.on('captionsChanged', function(event){...});

edited Sep 17 '15 at 22:17

answered Sep 14 '15 at 22:50

zer00ne

41,936
6
41
68

Thanks again @zer00ne! I'll try and incorporate it but the main difference between my constraints and your answer is that most stories don't have captions so I can't include the tracks array every time - only if the file exists. So I am going to see if .setCurrentCaptions will work. – Daniel Sep 15 '15 at 02:19
I think a captions file has to exist on setup in order for this to work I am not totally sure if this will work, but definitely worth a shot! – emaxsaun Sep 15 '15 at 02:51
@Daniel I think your'e on the right track, and Ethan is right about the caption having to exist first. In order to have both JW Player and your other script to cooperate with each other consistently you could create dummy VTTs and make them transparent with `backgroundOpacity: 0;` and `colorOpacity: 0;`. See this for more details: http://support.jwplayer.com/customer/en/portal/articles/1482067-styling-captions-for-fcc-compliance – zer00ne Sep 15 '15 at 18:57
Hey @zer00ne that is a brilliant suggestion! I could have a blank one apologising to viewers that this video is NOT captioned which is better than just nothing. Thanks heaps! – Daniel Sep 16 '15 at 01:59
No problem @Daniel I'm glad you got things sorted out :) – zer00ne Sep 16 '15 at 02:02
I've tried to work this out without contacting again but I can't seem to solve the issue of line: `var ccList[1] = file_cc` reporting: "Uncaught SyntaxError: Unexpected token [". Also, reading setCurrentCaptions suggest that it is used to specify captions that are already defined in setup to a new index and that it should be jw.setCurrentCaptions(1)? Do either @EthanJWPlayer or @zer00ne know if using that ccList variable will work on the `jw` instance? Here's a live page I'm testing this all on http://www.abc.net.au/btn/story/s4247984.htm located on line 175 of ext js file btn.global.cc.js. – Daniel Sep 17 '15 at 03:00
Like I mentioned before, I think the player needs to be set up entirely again in order to do this. – emaxsaun Sep 17 '15 at 14:15
@Daniel I would defer to Ethan's advice. Since these methods must depend on the setup, see what's possible using JW Player's events, see update example. – zer00ne Sep 17 '15 at 22:04
Thanks. @EthanJWPlayer, do you know if there is an api that will allow a caption that was not defined in setup to be inserted into the player? .setCurrentCaptions(index) seems to only allow the specification of a track that already exists in the setup, not the insertion of a completely new track. – Daniel Sep 18 '15 at 01:41
1

Yeah, I am pretty sure that there is not an API for this (http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference) – emaxsaun Sep 18 '15 at 13:32

Is it possible to add a caption track to a jwplayer instance after setup?

1 Answers1