YouTube API更改事件未启动

Question

我在JSFiddle、本地服务器和生产服务器上都尝试过，但我无法弄清楚我的事件处理程序出了什么问题。它从不着火。此外，当我在谷歌Chrome中运行时，我不会出错，当我运行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 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。正是在这个函数中，您可以创建绑定的玩家对象。如果您尝试在该回调函数之外执行此操作，您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 ytplayer的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>