Question

我正在尝试使用YouTube iframe API在视频播放结束后触发事件。包含YouTube视频的iframe随文档一起加载，并在网址中包含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);
}

我还必须加载以下资源才能获得＆＃34; ready＆＃34;警示出现。

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

未调用YouTube iframe API changeState

1 个答案: