HTML5视频的timeupdate事件多久触发一次？

Question

正在学习HTML5知识，非常棒！想知道timeupdate事件的触发频率。

顺便提一下：JS视频API有很多有趣的可能性。例如，可以使用ctrl + F在视频中搜索。将语音识别作为视频处理的一部分，然后创建一个以时间戳为键、单词为值的长键值存储，并编写一个函数来搜索这些单词的实例，但返回时间戳并定位到视频中。无论如何，这只是一个疯狂的想法，YouTube应该借鉴。

希望能有关于timeupdate的任何帮助！

- Costa Michailidis

---

嘿，这个单词搜索是一个相当不错的点子！ - SexyBeast

你认识在Vimeo或YouTube工作的人吗？他们可能会实现它吗？ - Costa Michailidis

不会。它将有自己的挑战。如果视频有字幕，索引视频就很容易，但如果没有字幕，则服务器必须自动转换语音为文本。由于它不总是一个5-10秒钟的视频，可能长达10分钟左右，因此该过程必须将相当长的音频转换为文本，这本身就很困难，准确性另说。 - SexyBeast

听起来对我来说没问题。你觉得呢，值得一试的挑战，还是不值得？ - Costa Michailidis

值得的，绝对没错.. :) - SexyBeast

Answer 1

根据此Bugzilla页面的说法：

Firefox每帧触发一次timeupdate事件。Safari 5和Chrome 6每250毫秒触发一次。Opera 10.50每200毫秒触发一次。

- Colin Kenney

---

顺带一提，使用Firefox浏览器每帧只执行一次这样做非常合理。 - Costa Michailidis

除非您绑定了某种回调函数；否则每秒触发25次回调函数可能会相当耗费资源...特别是当您无法进行节流时。 - Lachlan McDonald

你还有什么其他方法可以让程序知道在视频的特定时刻执行一个函数？ - Costa Michailidis

请参考我的答案，如果有帮助的话!!! https://dev59.com/DW855IYBdhLWcg3wPBtx#31390750 - vinesh

Answer 2

如果您只需要定期运行某个函数，最好使用播放和暂停事件来运行它。下面是一个示例：在视频播放时每3秒运行一次该过程。

video.addEventListener('play', () => {
  video._updateInterval = setInterval(() => {
    // do what you need
  }, 3000);
}, true);

video.addEventListener('pause', () => clearInterval(video._updateInterval), true);

- Philip Rollins

Answer 3

我使用了一个通用的节流函数

_self.throttle = function (fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
        deferTimer;
    return function () {
        var context = scope || this;

        var now = +new Date,
            args = arguments;
        if (last && now < last + threshhold) {
            // hold on to it
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            last = now;
            fn.apply(context, args);
        }
    };
};

并使用有线连接进行了连接

myPlayer.on('timeupdate', window.vm.throttle(function () {
        window.vm.setWatched(myPlayer.currentTime());
    }, 3000));

希望这能对某些人有所帮助。

代码来自http://remysharp.com/2010/07/21/throttling-function-calls/

- Phil

---

myPlayer = document.querySelector('audio') 是否为真？因为出现了 Uncaught TypeError: Object #<HTMLAudioElement> 没有 'on' 方法的错误。 - loretoparisi