All geek questions in one place

Why does html5-video event timeupdate fire twice in a Chrome browser?

The html5-video timeupdate event fires twice in the Chrome browser.

Steps to play:

  • Launch 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>
Run codeHide result
  1. Press button
  2. Check result (buttonClick x 1, timeUpdate x 2)

Any ideas?))

+6
source share
1 answer

The event you are looking for is not an event timeupdate, select an event seeked.

When the current time position changes seeking, it happens , and when the position changes, - seeked.

, seeking timeupdate , . . `

timeupdate 4 66

, , currentTime, , . , 1 4 . (, 250 , - ) Firefox , , . timeupdate

: Chrome , 4 .

4 2 1 (1 ),

, DF/NDF, .

, API .

+2

Source: https://habr.com/ru/post/1016494/

More articles:


All Articles