How to get current time of video as event to function&

Question

everyone! I am new to javascript. Suppose I have a video and I want that when it is played for a certain number of seconds (say 5 seconds), my_function will execute (for example, the word 'five' should be displayed in the console). For some reason, the code below correctly displays a current number of seconds of video, but does not display the word in the console.

html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text</title>

</head>
<body>
    <div class="container">
        <video width="400" controls id="video">
          <source src="video/video.mp4" type="video/mp4">
          Your browser does not support HTML5 video.
    </video>
    <span class="timelapse" id='current'> </span>
    </div>
    <button id='getTime'>getTime</button>
</body>

 <script src="js/script.js"></script>
</html>

script.js:

    var aud = document.getElementById('video');

aud.ontimeupdate = function(){myFunction()};

function myFunction(){
    document.getElementById('current').innerHTML = aud.currentTime;
    if (aud.currentTime == 5.0){
        console.log('Hello!');
    }
};

Thank you!

score 3 · Accepted Answer · answered Jul 10 '19 at 16:14

I think your event listener may not be right

try this

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text</title>

</head>
<body>
    <div class="container">
        <video width="400" controls id="video">
          <source src="video/video.mp4" type="video/mp4">
          Your browser does not support HTML5 video.
    </video>
    <span class="timelapse" id='current'> </span>
    </div>
    <button id='getTime'>getTime</button>
</body>

 <script src="js/script.js"></script>
</html>

Script.js

var aud = document.getElementById('video');
aud.addEventListener("timeupdate", myFunction)

function MyFunction(){
  if(aud.currentTime == 5){
    console.log('Hello') 
  }
}

This way then the event listener will handle the changes in time and then should output when time is equal to 5.

Reference

Max Titkov · Answer 2 · 2019-07-10T18:45:12.643

I'm so stupid! I compared the current video time with a specific number (in the example from 5.0). However, the time of the video that "captures" the script may differ from 5.0: 5.1, 5.121, 5.132 ... and not be an integer. Therefore, the code did not work. In order to display in the console, you need to use: aud.currentTime > 5. So, the right code is:

var aud = document.getElementById('video');

aud.ontimeupdate = function(){myFunction()};

function myFunction(){
    console.log();
    if(aud.currentTime > 5.0){
        console.log('Five')
    }
};

But now I have another question. How to make myFunction() execute only ONCE? I tried to use this expression: (aud.currentTime > 5.0) & (aud.currentTime < 5.3), but it not guarantee, that.

The answer is here.

Eyob Tariku · Answer 3 · 2021-09-06T08:59:31.483

The ontimeupdate event is fired with a varying frequency that depends on the system load and user-agents. And the currentTime attribute is a decimal number, not an integer. Thus, to execute the above at the 5th second and ensure that it is only fired once, here is what I suggest you do:

var aud = document.getElementById('video');
var approxTime = 0
aud.ontimeupdate = function(){
    var currentTime = Math.floor(aud.currentTime);
    if (currentTime !== approxTime) {
        approxTime = currentTime;
        if (approxTime === 5) {
            console.log('Five')
        }
    }
};

How to get current time of video as event to function&

3 Answers3