当YouTube视频结束时，使用YouTube Player API无法正常工作时进行检测

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

在第一次或第二次播放youtube视频后，浏览器的缓存或cookie似乎会导致事件未触发，但如果我们清除浏览器缓存并对其进行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) 
}
}