在Javascript中實現倒帶功能

Question

我用Javascript編寫了一個視頻播放器，我試圖實現倒帶/轉發功能。

目的是在按鈕被按下時視頻將倒回。我編寫了一個這樣的版本，當按鈕被點擊時它會倒回一次，但是你必須不斷點擊它來連續回放。

到目前爲止，我已經做到了這一點：

HTML

<video id="media" width="600" height="400" preload="none"> 
    <source src="files/Best of 60s.m4v"> 
</video>  

<input type="button" id="skipTrackBackward" value="Backward" onmousedown="rewind()" onmouseup="stoprewind()"/> 

的Javascript：

var skipB 
    function initiate(){ 
    mmedia = document.getElementById('media'); 
    skipB = document.getElementById('skipTrackBackward'); 

function rewind(){ 
     while (!mmedia.paused && !mmedia.ended){ 
      for (var i = mmedia.currentTime; i != 0; i--){ 
       mmedia.currentTime=i; 
      } 
     } 
    } 

    function stoprewind(){ 
     mmedia.play(); 
    } 

上面的代碼會導致Chrome標籤頁以如此明顯我已經做了非常錯誤的崩潰！但我的理解是，我只希望倒帶功能在視頻尚未結束或已暫停的情況下啓動。因此，當它處於該狀態時，它應該運行for循環，該循環考慮已經過去的currentTime並在按下鼠標時減去1秒（currentTime採用被解釋爲秒的整數）。只要未達到0秒，它應該持續更新currentTime。

爲方便起見，上述代碼已被最小化。任何建議不勝感激。

Answer 1

我認爲你已經創建了一個無限循環或你的設置mmedia.currentTime到一個虛假的值。

首先讓我們來解決問題。查看控制檯輸出的內容，添加一些console.log語句以查看運行時的值以及值發生崩潰前的值，並逐句通過調試器中的代碼（使用條件斷點過濾掉噪聲）。

現在編碼分析。嘗試用硬編碼值替換變量，看看邏輯平底鍋出來：

while (!mmedia.paused && !mmedia.ended) { 
^1  ^2     ^3 

1. 爲什麼會嗎？有沒有一種情況需要運行for循環直到mmedia.paused和mmedia.ended？
2. 這個變量什麼時候改變來擺脫循環？
3. 或者這個變量？

所以當for循環執行沒有什麼可引起mmedia.paused或mmedia.ended從假改爲真正，這是一個無限循環。

您還檢查i != 0是否可能對我有用< 0？如果是，那麼mmedia.currentTime的句柄值小於0？

最後但並非最不重要的是，如果您要暫停while/for循環，則它處於阻塞過程中。這意味着如果您依賴用戶交互來翻轉其中一個取消標誌，它將永遠不會發生，因爲線程正在等待while/for循環完成，然後才註冊用戶執行了某些操作。如果無限循環是固定的，一次點擊將阻止點擊暫停/停止按鈕直到它開始（顯然這很愚蠢，因爲您可以將currentTime設置爲0）。另一個影響是你不會看到倒帶過程，因爲它不會更新顯示，直到線程完成執行代碼。

你將需要它來以非阻塞的方式重寫邏輯。這被稱爲異步代碼，然後簡單的循環就複雜得多。

var stopRewinding; 

function rewind() { 
    var timeout = 100; 
    stopRewinding = false; 

    if (mmedia.paused || mmedia.ended) { 
    console.log("Media state unable to rewind"); 
    return; 
    } 

    function worker() { 
    if (stopRewinding || mmedia.currentTime <= 0) { 
     return; // All done so get outa here 
    } 

    mmedia.currentTime--; 

    setTimeout(worker, timeout); 
    } 

    worker(); 
} 

現在，你可以通過設置stopRewinding到真正中斷循環或當currentTime達到0

然後，您可以有一個按鈕或使用mousedown和mouseup事件觸發rewind()和stopRewinding = true 。