javascript - 为什么 html5-video 事件 timeupdate 在 Chrome 浏览器上触发两次?

标签 javascript google-chrome video html5-video dom-events

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

重现步骤:

  1. 运行代码

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

  1. 点击按钮
  2. 检查结果(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/

相关文章:

javascript - 如何从 View 中捕获关键事件?

javascript - 旋转图像的 SVG 低性能

Chrome 中的 HTML5 视频标签 - 为什么从我的网络服务器下载视频时忽略 currentTime?

javascript - 一页上有多个谷歌地图,不起作用

javascript - PHP JavaScript-将多个复选框选择到单个phpmyadmin表中

python - Jupyter Notebook 超时等待 Chrome 中的响应

macos - 我必须以某种方式输入 https ://explicitly when chrome returns ERR_EMPTY_RESPONSE

javascript - AngularJS在不活动后显示视频,隐藏视频并在点击时重置为开始

ruby-on-rails - 从 AWS Elastic Transcoder 作业中检索文件和缩略图 URL

javascript - 如果未在配置文件中设置实体目录,则 TypeORM 无法找到实体