使用无法正常工作的 Youtube Player API 检测 YouTube 视频何时结束

Question

我使用 Youtube PlayerAPI 成功加载了多个 Youtube 视频，我尝试检测其中一个视频是否结束，然后我可以执行一些操作，现在我只是发出警报。代码如下所示：

    // 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);

    // Creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var players = new Array();
    var playerInfoList = [{"video_id":"SMKPKGW083c","start_seconds":"130","end_seconds":"140","autoplay":"1","mute":"1"},{"video_id":"ianb7qAGd9I","start_seconds":"1","end_seconds":"5","autoplay":"0","mute":"0"}];

    function onYouTubeIframeAPIReady() {
        for (var i = 0; i < playerInfoList.length; i++) { 
            var curplayer = createPlayer(playerInfoList[i]);
            players[playerInfoList[i].video_id] = new Array();
            players[playerInfoList[i].video_id]['player'] = curplayer;
            players[playerInfoList[i].video_id]['data'] = playerInfoList[i];
        }
    }

    function createPlayer(playerInfo) {
        return  new YT.Player(playerInfo.video_id, {
            height: '100%',
            width: '100%', 
            videoId: playerInfo.video_id,
            host: window.location.protocol+'//www.youtube.com',
            playerVars: { autoplay: playerInfo.autoplay,mute: playerInfo.mute},
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        }); 
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        var videoId = event.target.getIframe().id;
        event.target.playVideo();
        if(players[videoId]['player']){
            var player = players[videoId]['player'];
            var data = players[videoId]['data'];
            player.loadVideoById({'videoId': videoId,
            'startSeconds': data.start_seconds,
            'endSeconds': data.end_seconds});
        }

    } 

    // when video ends
    function onPlayerStateChange(event) { 
        var videoId = event.target.getIframe().id;
        if(event.data == YT.PlayerState.ENDED) {
            alert('done') 
        }  else{ 

        }
        
    }

    function stopVideo() {
        player.stopVideo();
    } 

我为 youtube 播放器 API 设置了开始秒数和结束秒数，当达到结束秒数时，它应该调用警报功能。但是大多数时候警报功能没有出现，我试图删除浏览器的 cookie 并刷新浏览器，它有时会工作，然后过一段时间就不会再工作了

编辑：我可以通过进入隐身模式使警报功能不断工作

Answer 1

似乎浏览器的缓存或 cookie 导致事件在我们第一次或第二次播放 youtube 视频后未触发，但如果我们清除浏览器缓存和 cookie，事件将再次触发。我对此问题的临时解决方案是使用 setInterval 函数每隔 X 秒观察一次 youtube 播放器状态。

    function onPlayerReady(event) {
        var videoId = event.target.getIframe().id;
         if(players[videoId]['player']){ 
            var player = players[videoId]['player'];
            var data = players[videoId]['data'];
            player.loadVideoById({'videoId': videoId,
            'startSeconds': data.start_seconds,
            'endSeconds': data.end_seconds});
            //run every 0.2 seconds to check the youtube state
            setInterval(function() {
                if(videoId){
                    var id = "overlay-content-"+videoId;
                    if(player.getPlayerState() == YT.PlayerState.ENDED) {
                        document.getElementById(id).style.display = 'block';
                    }  else{
                        document.getElementById(id).style.display = 'none';
                        }
                }
            }, 200) 
        }
    }