javascript - YouTube API 更改事件未触发

Question

我已经在 J​​SFiddle、我的本地服务器和生产服务器上进行了尝试，但我无法弄清楚我的事件处理程序出了什么问题。它永远不会开火。此外，当我在 Google Chrome 中运行时，我没有收到任何错误，当我在 Safari 中运行时，我得到:

Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". Protocols, domains, and ports must match.

我错过了什么？

代码:

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

<iframe 
    id="player" 
    width="426" 
    height="240" 
    src="http://www.youtube.com/embed/21eGxOKUxeM?enablejsapi=1&origin=*" 
    frameborder="0" 
    allowfullscreen></iframe>

<script>
    function player_state_changed(state) {
        alert('state changed');           
    }
    document.getElementById('player').addEventListener(
        'onStateChange', player_state_changed
    );
</script>

Example in JS Fiddle

Answer 1

@Justin——为了回应您的评论，这里有一些代码和简短的解释。有两点需要注意……首先，我通常像这样加载 iFrame API 库:

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

这样，直到页面加载后才会加载，这是第二步的关键——当代码加载时，它会自动调用函数onYouTubeIframeAPIReady，您需要定义。在此函数中，您可以创建绑定(bind)的播放器对象。如果您尝试在此回调函数之外执行此操作，则 A) 冒着在加载 iframe API 库之前创建播放器对象的风险，这意味着它无法触发任何播放器功能，并且 B) 无法绑定(bind)到已经存在的元素存在于页面上，因为它们可能尚未加载。它看起来像这样:

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player("ytplayer", {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    alert("now playing ...");
  }
}
</script>

这假设我已经为我的 iframe 提供了 ytplayer 的 ID，并且我已经将“?enablejsapi=1”附加到 iframe 的 src 属性的 URL。

这是一个工作 fiddle :http://jsfiddle.net/jlmcdonald/PQy4C/261/