How often does the timeupdate event fire for an html5 video
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.
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);
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/