Menu
html5-video event timeupdate fires twice on Chrome browser.
Steps to reproduce:
<!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>Any ideas ?))
791
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.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
