使用带有 JQuery 的 html5 视频播放器中的处理程序触发事件

Question

我正在使用这种方法（在堆栈溢出中找到）在清理 HMTL 视频时执行事件： Triggering Events from html5 video player with JQuery

完美运行。但是，我不知道如何在将视频时间线向后滑动到以前（较早）时间时触发不同的事件。我想关闭该事件，并可能在用户到达之前的原始时间时添加一个不同的事件。

我正在使用这种方法来“清理”时间线：

var windowwidth = $(window).width()-20;

var scrollpos = window.pageXOffset/200;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid.pause();


window.onscroll = function(){
    //Set the video position that we want to end up at:
    targetscrollpos = window.pageXOffset/200;   
};

setInterval(function(){  
      //Accelerate towards the target:
      scrollpos += (targetscrollpos - scrollpos)*accelamount;
      //update video playback
      vid.currentTime = scrollpos;
     vid.pause();
}, 60);

这个代码来自之前的堆栈溢出问题来触发事件

    $(".boxB").animate({ marginLeft:'0px'},400);
    $(".boxA").animate({ width:'620px'}, 400);
}

var runAtTime = function(handler, time) {
     var wrapped = function() {
         if(this.currentTime >= time) {
             $(this).off('timeupdate', wrapped);
             return handler.apply(this, arguments);
        }
     }
    return wrapped;
};

$('#v0').on('timeupdate', runAtTime(myHandler, 3.5)); 

这里有一个工作版本： http://www.mediaflash.ca/swipe_video_timeline/index.html

该功能仅在您使用滚轮鼠标并在 iOS 设备上左右滚动或左右滑动时才有效。

Answer 1

据我所知，没有可用于向前/向后滚动的单独事件。

检查用户是否向后滚动的方法是存储最后一次并将其与新的擦洗时间进行比较，如下所示：

var m_lastVideoTime = 0;//global scope

var runAtTime = function(handler, time) {

     var wrapped = function() {
         if (m_lastVideoTime < this.currentTime){
           //user scrolled back in time, do what you like here
         }
         m_lastVideoTime = this.currentTime;
         if(this.currentTime >= time) {
             //time exceeded specified value (3.5)
             $(this).off('timeupdate', wrapped);
             return handler.apply(this, arguments);
        }
     }
    return wrapped;
};

您当前的函数名称 runAtTime 有点误导，因为它会在视频时间更新时运行。但是，超过时间 3.5 时，它已经自行关闭。

从那一刻起，runAtTime 函数当前不会再次调用，直到页面重新加载，因为您只使用 .on jquery 函数附加了一次。