Javascript 为什么Youtube iFrame API没有检测到状态更改

我用以下代码创建了一个页面，用于检测YT iFrame嵌入的状态更改。播放器检测到

onReady

事件，但未检测到

onStageChange

事件

有人能解释我在这里遗漏了什么吗

代码：

var tag=document.createElement（'script'）；
tag.id='ytiframe'；
tag.src=https://www.youtube.com/iframe_api';
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
log（“加载的yt脚本”）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'YT-iframe'{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
console.log（“视频播放器就绪”）；
}
函数onPlayerStateChange（事件）{
log（“状态已更改”）；
console.log（事件数据）；
}

您的代码有两处错误

首先，您的视频url参数不正确

您的url是

http://www.youtube.com/embed/CTFtOOh47oo?rel=0&?enablejsapi=1

，从而传递参数

rel

和

amp；？启用JSAPI

相反，您的链接应该是

http://www.youtube.com/embed/CTFtOOh47oo?enablejsapi=1

，带有参数

enablejsapi

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

将yt脚本的id更改为类似于

tag.id='yt script'的其他内容


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