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.

4
  • 1
    currentTime of the video is in units of seconds. If you want to pause at 2.5 minutes, just do currentTime >= 2.5 * 60?
    – Terry
    Commented Aug 7, 2017 at 14:45
  • And if you dont need the math.round, why dont you leave it away?? Commented Aug 7, 2017 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
    Commented Aug 7, 2017 at 14:51
  • timeupdate does not dispatch linearly Commented Aug 7, 2017 at 15:00

2 Answers 2

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>

2
  • I have no clue on how to use this .. I was just following a tutorial and trying to fork the exercise files.
    – Logan
    Commented Aug 7, 2017 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. Commented Aug 7, 2017 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;
1
  • This worked.. but only on Chrome not on Waterfox/firefox
    – Logan
    Commented Aug 7, 2017 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.