1

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

在项目符号中： - 用户将看到一个 YT 剪辑（可能在自定义播放器中） - 根据剪辑的当前时间，我需要 JS 在剪辑顶部的图层上加载信息。

所以：例如，从 0.00 到 0.05，您会在剪辑顶部看到一段文本 从 0.05 到 0.30 没有文本 从 0.30 到 0.37 再次出现文本等等

关于如何解决这个问题的任何想法？我意识到 Youtube 的 Player API 具有getCurrentTime的功能 但是我将如何继续编写一段 JS 来“播放”剪辑顶部的 div 层上的剪辑？

4

2 回答 2

2

实现这一点的方法确实与getCurrentTimeyt api 上的方法有关，具体来说，在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 文档，可以使用以下代码来获取它：

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

所以最后一块拼图实际上是处理我设置为每秒发生的“滴答声”。这个方法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/（只需按剪辑上的播放）

于 2011-09-05T10:48:47.630 回答
0

检查这个小提琴： http: //jsfiddle.net/rEeJS/
我添加wmode="transparent"以允许覆盖出现在 Chrome 中。

于 2012-03-17T16:21:02.710 回答