How often does the timeupdate event fire for an html5 video

Question

Learning html5 stuff. It's pretty awesome! Wondering how often the timeupdate event fires.

SIDE NOTE: There are so many interesting possibilities with the js video api. For instance, it might be possible to use ctrl + F to search through video. Run a voice recognition as part of video processing, then create a long key value store with timestamps as keys and words as values, and write a function that searches for instances of those words, but returns timestamps and seeks your video. Anyways, that's just one crazy idea youtube should jump on.

Any help with timeupdate would be awesome!

Answer 1

According to this Bugzilla page:

Firefox fires the timeupdate event once per frame. Safari 5 and Chrome 6 fire every 250ms. Opera 10.50 fires every 200ms.

Answer 2

I used a generic throttle function

_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);
        }
    };
};

and wired it up with

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

hope this helps someone.

code cribbed from http://remysharp.com/2010/07/21/throttling-function-calls/

Answer 3

If you only need to run a function every so often it'd be a better idea to run it using the play and pause events.

Below is an example of running a process every 3 seconds while the video is playing.

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

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