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

Question

我使用video標簽將4秒長的視頻嵌入HTML頁面中。 我需要先在2.99s，3.44s然后在4.00s暫停視頻2秒鍾。 為此，視頻需要從以前的實例恢復。

但是經過長時間的努力，我仍然無法找到解決方案。 到目前為止，我剛剛能夠將視頻暫停> = 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秒后，對於所有這些情況，if都將始終返回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秒鍾以再次播放視頻。