# 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.

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;
``````

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"
``````

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>``````