使用JQuery的HTML5视频播放器的处理程序触发事件

Question

我正在使用此方法(在堆栈溢出上找到(在擦洗HMTL视频时执行事件：使用JQuery

触发HTML5视频播放器的事件

它可以很好地工作。但是，当将视频时间表向后擦洗到上一个(较早的时间(时，我对如何触发其他事件感到不知所措。我想切换活动，并在用户到达以前的原始时间时添加其他事件。

我正在使用这种方法来"擦洗"时间表：

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时，它已经关闭了自身。

从那一刻起，当前的运行函数直到页面重新加载，因为您只使用.on jQuery函数将其附加一次。