YouTube iFrame API, getting current caption language after changing via external controls or internal player controls not working

Question

After changing the CC language via API controls or YT player controls, using the API to check for the currently-displayed language does not seem to return the updated CC language -- it always returns the initially-loaded CC language.

I am able to set up the player with a targeted language, as well as parse the available list of caption languages in a YT video and set the CC language via external controls (or the internal YT controls) during playback. I have to use the YT iFrame API, can't be the v3 Data API at this time. I've tested on jsfiddle and my hosted environment.

Here is a simple fiddle demonstrating the issue. The video starts with English language as default, and the 3 language buttons below the video successfully swap CC language during playback. The "check current" button should fill the "current lang" box with the currently-selected language code, but it is always returned as English.

http://jsfiddle.net/4wdo9ztu/2/

html:

<div id="player"></div>
<div class="uiButtonBox">
  <div class="uiButton checkCurrentCCLang">Check Current CC Lang -> </div>
  Current CC Lang: <div class="indicator"></div>
  SET : 
  <div class="uiButton english">English</div>
  <div class="uiButton urdu">Urdu</div>
  <div class="uiButton ukranian">Ukrainian</div>
</div>

js(+jquery):

var player;
var defaultLang = "en";
var languageList = null;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$(document).on("click", ".english", function(event){
    setCCLanguage("en");
});
$(document).on("click", ".urdu", function(event){
   setCCLanguage("ur");
});
$(document).on("click", ".ukranian", function(event){
    setCCLanguage("uk");
});
/* ---[ want the lang. code of the currently-visible cc lang. ]---*/
/* ---[ but only results in the initially-defined cc lang. ]---*/
$(document).on("click", ".checkCurrentCCLang", function(event){
    var grabData = player.getOption( "captions" , 'track' );
  $('.indicator').text( grabData.languageCode );
});
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height:                 '390',
        width:                  '640',
        videoId:                't6bbuDUPIgk',
        enablejsapi:            true,
        playerVars: {
                    'cc_lang_pref' :    defaultLang
        },
        events: {
            'onReady':          onPlayerReady
        }
    });
}
function onPlayerReady(event){
    $('.indicator').text(defaultLang);
    player.playVideo();
}
/* ---[ setting the language ]---*/
function setCCLanguage(langCode){
    player.setOption( "captions" , 'track' , { 'languageCode' : langCode } );
}

The attempt to grab the current CC track lang. code always returns the initial language ("en" in this case), I'm expecting it to return the code of the current CC lang. (should be "ur" for Urdu, "uk" for Ukrainian in this example)

score 0 · Answer 1 · answered Jun 24 '19 at 18:35

No idea honestly why isn't working as expected, but, since you're setting the language correctly in the video, just add an global variable where the value is the clicked language.

So, in the function, you just get the value of the given global variable.

Example:

// This is your global variable which will contain the language code (i.e: en, uk, ur).
var CONST_LNG = "en"; // Set default value/language as "en".

Now, in the click events of each of your div/buttons for set the lange, add the following line:

CONST_LNG = "en"; // or the language you desire.

Modified event-clicks:

$(document).on("click", ".english", function(event) {
  CONST_LNG = "en"; // Set global variable value to "en".
  setCCLanguage("en");
});
$(document).on("click", ".urdu", function(event) {
  CONST_LNG = "ur"; // Set global variable value to "ur".
  setCCLanguage("ur");
});
$(document).on("click", ".ukranian", function(event) {
  CONST_LNG = "uk"; // Set global variable value to "ur".
  setCCLanguage("uk");
});

Then. in your checkCurrentCCLang click event, replace the lines with this one:

$('.indicator').text(CONST_LNG);

Modified click event:

/* ---[ want the lang. code of the currently-visible cc lang. ]---*/
/* ---[ but only results in the initially-defined cc lang. ]---*/
$(document).on("click", ".checkCurrentCCLang", function(event) {
  $('.indicator').text(CONST_LNG);
});

Here is the modified jsfiddle you provided in your question.

YouTube iFrame API, getting current caption language after changing via external controls or internal player controls not working

1 Answers1