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

<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();

I have a video and using the data array, I would like to pause the video at the pauseTime in the objects inside the data array and place an overlay image on top of it.

The problem I'm having is that the timeUpdate event returns a decimal number so I have to call parseInt on it but in that case the video keeps pausing at all the intervals between 2 whole numbers, eg: if I want to pause at 2 seconds, it will pause several times between 2.000001 all the way to 2.999999, but I just want it to pause once around 2.000001 (doesn't have to be exact) and no more until the next pauseTime, in this case 6. I wrote video[0].currentTime += 1; in the if statement and it fixes this problem but then it jumps by one sec and I don't want that.

You can see what I mean here: https://jsfiddle.net/njbn0ddn/1/

Answers


I think you need a more formal way of noting completion of the event. Here we note wether we have hit that stopping point, and if we have, we move on without checking the time again. Here is the updated 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();

Need Your Help

Cropping captured image correctly when using AV Foundation

ios iphone objective-c avfoundation crop

I am using AV Foundation for a photo app. I have setup a preview layer that takes up the top half of the screen using this code:

Apache config for PHP and Django

php django apache

I'm wanting to run PHP and Django together on the same apache config and I'm wondering how to do that?