如何暂停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秒钟以再次播放视频。