javascript html5 视频的 timeupdate 事件多久触发一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9678177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How often does the timeupdate event fire for an html5 video
提问by Costa
Learning html5 stuff. It's pretty awesome! Wondering how often the timeupdate event fires.
学习html5的东西。真是太棒了！想知道 timeupdate 事件多久触发一次。
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.
边注：js 视频 api 有很多有趣的可能性。例如，可以使用 ctrl + F 来搜索视频。运行语音识别作为视频处理的一部分，然后创建一个长键值存储，以时间戳作为键和单词作为值，并编写一个函数来搜索这些单词的实例，但返回时间戳并寻找您的视频。无论如何，这只是 youtube 应该跳的一个疯狂想法。
Any help with timeupdate would be awesome!
任何有关 timeupdate 的帮助都会很棒！
回答by Colin Kenney
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.
Firefox 每帧触发一次 timeupdate 事件。Safari 5 和 Chrome 6 每 250 毫秒触发一次。Opera 10.50 每 200 毫秒触发一次。
回答by Phil
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/
代码来自http://remysharp.com/2010/07/21/throttling-function-calls/
回答by Philip Rollins
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.
如果您只需要经常运行一个函数，最好使用 play 和 pause 事件运行它。
Below is an example of running a process every 3 seconds while the video is playing.
下面是在视频播放时每 3 秒运行一个进程的示例。
video.addEventListener('play', () => {
video._updateInterval = setInterval(() => {
// do what you need
}, 3000);
}, true);
video.addEventListener('pause', () => clearInterval(video._updateInterval), true);
