Как динамически изменять видеоидентификатор Youtube Player

Я хочу использовать код YT.Player, чтобы я мог обнаруживать события. У меня есть файл CSV с идентификатором видео Youtube и функция, которая помещает идентификатор в массив и хочет иметь возможность динамически изменять ID при щелчке пользователем изображения. По существу, вот так:

html

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

Javascript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
// NOTE: videoId is taken out and instead is placed as the generated IFRAME src from the postSelection function

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: '<<CALL TO FUNCTION OR VARIABLE HERE>>',
      events: {
         //'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

Если вы знакомы с этим кодом, тогда произойдет замена #player DIV на IFRAME. Я могу изменить источник IFRAME с помощью этой функции:

function postSelection() {
    $("#player").attr("src", _selected.attributes.url); //_selected.attributes.url comes from the CVS file
}

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

С уважением.

Ответ 1