小编Vit*_*nko的帖子

为什么html5-video事件timeupdate会在chrome浏览器上触发两次?

html5-video事件timeupdate在chrome浏览器上触发两次.

重现步骤:

  1. 运行代码

<!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 Code Online (Sandbox Code Playgroud)

  1. 点击按钮
  2. 检查结果(buttonClick x 1,timeUpdate x 2)

有任何想法吗 ?))

javascript video google-chrome javascript-events html5-video

6
推荐指数
1
解决办法
1553
查看次数