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

Question

我的 YouTube javascript 播放器有问题 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

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

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

Youtube javascript api, pjax, how to reload onYouTubeIframeAPIReady();

pjax

youtube-javascript-api