为什么Youtube iFrame API无法检测状态更改

时间:2017-11-05 19:04:30

标签: javascript iframe youtube youtube-api

我创建了一个包含以下代码的页面,以检测对嵌入的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>

1 个答案:

答案 0 :(得分:1)

您的代码有2个错误。

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

您的网址为http://www.youtube.com/embed/CTFtOOh47oo?rel=0&amp;?enablejsapi=1 ,因此您传递参数relamp;?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