计时器“一起”与 Youtube 剪辑配合 JS 在不同时间显示 div

发布于 2024-12-02 15:02:47 字数 459 浏览 1 评论 0原文

我想在页面上加载一个 youtube 剪辑，并且除了该剪辑之外，我还想添加一个顶部 (HTML) 层，该层的工作方式有点像 youtube 自己的注释功能。

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沫雨熙 2024-12-09 15:02:47

实现这一目标的方法确实与 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文档这可以使用以下代码来获取：

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

所以拼图的最后一块实际上是处理一个“tick”，其中我设置为发生在每个第二。这个方法 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 /（只需按剪辑上的播放即可）

The way to achieve this is indeed to do with the getCurrentTime method on the yt api, specifically, call it in a repeating function with the help of setInterval.

You will need to keep an array of overlays you wish to present, along with the from and to time, something like:

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

Then, you'll need a couple of functions to handle the movie playing and stoping (or pausing).

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

function stopWatch(){
  clearTimeout(watchId);
}

You'll notice that uses a variable ytplayer and according to the jsapi documentation this can be grabbed using the following code:

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

Notice in there ive attached an event listener, this leads us to a method to handle the movie state changing

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

So the last piece of the puzzle is actually handling a "tick" which ive set to occur every second. This method showOrHideOverlay looks like:

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

}

Finally, the live example: http://jsfiddle.net/zTZjU/ (Just press play on the clip)

回复收藏 0 原文