如何以预定义的一组间隔停止视频

Question

我想让视频停止视频以一组预定义的时间间隔停止。当我是运行代码时，它不会在特定时间停止（使用 if(vid.currentTime ===5 )），但是当我写 if(vid.currentTime >5 ) 时，它会出于某种原因工作。但是使用它会产生一个问题，因为即使在单击继续按钮后（我添加了一个继续选项，我想在这些间隔后进行测验，我实际上想使用 stopTimes 数组），>5 条件为真，所以它再次停止。我试图在 google 中搜索它，但我没有得到我需要的答案。

<body>
        <header>
            VIDEO QUIZ
        </header>

        <video controls height="500px" width="500px" src="https://storage.coverr.co/videos/bhnNW022Hykx6POeLwxpg02hzB9VY02xW98?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTkxNTQ2NzI1fQ.TUk0sMvleGXzgT1eSSqE9djL5FFVbCnKQBeAOoY4YtI"></video>
        <button id="continue">continue</button>

        <script src="video.js"></script>
    </body>

var vid=document.querySelector('video');

var stopTimes = [5, 10, 20];

vid.ontimeupdate= quizFunction;

var i=0;

function quizFunction (evt) {
    if(vid.currentTime ===5 ){
        vid.pause();
        console.log('javascript works');
        loadQuiz();
    }
}

function loadQuiz(){
    vid.pause();
    console.log('quiz works');

    var btn= document.querySelector('button');

    btn.style.display= 'inline';

    btn.addEventListener('click', startVideo);

}

function startVideo(){
    vid.play();
}

Answer 1

下面的代码片段将以 5 秒的增量停止 - 如果您需要的话，您可以使用数组而不是如下增加暂停计时器。

您依赖于浏览器以至少每秒一次的粒度向您发送定时更新。在大多数情况下，我看到这是真的。我不确定当浏览器或系统负载很重时是否可以保证这种行为，但对于使用报告的计时事件的所有方法都是如此。

检查时间是否为 'greater than' 而不是 'equal to' 的原因是您不知道何时会触发计时事件 - 即您可能会在 4.9 时获得一个秒，下一个是 5.6 秒，因此错过了恰好 5 秒的情况。

var vid1 = document.getElementById("MyVid1");

var pauseTime = 5

vid1.ontimeupdate = function() {

    if (vid1.currentTime > pauseTime) {
      vid1.pause()
      alert ("passed " + pauseTime);
      pauseTime = pauseTime + 5
    }
    
};

<video id="MyVid1" width="320" height="176" autoplay controls preload="auto">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

如何以预定义的一组间隔停止视频

How to stop video at predifined set of intervals

html

javascript

html5-video