event.listener("timeupdate") 不等于当前时间/4，因为它在 chrome 中每 250 毫秒运行一次

Question

我有一个项目，在视频的每个季度都显示一些内容。

为此，它需要视频持续时间和 / 4。然后 *2 表示一半，* 3 表示 3 个四分之一。

它还会进行时间更新

如果 timeupdate = videoduration/4 则显示内容。

这在 Firefox 中很好，因为 timeupdate 会在每一帧中滴答作响。但在 Chrome 中，timeupdate 每 250 毫秒滴答一次，这意味着显示内容的功能不会运行，因为 timeupdate 永远不会 = video duration/4。

虽然四舍五入可以解决这个问题，但这意味着因为它在 timeupdate = videoduration/4 时运行该函数并且它在 chrome 中每 250 毫秒运行一次，所以内容每季度显示 4 次。

有什么办法可以解决这个问题吗？

编辑 - 参考代码：

 video.addEventListener('loadedmetadata', function() {

perc = video.duration/4;
});


//  display the current and remaining times
video.addEventListener("timeupdate", function () {
    //  Current time  
    var vTime = video.currentTime;
perc1 = perc;
vTime1 = vTime;

if(vTime1 == perc1){
$('div.track').html('25%');

}
if(vTime1 == perc1+perc1){
$('div.track').html('50%');

}
if(vTime1 == perc1+perc1+perc1){
$('div.track').html('75%');

}
}, false);

Answer 1

setTimeout 不能保证在您要求时运行。它不应该提前运行，但可以稍后运行。您根本无法将其用作实时计数器。

在这种情况下，您能做的最好的事情就是跟踪它运行了多少次...与其尝试匹配百分比，不如匹配运行时间。

另一种方法是更频繁地运行计时器（每 50 毫秒左右）并检查您是否通过计时器标记，如果是，则检查您的 HTML。