YouTube的API更改事件不触发(YouTube API Change Event Not Fi

我曾尝试在的jsfiddle，我的本地服务器上，并在生产服务器上，我想不出有什么不对我的事件处理程序。它永远不会触发。此外，当我在谷歌浏览器上运行我没有错误，当我在Safari上运行，我得到：

封闭原点“的帧http://www.youtube.com访问的帧与原籍”“ http://jsfiddle.net ”。协议，域和端口必须匹配。

我在想什么？

码：

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

例如，在JS提琴

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 ，你需要定义。它的这个功能，你可以创建你绑定的玩家对象中。如果你尝试做这个回调函数外，你A）运行的iframe API库加载，这意味着它可能不会触发任何播放器功能之前创建您的播放器对象的风险，B）不能绑定到元素已经存在，因为他们可能还没有被加载到页面上。它看起来像这样：

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 YouTube播放器的ID，而我已经附加“？enablejsapi = 1”的iframe的src属性的URL。

这里有一个工作小提琴： http://jsfiddle.net/jlmcdonald/PQy4C/261/

Answer 2:

我能得到它的工作将通过JavaScript包括视频，而不是一个<iframe> 不过不知道为什么它不会，如果我有工作<iframe>添加自己...但是这不会工作：

http://jsfiddle.net/Mm88p/4/

<div id="player"></div>

<script src="https://www.youtube.com/player_api"></script>
<script>
// YouTube API
player = new YT.Player('player', {
    height: '240',
    width: '426',
    videoId: '21eGxOKUxeM',        
    events: {      
      'onStateChange': onPlayerStateChange
    }
  });

function onPlayerStateChange(state) {                 
    alert('state changed');           
}
</script>

文章来源: YouTube API Change Event Not Firing