首页 > 编程语言> > javascript – YouTube API OnStateChange侦听器在切换SRC Attr后停止工作

javascript – YouTube API OnStateChange侦听器在切换SRC Attr后停止工作

2019-10-06 06:35:58 作者：互联网

我试图以最干净的方式更改YouTube iframe中播放的视频,几个月前我已经使用了此代码,但YouTube更改了他们的API并且它已停止为我工作.现在,在切换视频的SRC属性以切换正在播放的视频后,onPlayerStateChange事件未触发.我是编码的业余爱好者所以我可能会在这里遗漏一些简单的东西,但任何输入都会非常感激.
以下是加载YouTube视频的代码,当它结束时,会自动弹出一个警告.但是,当您单击按钮并通过切换SRC属性来切换视频时,警报功能将停止工作,就好像整个onPlayerStateChange函数停止工作一样.我无法在jsfiddle中使用它,但可以在http://thetunedrop.com/test.html找到现场演示的链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="player"></div>
<button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>
</body>
</html>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: '0Bmhjf0rKe8',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {            
        alert('done');
    }
}

function load_ytid(youtubeid){
$("#player").attr("src", "http://www.youtube.com/embed/" + youtubeid + "?fs=1&autoplay=1");
}
$(document).ready(function(){

$(".button").on("click", function(){
var youtubeid = $(this).data("youtubeid");
load_ytid(youtubeid);   
});

});
</script>

解决方法:

试试这个：

<!DOCTYPE html>
<html>
<body>
    <script src="jquery-1.10.2.min.js"></script>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <button class="button" data-youtubeid="b-3BI9AspYc">BUTTON</button>

    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: '0Bmhjf0rKe8',
            playerVars: { 'autoplay': 1, 'controls': 1 },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
            });
        }

        var playerReady = false;
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            playerReady = true;
        }


        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.ENDED ) {            
            alert('done');
            }
        }

        $(".button").on("click", function(){ 
            player.loadVideoById("Vw4KVoEVcr0", 0, "default"); 
        });

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

这里的小提琴：http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/

希望这可以帮助

标签：youtube-data-api,javascript,jquery,iframe,youtube-api
来源： https://codeday.me/bug/20191006/1858928.html