javascript - YouTube onStateChange事件无法正常运行

标签 javascript jquery api iframe youtube

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

最佳答案

如果按照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。

关于javascript - YouTube onStateChange事件无法正常运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22583270/

相关文章:

javascript - 如何在不重定向 javascript 页面的情况下使用位置对象解析 URL?

javascript - 在 Highcharts.js 中设置两个 yAxis 的问题

javascript - 如何在一个选择器 jQuery 中显示和隐藏多个元素?

javascript - GoogleMap Api - 初始化()

javascript - onchange ="javascript: document.my_form.submit()"与正常提交

javascript - Behat/Mink 无法模拟点击页脚中的按钮

java - Imgur API 上传

c# - 通过 dotnetbrowser 返回 Books json

jquery - 使用 jQuery 改变悬停伪

javascript - 使用 JavaScript 向 img 标签添加类