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)
有什么想法吗？))
最佳答案
您要查找的事件不是 timeupdate 事件，请选择一个 seeked 事件。
当您更改当前时间位置时，会发生 seeking，并且当位置更改时 - seeked 会被调用。
也许，其中一个seeking 事件可以通过bubbling or capturing 触发两次timeupdate但我怀疑。 Timeupdate 比这更复杂。来自 documentation `
timeupdate will be thrown between about 4Hz and 66Hz
这意味着它会根据您使用的浏览器和系统以及特定系统的负载而变化，并且与 currentTime 更改无关，尽管在一些文档。一般来说，它每秒会被触发 1 到 4 次。 (假设 250ms 足以更新显示，更频繁的更新是浪费能源)
Firefox 可能会在每一帧触发该事件，这给您的印象是它每秒运行一次。 timeupdate frequency in different browsers
关于当前案例: 在 Chrome 的情况下，事件可能会触发两次，因为已选择 4Hz 频率。
4Hz is 2 times the Nyquist frequency for 1 second (1Hz) used for digital sampling
您可能想查看不同的帧速率和 DF/NDF，以便更精确地选择 currentTime。
您也可以使用这个 page查看视频 API 的运行情况。
关于javascript - 为什么 html5-video 事件 timeupdate 在 Chrome 浏览器上触发两次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43372949/