YouTube iframe API changeState 未被调用

Question

我试图使用YouTube iframe API在视频完成播放后触发事件。包含YouTube视频的iframe与文档一起加载，并在URL中具有enablejsapi=1参数，如下所示:

<iframe id="myytplayer" src="http://www.youtube.com/v/8mmd_eHYmMY?enablejsapi=1&playerapiid=ytplayer&version=3" allowfullscreen="" frameborder="0"></iframe>

我已经成功地实现了onYouTubeIframeAPIReady函数，但是我不能在YouTube对象中添加事件侦听器，一旦它准备好了。播放/暂停视频时不显示播放器状态警报。这是我的javascript代码:

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
    // check player ended
}
function onYouTubeIframeAPIReady() {
    alert("ready");
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", onytplayerStateChange);
}

我还必须加载以下资源，以便显示"ready"警报。

<script src="http://www.youtube.com/player_api" type="text/javascript"></script>

我在这里创建了一个jsFiddle

Answer 1

你不能添加一个事件监听器只是DOM元素(你可以在旧的javascript API);使用iframe API，您必须创建一个YT。首先基于DOM元素的播放器对象，然后在那里添加事件侦听器。像这样:

function onYouTubeIframeAPIReady() {
    ytplayer = YT.Player("myytplayer", {
    events: {
      'onStateChange': onPlayerStateChange
    }
}

另外，要小心一点加载player_api通过一个脚本标签…没有保证你的onYouTubeIframeAPIReady函数将被定义，当它完全加载。在定义ready函数之前，最好这样做:

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);