YouTube API 更改事件未触发 [英] YouTube API Change Event Not Firing

问题描述

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

I have tried in JSFiddle, on my local server, and on a production server, and I cannot figure out what is wrong with my event handler. It never fires. Also, when I run in Google Chrome I get no errors, when I run in Safari, I get:

阻止了来源为http://www.youtube.com" 的框架访问具有来源的框架http://jsfiddle.net".协议、域和端口必须匹配.

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>

JS Fiddle 示例

推荐答案

@Justin -- 针对您的评论，这里有一些代码和简短的解释.有两件事需要注意......首先，我通常像这样加载 iFrame API 库:

@Justin -- in response to your comment, here's some code and a short explanation. There are two things to watch out for ... first of all, I generally load the iFrame API library like this:

<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) 无法绑定到已经存在的元素存在于页面上，因为它们可能尚未加载.它看起来像这样:

This way, it won't load until the page is loaded, which is key to the second step -- when the code loads, it will automatically call the function onYouTubeIframeAPIReady, which you need to define. It's within this function that you can create your bound player object. If you try to do it outside this callback function, you A) run the risk of creating your player object before the iframe API library loads which means it couldn't trigger any player functions, and B) can't bind to elements that already exist on the page as they might not yet be loaded. It looks like this:

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.

This assumes I've given my iframe the id of ytplayer, and that I've appended "?enablejsapi=1" to the URL of the iframe's src attribute.

这是一个有效的小提琴:http://jsfiddle.net/jlmcdonald/PQy4C/261/

Here's a working fiddle: http://jsfiddle.net/jlmcdonald/PQy4C/261/

这篇关于YouTube API 更改事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！