jQuery 的图像播放器问题

Question

我制作了一个 jQuery 图片播放器 Demo Link。

它以提供的间隔更改屏幕并在其上绘制触摸。现在，我想实现暂停、播放功能。当我点击播放按钮停止屏幕播放时，我调用了 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() {...}

启动时，将您的 screens 数组转换为如下形式：

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

为播放设置一个定时器：

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

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

// 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);

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

jQuery 的图像播放器问题

Image player issue with jQuery

javascript

jquery

timing

setinterval