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

Question

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

Vit*_*nko 6 javascript video google-chrome javascript-events html5-video

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>

Run Code Online (Sandbox Code Playgroud)

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

有任何想法吗？))

Answer 1

Tar*_*syk 2

您正在寻找的事件不是timeupdate事件，请选择一个seeked事件。

当您更改当前时间位置时，会发生一个seeking事件，并且当位置更改时 -seeked被调用。

也许，其中一个事件可以通过冒泡或捕获seeking触发两次，但我对此表示怀疑。Timeupdate 比这更复杂。来自文档`timeupdate

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

这意味着它会根据您使用的浏览器和系统以及特定系统的负载而有所不同，并且与更改无关currentTime，尽管在某些文档中是这样说明的。一般来说，每秒会触发 1 到 4 次。（假设 250 毫秒足以更新显示，更频繁的更新会浪费能源）Firefox 可能会在每一帧触发该事件，这给您一种每秒运行一次的印象。timeupdate不同浏览器中的频率

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

4Hz 是用于数字采样的 1 秒奈奎斯特频率 (1Hz) 的 2 倍

您可能需要查看不同的帧速率和 DF/NDF，以便更准确地选择当前时间。

您还可以使用此页面查看视频 API 的实际运行情况。

归档时间：	8 年，6 月前
查看次数：	1553 次
最近记录：	8 年，6 月前