Why does html5-video event timeupdate fires twice on Chrome browser?

Question

html5-video event timeupdate fires twice on Chrome browser.

Steps to reproduce:

Run code

<!DOCTYPE html>
<html lang="en">
    <head>
    <script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
    </head>
    <body>
        <video id="video">
            <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
        </video>
        <button id="button">Update time</button>
        <script>
            $( document ).ready(function() {
                var vid = document.getElementById("video")
                vid.addEventListener("timeupdate", timeUpdate, false);
                
                $("#button").on("click", buttonClick);
                
                function timeUpdate(e){
                    console.log("timeUpdate");
                }
                
                function buttonClick(e){
                    console.log("buttonClick");                 
                    vid.currentTime = 1;
                }
            });         
        </script>
    </body>
</html>

Click on button
Check result (buttonClick x 1, timeUpdate x 2)

Any ideas ?))

Have you checked the answer of this stackoverflow question? http://stackoverflow.com/questions/19511253/call-twice-timeupdate — user1731468, Apr 12 '17 at 18:03

score 2 · Accepted Answer · edited May 23 '17 at 11:46

An event you are looking for is not a timeupdate event, pick a seeked event.

When you change a current time position there is a seeking happens, and when the position is changed - seeked is called.

Maybe, one of those seeking events can trigger timeupdate twice through bubbling or capturing but I doubt. Timeupdate is more complicated than that. From documentation `

timeupdate will be thrown between about 4Hz and 66Hz

Which means it varies depending on a browser and a system you use and a load of the particular system and has nothing to do with a currentTime change, despite the fact that it is stated so in some documentations. In general, it is going to be triggered from 1 to 4 times per second. (it was assumed that 250ms is more than enough to update a display and more frequent updates are a waste of energy) Firefox may fire the event every frame which gives you an impression that it works once per second. timeupdate frequency in different browsers

Talking about current case: In Chrome case, the event could be fired twice because 4Hz frequency has been chosen.

4Hz is 2 times the Nyquist frequency for 1 second (1Hz) used for digital sampling

You may want to take a look at different frame rates and DF/NDF to be more precise on currentTime selection.

Also you can use this page to take a look video API in action.

seeked event also is called twice!!! even floating point is same. — Ali Sadeghi, Jul 26 '21 at 08:57

Why does html5-video event timeupdate fires twice on Chrome browser?

1 Answers1