为什么html5-video event timeupdate在Chrome浏览器上触发两次？

html5-video event timeupdate在Chrome浏览器上触发两次。为什么html5-video event timeupdate在Chrome浏览器上触发两次？

重现步骤：

运行代码

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
\t <script 
 
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
 
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" 
 
    crossorigin="anonymous"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <video id="video"> 
 
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
     </video> 
 
\t \t <button id="button">Update time</button> 
 
\t \t <script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t var vid = document.getElementById("video") 
 
\t \t \t \t vid.addEventListener("timeupdate", timeUpdate, false); 
 
\t \t \t \t 
 
\t \t \t \t $("#button").on("click", buttonClick); 
 
\t \t \t \t 
 
\t \t \t \t function timeUpdate(e){ 
 
\t \t \t \t \t console.log("timeUpdate"); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t function buttonClick(e){ 
 
\t \t \t \t \t console.log("buttonClick"); \t \t \t \t \t 
 
\t \t \t \t \t vid.currentTime = 1; 
 
\t \t \t \t } 
 
\t \t \t }); \t \t \t 
 
\t \t </script> 
 
\t </body> 
 
</html>

点击按钮

检查结果（buttonClick x 1，timeUpdate x 2）

个

任何想法？））

来源

2017-04-12 Vitalii Panchenko

你检查了这个stackoverflow问题的答案吗？ http://stackoverflow.com/questions/19511253/call-twice-timeupdate – user1731468

是的，我有，但答案没有帮助。 –

你正在寻找一个事件是不是timeupdate事件，挑一个seeked事件。

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

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

timeupdate将在约4赫兹，丢66Hz

这意味着它取决于浏览器和使用的系统和特定系统的负荷，有无关一个currentTime变化，尽管事实上它是在一些文件中陈述的。一般来说，它将每秒触发1到4次。（假设250ms足以更新显示屏，更频繁的更新会浪费能源） Firefox可能会每隔一帧触发一次事件，这会让您觉得它每秒钟工作一次。 timeupdate frequency in different browsers

谈到当前情况：在Chrome的情况下，事件可能会被触发两次，因为已选择4Hz的频率。

4Hz的是用于数字采样的奈奎斯特频率为1秒（赫兹）的2倍

你可能想看看不同的帧速率和DF/NDF是上更精确当前时间选择。

你也可以使用这个page来看看视频API的实际应用。

来源

2017-04-12 20:48:07

非常感谢！ “寻找”事件是完美的。 –

为什么html5-video event timeupdate在Chrome浏览器上触发两次？

回答

相关问题