2

I have a video element where I want to compare it's current time to a variable with upto 2 decimal values.

$(video1).on('timeupdate', function(){
    var currentTime = Math.round(this.currentTime);
    var durationNum = Math.round(this.duration);
    var formattedCurrentTime = secondsToHms(currentTime);
    var formattedDurationTime = secondsToHms(durationNum)
    onTrackedVideoFram(formattedCurrentTime, formattedDurationTime)

    if(currentTime >10){ $(".box1, .box2").hide(); }

    if(currentTime == choiceHeart){
        console.log("HERE");
        video1[0].pause();

    }

this is from a tutorial file so the only way I know how to get the timeupdate to return a value is through that math.round function which returns rounded whole number.

BUT, I want to trigger an event, like pause the video at, say, 2.5 minutes (or 2 minutes 15 frames - by After effects 30 fps standards)****

The way I could do is create a variable early in the document like this :

var triggerEvent = 2.5;

So how do I get to understand that 2.5 means to return this value in 2 minutes and half minutes and it should pause the video at 2 & a half minutes?

PS :

In order to pause the video I plan to use an if loop : 

if(currentTime == triggerEvent){
    video1[0].pause();
}

here video1 is referencing to a variable which points to the div which holds the video.

Terry
  • 63,248
  • 15
  • 96
  • 118
Logan
  • 39
  • 1
  • 6
  • 1
    `currentTime` of the video is in [units of seconds](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime). If you want to pause at 2.5 minutes, just do `currentTime >= 2.5 * 60`? – Terry Aug 07 '17 at 14:45
  • And if you dont need the math.round, why dont you leave it away?? – Jonas Wilms Aug 07 '17 at 14:49
  • I am learning, this code is copied from the exercise files. I want to do away with it but if I remove "math.round()" it doesnt work. – Logan Aug 07 '17 at 14:51
  • `timeupdate` does not dispatch linearly – guest271314 Aug 07 '17 at 15:00

2 Answers2

1

You can use Media Fragments URI to play exactly the time slices that you request

Normal Play Time can either be specified as seconds, with an optional fractional part to indicate miliseconds, or as colon-separated hours, minutes and seconds (again with an optional fraction).

For example, the code below will play ten seconds of the media before the pause event is dispatched at the HTMLMediaElement

 video.src = "/path/to/media#t=0,10"

See also

You can use media fragment identifier #t=00:00,02:30 concatenated to the "src" attribute value to make a range request for the specified temporal dimensions of the media resource.

When the media fragment identifier is set at the "src" attribute or .src property of the HTMLMediaElement and .play() is called, exactly two minutes and thirty seconds 02:30 of media will play, before the .pause() event is dispatched when 02:30 is reached, or 150 seconds

<label></label><br>
<video 
  width="300" 
  height="200" 
  controls></video>
<script>
const video = document.querySelector("video");
const label = document.querySelector("label");
const src = "http://mirrors.creativecommons.org/movingimages/webm/ASharedCulture_480p.webm";
const timeSlice = "#t=00:00,02:30";
let raf;
video.src = src + timeSlice;
video.oncanplay = video.play;
video.onpause = function(event) {
  video.onmouseenter = video.onmouseleave = raf = null;
  // do stuff
  if (Math.floor(video.currentTime) === 60*2.5) {
    console.log(video.currentTime, video.currentTime/60);
  }
}
function update(t) {
  let curr = Math.floor(video.currentTime);
  let message = `${curr} seconds played, ${(60*2.5)-curr} to play before pause event`;
  label.innerHTML = message;
  raf = window.requestAnimationFrame(update);
}

video.onmouseenter = function() {
  raf = requestAnimationFrame(update);
}
video.onmouseleave = function() {
  label.innerHTML = "";
  window.cancelAnimationFrame(raf);
}
</script>
guest271314
  • 1
  • 15
  • 104
  • 177
  • I have no clue on how to use this .. I was just following a tutorial and trying to fork the exercise files. – Logan Aug 07 '17 at 15:09
  • @Logan _"I have no clue on how to use this"_ You asked the question specific to this very topic. Have you read the linked specification? See updated post for description of and demonstration of usage. – guest271314 Aug 07 '17 at 22:19
1

You are rounding the variable used in the comparison...
Rounding gets the closer integer:

0.4 gives 0
0.6 gives 1

To get a floating number with two decimals, you can do this:

var currentTime = parseFloat(this.currentTime);
currentTime = parseFloat(currentTime.toFixed(2));


var currentTime = 2.8349354;
currentTime = parseFloat(currentTime.toFixed(2));
console.log(currentTime);

So you can use just this:

var currentTime = parseFloat(this.currentTime.toFixed(2));

And the same thing for durationNum if you also need it to be a float with 2 decimals.

EDIT

You could also try this... It should work on all browsers.

var currentTime = Math.round(this.currentTime*100)/100;
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64