JWPlayer how to change Captions Track from Javascript?

Question

In JWPlayer, how to change (or set) the Caption Tracks as i like .. lets say by clicking on the external HTML Buttons.

Lets say:

• If i click html [ Button 1] the Video will be captioned with "eng.srt".
• If i click html [ Button 2] the Video will be captioned with "esp.srt".

And may be there was No Captions Tracks from the start at all. The respective Captions Tracks will be just set upon the html button click (even while playing?)

Answer 1

You can change the subtitles using this javascript-api-reference

Captions

These API calls are used to listen to or update the active captions track if one or more closed captions tracks are provided with a video. This API can be used to log captions usage or build your own CC menu outside JW Player.

setCurrentCaptions(index) Change the visible captions track to the provided index. The index must be within the list provided by getCaptionsList. Note an index of 0 always turns the captions Off.

onCaptionsList(callback) Fired when the list of available captions tracks is updated. Happens shortly after a playlist item starts playing. Event attributes: tracks (Array): the full array with new captions tracks.

onCaptionsChange (callback) Fired when the active captions track is changed. Happens in respons to e.g. a user clicking the controlbar CC menu or a script calling setCurrentCaptions. Event attributes: track (Number): index of the new active captions track in the getCaptionsList() array. Note the captions are Off if the track is 0.

Example set up

<div id="myElement"></div>
<div id="Off_sub">OFF</div>
<div id="Eng_sub">ENG</div>
<div id="Farsi_sub">FARSI</div>
<div id="Jap_sub">JAPANESE</div>
<div id="Russ_sub">RUSSIAN</div>

<script>
    jwplayer("myElement").setup({
      playlist: [{
        image: "/uploads/myPoster.jpg",
        file: "/uploads/myVideo.mp4",
        tracks: [
          { file: "/uploads/myCaptionsEn.vtt", label: "English", kind: "subtitles" },
          { file: "/uploads/myCaptionsFa.vtt", label: "Farsi", kind: "subtitles" },
          { file: "/uploads/myCaptionsJa.vtt", label: "Japanese", kind: "subtitles" },
          { file: "/uploads/myCaptionsRu.vtt", label: "Russian", kind: "subtitles" }
        ]
      }]
    });
</script>

YOUR REQUIREMENT

<script>

$("#Off_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(0);//off the caption
});
$("#Eng_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(1);//Eng caption
});
$("#Farsi_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(2);//Farsi caption
});
$("#Jap_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(3);//Japanese caption
});
$("#Russ_sub").click(function(){
  jwplayer("myElement").setCurrentCaptions(4);//Russian caption
});
</script>

Refer below API list for better understanding :

Javascript API Reference

Multiple Subtitle Tracks

Adding Video Captions

Hope it helps :)