Question

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

重现的步骤：

运行代码

<!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>

点击按钮
检查结果（buttonClick x 1，timeUpdate x 2）

任何想法？））

Answer 1

您要查找的活动不是timeupdate活动，请选择seeked活动。

当您更改当前时间位置时，会发生seeking，当位置发生变化时，会调用seeked。

也许，其中一个seeking事件可以通过bubbling or capturing触发timeupdate两次，但我对此表示怀疑。 Timeupdate比这更复杂。来自documentation`

timeupdate将在大约4Hz和66Hz之间抛出

这意味着它取决于您使用的浏览器和系统以及特定系统的负载，并且与currentTime更改无关，尽管在某些文档中已经说明了这一点。一般来说，它将被触发每秒1至4次。（假设250ms足以更新显示器，更频繁的更新是浪费能源） Firefox可能会在每一帧都触发事件，这会给你一种每秒工作一次的印象。 timeupdate frequency in different browsers

谈论当前案例：在Chrome案例中，由于选择了4Hz频率，事件可能会被触发两次。

4Hz是奈奎斯特频率的2倍，持续1秒（1Hz）数字采样

您可能需要查看不同的帧速率和DF / NDF，以便更精确地选择currentTime。

此外，您可以使用此page来查看视频API。

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

1 个答案: