Question

我想知道为什么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>

Answer 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视频网址当然会导致视频显示在页面上但与Youtube api无关，因此没有理由为该播放器触发onPlayerStateChange。

YouTube onStateChange事件无法正常运行

1 个答案: