API YouTube iFrame, получение текущего языка заголовков после изменения с помощью внешних элементов управления или внутренних элементов управления проигрывателя не работает

Question

После изменения языка CC с помощью элементов управления API или элементов управления проигрывателя YT использование API для проверки текущего отображаемого языка, похоже, не возвращает обновленный язык CC - оно всегда возвращает изначально загруженный язык CC.

Я могу настроить проигрыватель с целевым языком, а также проанализировать доступный список языков субтитров в видео YT и установить язык CC с помощью внешних элементов управления (или внутренних элементов управления YT) во время воспроизведения. Я должен использовать API YT iFrame, в настоящее время я не могу быть API данных v3. Я тестировал на jsfiddle и в моей хостинговой среде.

Вот простая скрипка, демонстрирующая проблему. Видео начинается с английского языка по умолчанию, а 3 языковые кнопки под видео успешно меняют язык CC во время воспроизведения. Кнопка «Проверить текущий» должна заполнить поле «Текущий язык» текущим выбранным языковым кодом, но оно всегда возвращается как английский.

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 } );
}

Попытка получить текущий трек CC. code всегда возвращает исходный язык (в данном случае «en»), я ожидаю, что он вернет код текущего языка CC. (должно быть "ur" для урду, "uk" для украинского в этом примере)

Answer 1

Честно говоря, не знаю, почему не работает должным образом, но, поскольку вы правильно устанавливаете язык в видео, просто добавьте глобальную переменную, в которой значением является clicked language.

Итак, в функции вы просто получаете значение данной глобальной переменной.

Пример:

// 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".

Теперь, в событиях кликов каждого из ваших div / кнопок для установки языка, добавьте следующую строку:

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

Измененные события-клики:

$(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");
});

Тогда. в вашем checkCurrentCCLang клике замените строки этой:

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

Изменено событие клика:

/* ---[ 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);
});

Вот модифицированный jsfiddle , который вы указали в своем вопросе.