YouTube onStateChange 事件无法正常工作答案

【问题标题】：YouTube onStateChange event is not working properlyYouTube onStateChange 事件无法正常工作
【发布时间】：2014-04-30 06:24:45
【问题描述】：

我想知道为什么 YouTube onPlayerStateChange 不能正常工作。

在那种情况下，当 youtube 视频结束时，我没有收到任何警报消息（或任何其他事件）。

有什么想法吗？

<!doctype html>

<html lang="en">
<body>

<iframe src=""></iframe>
<script src="js/jquery.js"></script>
<script src="http://www.youtube.com/iframe_api"></script>
<script>    
function onPlayerStateChange(event) {
    switch(event.data) {
        case YT.PlayerState.ENDED:
            alert('VIDEO IS ENDED'); // <<<--- THIS IS NOT WORKING
            break;
    }
}

jQuery(document).ready(function($) {
    var vidId = 'uIv6u7pdR5I';
    $('iframe').attr('src', "https://youtube.googleapis.com/v/" + vidId);
        new YT.Player('player_'+vidId, {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            },
            playerVars: { autohide: 1, showinfo: 0 }
        });
});
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery api iframe youtube

【解决方案1】：

如果您按照https://developers.google.com/youtube/iframe_api_reference 的说明使用 Youtube api，它似乎可以正常工作

也就是说，像这样：

<!doctype html>

<html lang="en">
<body>

<div id="player"></div>
<script src="http://www.youtube.com/iframe_api"></script>
<script>
function onPlayerStateChange(event) {
    switch(event.data) {
        case YT.PlayerState.ENDED:
            alert('VIDEO IS ENDED'); // <<<--- THIS IS WORKING
            break;
    }
}

var player;
function onYouTubeIframeAPIReady() {
    var vidId = 'uIv6u7pdR5I';
       player= new YT.Player('player', {
            videoId: vidId,
            events: {
//                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            },
            playerVars: { autohide: 1, showinfo: 0 }
        });
}


</script>
</body>
</html>

使用您的代码时出现错误，因为您没有等待 onYouTubeIframeAPIReady 回调，并且 onReady 引用了一个不存在的函数。此外，您将 iframe src 设置为 youtube 视频 url 当然会导致视频显示在页面上，但这与 Youtube api 无关，因此 onPlayerStateChange 没有理由由该播放器触发。

【讨论】：

完美！非常感谢！