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（）;

1 个答案: