为什么Chrome浏览器上html5视频事件timeupdate会触发两次？

Question

为什么Chrome浏览器上html5视频事件timeupdate会触发两次？

javascriptgoogle-chromevideohtml5-videodom-events

6

HTML5视频事件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)

有什么想法吗？))

- Vitalii Panchenko

1

你有没有查看过这个stackoverflow问题的答案？http://stackoverflow.com/questions/19511253/call-twice-timeupdate - user1731468

是的，我有，但答案并不有帮助。 - Vitalii Panchenko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- taras · Accepted Answer

您要查找的事件不是timeupdate事件，请选择seeked事件。

当您更改当前时间位置时，会发生seeking，并且当位置更改时，将调用seeked。

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

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

这意味着它会根据您使用的浏览器和系统以及特定系统的负载而有所不同，与currentTime变化无关，尽管某些文档中是这样说明的。通常，它将被触发1到4次每秒。(假设250毫秒足以更新显示屏，更频繁的更新是浪费能源)Firefox可能会在每一帧上触发事件，这会给你一种它每秒只工作一次的印象。不同浏览器中timeupdate的频率谈到当前情况：在Chrome中，事件可能会被触发两次，因为选择了4Hz的频率。

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

您可能想查看不同的帧率和DF/NDF以更精确地选择currentTime.

此外，您可以使用这个页面来查看视频API的实际应用。