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

Answer 1

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

Answer 2

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 3

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/