javascript - 定时器 "along"带有 JS 的 Youtube 剪辑以在不同时间显示 div

Question

我想在页面上加载一个 youtube 剪辑，我想在剪辑的同时添加一个顶层 (HTML)，它的工作方式有点像 youtube 自己的注释功能。

要点:- 用户将看到一个 YT 剪辑(可能在自定义播放器中)- 根据剪辑的当前时间，我需要 JS 在剪辑顶部的图层上加载信息。

所以:例如，从 0.00 到 0.05，您会在剪辑顶部看到一段文字从 0.05 到 0.30 无文本再次从 0.30 到 0.37 文本等等等等

关于如何处理这个问题有什么想法吗？我意识到 Youtube 的播放器 API 具有 getCurrentTime 的功能但是我如何继续编写一段 JS 来与剪辑顶部的 div 层上的剪辑“一起玩”？

Answer 1

实现这一点的方法确实与 yt api 上的 getCurrentTime 方法有关，具体来说，在 setInterval 的帮助下在重复函数中调用它。

您需要保留一系列您希望呈现的叠加层，以及时间，例如:

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

您会注意到使用变量 ytplayer 并根据 jsapi documentation可以使用以下代码获取:

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();   
    }            
}

所以拼图的最后一 block 实际上是处理我设置为每秒发生的“滴答声”。此方法 showOrHideOverlay 如下所示:

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("");

}

最后，实例:http://jsfiddle.net/zTZjU/ (只需按下剪辑上的播放)