Youtube javascript api, pjax, 如何重新加载 onYouTubeIframeAPIReady();答案

【问题标题】：Youtube javascript api, pjax, how to reload onYouTubeIframeAPIReady();Youtube javascript api, pjax, 如何重新加载 onYouTubeIframeAPIReady();
【发布时间】：2016-04-28 08:21:12
【问题描述】：

我的 youtube javascript player api 有问题。

我称之为js代码：

function onYouTubeIframeAPIReady() {
  var podcast = document.getElementById('podcast')
  var player = new YT.Player( document.getElementById('podcast'));
  player.addEventListener('onStateChange', function(e) {
    if (e.data === 1) {
      alert("play");
    }
  });
};

使用此 html 代码：

<iframe id="podcast" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/XXXXXX?cc_load_policy=1&enablejsapi=1&theme=light"
frameborder="0" allowfullscreen>

问题是我使用的是pjax系统，所以导航时全局javascript代码没有重新加载。因此，当 pjax:success 时，我重新加载了部分 javascript 代码。我尝试过这样的事情：

$(document).on('pjax:success', function() {
  onYouTubeIframeAPIReady();
}

但它不起作用。我的问题是如何重新加载 onYouTubeIframeAPIReady();当它必须像那里所说的那样被全局定义时onYouTubeIframeAPIReady function is not calling

【问题讨论】：

标签： youtube-javascript-api pjax

【解决方案1】：

定义我的播放器后，我不使用 onYoutubePlayerAPIReady。这是我找到的最佳解决方案，而且很有效。

var player = {
    playVideo: function(container, videoId) {
        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
            window.onYouTubePlayerAPIReady = function() {
                player.loadPlayer(container, videoId);
            };
            $.getScript('//www.youtube.com/player_api');
        } else {
            player.loadPlayer(container, videoId);
        }
    },
    loadPlayer: function(container, videoId) {
        window.myPlayer = new YT.Player(container, 
            height: 200,
            width: 200,
            videoId: videoId,
        });
    }
};


var containerId = 'podcast';
var videoId = '<%= @youtube_id %>';
player.playVideo(containerId, videoId);

【讨论】：