jQuery的图像播放器问题

Question

我制作了一个用于图像演示链接的jQuery播放器。

它以提供的间隔改变屏幕，并在屏幕上进行触摸。现在，我想实现pouse，play功能。当我点击播放按钮停止屏幕播放时，我调用FlowPlaye.stop()方法：

FlowPlayer.prototype.stop = function() {
        $(".fp-pause").removeClass("fp-pause").addClass("fp-play");
        clearInterval(this.screenIntervalId);
        clearInterval(this.timeIntervalId);
        clearInterval(this.touchIntervalId);
        $('.fp-progress').stop();
        this.isAnimated = false;
        return false;
    }

第二次FlowPlayer.play():

FlowPlayer.prototype.play = function() {
    var fp = this; // Obj refers to the FlowPlayer itself such as "this"
    fp.isAnimated = true;
    console.log(typeof this.screenIndex)
    console.log(this.screenIndex)
    fp.screenIndex = typeof this.screenIndex == 'number' ? this.screenIndex : 0; 
    fp.render(fp.screens[fp.screenIndex]);
    fp.initTimeline(fp.duration);
    fp.screenIntervalId = setInterval(function() {
        if (fp.screenIndex == fp.screens.length - 1) {
            console.log("the end of screens");
            clearInterval(fp.screenIntervalId)
            return;
        }
        ++fp.screenIndex;
        fp.render(fp.screens[fp.screenIndex]);
    }, fp.screens[fp.screenIndex].delay)

}

问题是，当我这样做的时候，屏幕播放间隔很混乱（试着在第20秒停止视频并恢复）。我需要挽救球员的状态，但我不知道该怎么做。

Answer 1

我认为使用3个不同的定时器会让这变得不必要。如果将其重构为一个统一的计时器，暂停（以及其他播放控件）将非常容易。

1. 将关键帧事件分离为单独的函数：

   function setImage(img) {...}
   function showTouch(x, y) {...}
   function hideTouch() {...}
   

2. 在启动时，将screens数组转换为类似以下内容：

   var keyframes = [
           { time:0,    func:setImage,  args:['http://...']},
           { time:1000, func:showTouch, args:[10, 30]},
           { time:3000, func:hideTouch, args:[]},
           ...
       ];
   

3. 设置单个播放计时器：

   var time = 0,
       next = 0,
       isPaused = false,
       interval;
   function timer() {
       if (isPaused) {
           return;
       }
       var nextKeyframe = keyframes[next];
       time += 100;
       if (time >= nextKeyframe.time) {
           nextKeyframe.func.apply(this, nextKeyframe.args);
           next += 1;
           if (next === keyframes.length) {
               clearInterval(interval);
           }
       }
   }
   

4. 现在，您可以轻松控制播放：

   // play / replay - reset time and next, then start the timer
   time = 0;
   next = 0;
   interval = setInterval(timer, 100);
   // seek - just set a new time, and find the next keyframe
   time = 1500;
   for (next = 0; keyframes[next].time < time && next < keyframes.length; next++) {}
   // pause - the timer stays on, but won't do anything
   isPaused = true;
   // stop
   clearInterval(interval);
   

注意：这些片段未经测试，可能有一些拼写错误。我只是想演示一下让它更清洁/更可控的过程。