问计时器与Youtube剪辑一起使用JS在不同的时间显示div

EN

var overlays = [
    {text:"Some text",from:1,to:6},
    {text:"Some other text",from:8,to:14}];

var watchId;
function startWatch(){
    watchId = setInterval( function(){
        showOrHideOverlay(ytplayer.getCurrentTime());
    },1000)
}

function stopWatch(){
  clearTimeout(watchId);
}

var ytplayer ;
function onYouTubePlayerReady(playerId) {       
    ytplayer = document.getElementById("myytplayer");  
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");   
}

function onytplayerStateChange(newState) {    
    if(newState == 1){ // playing
         startWatch()
    }
    else if(newState == 0 || newState == 2){ //ended or paused
         stopWatch();   
    }            
}

function showOrHideOverlay(time){
    // find overlays which should be visible at "time"
    var shownOverlays = false;
    for(var i=0;i<overlays.length;i++){
        if(overlays[i].from < time && overlays[i].to > time){
            $('#overlay').text(overlays[i].text);
            shownOverlays = true;
        }           
    }
    if(!shownOverlays)
        $('#overlay').text("");

}