CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Logan
Logan

Reputation: 39

How to get a precise timeupdate on a video to return upto 2 decimal numbers (milliseconds)?

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.

Upvotes: 2

Views: 2972

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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;

Upvotes: 1

guest271314
guest271314

Reputation: 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>

Upvotes: 1

Related Questions