How to check if current time is equal to a particular number before I stop the video in html5 video

Question

I have written this code in HTML5 video to play around with the time functionality. If I set this line of code as

if(vid.currentTime > 5){
        vid.pause();
     }

the video will automatically pause, which is what i want. But if I set it as

if(vid.currentTime == 5){
        vid.pause();
     }

it refuses to pause and I want it to pause at different times in order to fire different actions. I don't know why. I have researched and tried to google similar situation but no luck. Any help will be appreciated. Here is the full code:

window.onload = init;

let vid;

function init() {


    vid = document.querySelector("#myPlayer");

    vid.ontimeupdate = displayTimeWhileVideoIsPlaying;
}

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

function pauseVideo() {
    vid.pause();
}

function rewindVideo() {
    vid.currentTime = 0
}

function displayTimeWhileVideoIsPlaying(evt) {
    console.log(vid.currentTime);
    ccc = 5;
    if(vid.currentTime > 5){
        vid.pause();
     }

}

This is the link to my codepen for a working demo: https://codepen.io/Okezie/pen/xWOLQd?editors=1011
The issue is presumably on line 28 of my code pen.

you've got to remember the currentTime isn't an integer, so you'll need to cater for that. Have a look at https://stackoverflow.com/questions/44168839/html5-video-repeat-at-a-given-timeframe/44169355#44169355 and https://stackoverflow.com/questions/16459470/jump-around-in-a-video-to-times-from-an-array/16474484#16474484 for some more pointers — Offbeatmammal, Mar 17 '18 at 05:54
Your approach with > is the way to go . But do you need to pause at the exact time? i.e. pausing at 5.4 instead of 5 is not enough? — gawicks, Mar 17 '18 at 06:01

gawicks · Answer 1 · 2018-03-20T03:42:55.767

You could keep track of which pause points were hit , and not pause again.

var points = [ 
    { time: 5 , done: false},
      { time: 6 , done: false},
    { time: 8 , done: false},
    { time: 9 , done: false},
];

function displayTimeWhileVideoIsPlaying(evt) {

for(var point of points){
  console.log(vid.currentTime);
  if(vid.currentTime > point.time){
      if(!point.done){
        vid.pause();
        //vid.currentTime = point.time; //Optional, if you want to pause exact
        point.done = true;
      }
   }
}

The !point.done check guards against the 'inexactness' of the greater than check. It prevents the pause from taking effect at 5.3, 5.4, 5.8 etc. if the code previously paused at 5.

Checkout the updated pen : https://codepen.io/anon/pen/PRGOxW

Thanks gawicks it worked but i don't understand if(!point.done) what are you trying to do on this line — Emmanuel Okezie Ogbonna, Mar 19 '18 at 20:12

How to check if current time is equal to a particular number before I stop the video in html5 video

1 Answers1