未调用 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);
}

我还必须加载以下资源才能显示“就绪”警报。

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

我创建了一个 jsFiddle here。

Answer 1

您不能只向 DOM 元素添加事件侦听器（就像在旧的 javascript API 中一样）；使用 iframe API，您必须首先基于 DOM 元素创建一个 YT.player 对象，然后在其中添加事件侦听器。像这样的：

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

另外，通过脚本标签加载 player_api 时要小心一点……不能保证你的 onYouTubeIframeAPIReady 函数会在完全加载时被定义。最好在定义你的准备函数之前做这样的事情：

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