JQuery - 圖像播放器問題

我爲圖像製作了一個JQuery播放器Demo Link。它會根據提供的時間間隔更改屏幕並在其上繪製觸摸。現在，我想實現pouse，播放功能。當我播放按鈕，點擊停止屏幕播放，我叫FlowPlaye.stop()方法：JQuery - 圖像播放器問題

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秒停止視頻並恢復）。我需要保存球員的狀態，但我不知道如何。那麼，有人可以幫我解決這個問題嗎？

來源

2015-02-11 Danis

我認爲使用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);

注：片段是未經測試，可能有一些錯別字在其中。我只是想演示使它更清潔/更可控的過程。

來源

2015-02-11 17:07:19 zord

謝謝你的回答:) – Danis 2015-02-12 07:40:21

JQuery - 圖像播放器問題

回答

相關問題