如何暫停HTML視頻並通過循環自動恢復？

Question

我使用視頻標籤在我的HTML頁面中嵌入了4秒長的視頻。我需要首先暫停視頻2秒，分別爲2.99s，3.44s和4.00s。爲了實現這一點，視頻需要從以前的實例恢復。

但經過長時間的努力，我一直無法找到解決方案。到目前爲止，我剛剛能夠讓視頻暫停> = 2.99s，但即使在使用setInterval函數後也不會恢復。

下面是代碼：

var vTag = document.getElementById('video'); 

setInterval(function() { pVideo();}, 2000); 

function pVideo() { 
     vTag.ontimeupdate = function(e) { 
     cTime = vTag.currentTime; 
     (cTime >= 2.9 || cTime >= 3.44 || cTime >= 4.00) ? vTag.pause(): vTag.play(); 
}; 
}; 

PS：視頻被用作標題部分中的背景的視頻。

Answer 1

試試這個..這是一個完全工作代碼

HTML

<video id="video" autoplay muted loop> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video> 

JS

var vTag = document.getElementById('video'); 
vTag.play(); 
var wasPausedBefore1 = 0; 
var wasPausedBefore2 = 0; 
var wasPausedBefore3 = 0; 

vTag.ontimeupdate = function(e) { 
    cTime = vTag.currentTime; 
    if (cTime < 1) { 
     wasPausedBefore1 = 0; 
     wasPausedBefore2 = 0; 
     wasPausedBefore3 = 0; 
    } else if (cTime > 2.8 && cTime < 3.1 && wasPausedBefore1 == 0) { 
     vTag.pause(); 
     wasPausedBefore1 = 1; 
     setTimeout(function() { 
      vTag.play(); 
     }, 4000); 
    } else if(cTime > 3.3 && cTime < 3.6 && wasPausedBefore2 == 0){ 
     vTag.pause(); 
     wasPausedBefore2 = 1; 
     setTimeout(function() { 
      vTag.play(); 
     }, 4000); 
    } else if(cTime > 3.8 && cTime < 4.0 && wasPausedBefore3 == 0){ 
     vTag.pause(); 
     wasPausedBefore3 = 1; 
     setTimeout(function() { 
      vTag.play(); 
     }, 4000); 
    } 
}; 

這裏是工作提琴：https://jsfiddle.net/o9mknsx0/1/

Answer 2

使用setTimeout而不是setInterval。

我不知道，如果你能趕上需要使用timeupdate，因爲它激發每200ms或250ms的任一時間，但我會做到這一點，像這樣：

var vTag = document.getElementById('video'); 

vTag.addEventListener('timeupdate', function() { 
    var cTime = vTag.currentTime; 
    if(cTime === 2.99 || cTime === 3.44 || cTime === 4)) { 
     vTag.pause(); 
     setTimeout(function() { 
      vTag.play(); 
     }, 2000); 
    } 
}); 

爲了使它趕上你的時間，如2.99和3.44，那麼你需要使用setInterval每10ms輪詢它。

setInterval(function() { 
    var cTime = vTag.currentTime; 
    if(cTime === 2.99 || cTime === 3.44 || cTime === 4) { 
     vTag.pause(); 
     setTimeout(function() { 
      vTag.play(); 
     }, 2000); 
    } 
}, 10); 

Answer 3

你需要更新你的if語句以某種方式跟蹤暫停值，否則您的視頻無法播放，因爲後2.9秒，如果將永遠爲所有這些條件返回true。

var vTag = document.getElementById('video'); 

setInterval(pVideo, 2000); //function reference 

var nextPause = [2.9, 3.44, 4.00]; 
var pauseIndex = 0; 
function pVideo() { 
    vTag.ontimeupdate = function(e) { 
     cTime = vTag.currentTime; 
     var pauseTime = nextPause[pauseIndex]; 
     if (cTime >= pauseTime) { 
      vTag.pause(); 
      setTimeout(vTag.play, 2000); //unpause after 2 seconds 
      if (++index <= nextPause.length) index++ 
      else index = 0; 
     } 
    } 
}; 

這是未經測試的，我的邏輯可能有缺陷，但我覺得這個概念是有聲的。

將所有暫停時間放入數組中，並跟蹤上次使用的索引（如果需要，也可以重置（循環視頻））。然後，如果if語句匹配，請暫停視頻並運行超時2秒鐘以再次播放視頻。