如何暂停基于 video.currentTime 使用整数的视频？

Question

<video id="js-video" autoplay>
   <source src="./vid.mp4" type="video/mp4">
</video> 
<button id="js-button">
</button>

var video = document.getElementById('js-video');
var button = document.getElementById('js-button');
var data = [
     { pauseTime: 2,
       image: "./foo_1.png"
     },{
      pauseTime: 6,
      image: "./foo_2.png"
     }
    ];

    function showOverlay() {
     video.addEventListener('timeupdate', function() {
      var full = parseInt(video.currentTime);

        console.log(video.currentTime);

      for (var i=0; i < data.length; i++) {
        if (full === data[i].pauseTime) {
          video.pause();
          moveToNextScene();
        } else {
          console.log("else");
        }
      }
     });
    }

   function moveToNextScene() {
      button.addEventListener('click', function() {
        video.play();
      });
    }

    showOverlay();

我有一个视频并使用数据数组，我想在数据数组内的对象中的 pauseTime 处暂停视频，并在其上放置一个叠加图像。

我遇到的问题是 timeUpdate 事件 returns 是一个十进制数，所以我必须对其调用 parseInt 但在那种情况下视频会一直暂停2 个整数之间的间隔，例如：如果我想在 2 秒暂停，它会在 2.000001 到 2.999999 之间暂停几次，但我只希望它在 2.000001 左右暂停一次（不必非常准确）直到下一个 pauseTime，在本例中为 6。我在 if 语句中写了 video[0].currentTime += 1;，它解决了这个问题，但它跳了一秒，我不希望这样。

你可以明白我的意思：https://jsfiddle.net/njbn0ddn/1/

Answer 1

我认为您需要一种更正式的方式来记录事件的完成。在这里，我们注意到我们是否到达了那个停止点，如果是，我们继续前进而不再检查时间。这是更新后的 fiddle：https://jsfiddle.net/meqnz2vj/

var video = document.getElementById('js-video');
    var button = document.getElementById('js-button');
    var data = [
         { pauseTime: 2,
           image: "./foo_1.png",
           got_here:false
         },{
          pauseTime: 6,
          image: "./foo_2.png",
          got_here:false
         }
        ];

        function showOverlay() {
         video.addEventListener('timeupdate', function() {
          var full = parseInt(video.currentTime);

            console.log(video.currentTime);

          for (var i=0; i < data.length; i++) {
            if (full === data[i].pauseTime && data[i].got_here == false) {
              data[i].got_here = true;
              video.pause();
              moveToNextScene();
            } else {
              console.log("else");
            }
          }
         });
        }

       //when paused, a button will appear, on closing it, the vide resumes
       function moveToNextScene() {
          button.addEventListener('click', function() {
            video.play();
          });
        }

        showOverlay();

如何暂停基于 video.currentTime 使用整数的视频？

How to pause video based on video.currentTime using whole numbers?

javascript

video

jquery

html5-video