为什么 Youtube iFrame API 无法检测到状态变化

Question

我创建了一个使用以下代码的页面来检测对 YT iFrame 嵌入的状态更改。播放器检测到onReady事件，但不检测onStageChange事件。

谁能解释一下我在这里错过了什么？

https://codepen.io/anon/pen/LOZVoX?editors=1001

法典：

<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/CTFtOOh47oo?rel=0&amp;?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.id = 'yt-iframe';
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    console.log('yt scripts loaded');
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('yt-iframe', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
    function onPlayerReady(event) {
        console.log('video player ready');
    }
    function onPlayerStateChange(event) {
        console.log('state has changed');
        console.log(event.data);
    }
</script>

Answer 1

你的代码有 2 个错误。

首先，您的视频网址参数不正确。

您的网址http://www.youtube.com/embed/CTFtOOh47oo?rel=0&?enablejsapi=1，因此您将参数传递rel和amp;?enablejsapi。

相反，您的链接应该是 http://www.youtube.com/embed/CTFtOOh47oo?enablejsapi=1 ，参数为 enablejsapi 。

你的

第二个错误是你把你的 yt 脚本的 id 设置为与你的 iframe 的 id 相同。

将 yt 脚本的 id 更改为其他类似 tag.id = 'yt-script'; 的内容。

https://codepen.io/anon/pen/yPJJbv?editors=0001