html5 视频的 timeupdate 事件多久触发一次答案

【问题标题】：How often does the timeupdate event fire for an html5 videohtml5 视频的 timeupdate 事件多久触发一次
【发布时间】：2012-03-13 04:00:21
【问题描述】：

学习 html5 的东西。真是太棒了！想知道 timeupdate 事件多久触发一次。

旁注：js video api 有很多有趣的可能性。例如，可以使用 ctrl + F 搜索视频。运行语音识别作为视频处理的一部分，然后创建一个长键值存储，其中时间戳作为键，单词作为值，并编写一个函数来搜索这些单词的实例，但返回时间戳并查找您的视频。无论如何，这只是 youtube 应该采用的一种疯狂想法。

任何有关 timeupdate 的帮助都会很棒！

【问题讨论】：

嘿，这个词搜索是个很酷的主意！
知道在 Vimeo 或 YouTube 工作的任何人可能会实施它吗？
不。它会有自己的挑战。如果视频有字幕，对视频进行索引是微不足道的，但如果没有，则服务器必须将语音自动转换为文本。由于它本身并不总是 5-10 秒的视频，可能大约 10 分钟左右，因此该过程必须将相当长的音频转换为文本，这本身很困难，准确性除外。
听起来不错。您认为哪些挑战值得挑战，哪些不值得？
值得，绝对.. :)

标签： javascript html video

【解决方案1】：

根据this Bugzilla page：

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

【讨论】：

Go Firefox btw，每帧执行一次非常有意义。
除非你绑定某种回调；每秒触发 25 次回调可能会非常密集……尤其是当您无法限制它时。
您还能如何让程序知道在视频的特定时刻执行功能？
如果有帮助请看我的回答！！！ stackoverflow.com/questions/4460263/…

【解决方案2】：

我使用了一个通用的油门函数

_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/

【讨论】：

myPlayer = document.querySelector('audio') 吗？由于 Uncaught TypeError: Object # has no method 'on'

【解决方案3】：

如果您只需要经常运行一个函数，最好使用播放和暂停事件来运行它。

下面是视频播放时每 3 秒运行一个进程的示例。

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

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

【讨论】：