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

Posted 2023-05-09

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

【英文标题】：event.listener("timeupdate") is not equal to current time/4 because it runs every 250ms in chrome

【发布时间】：2014-05-22 13:25:20

【问题描述】：

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

为此，它需要视频持续时间和 / 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);

【问题讨论】：

所以 chrome 没有返回正确的视频时长还是什么？通过发布简约示例代码来重现您的问题来改进您的问题，谢谢！并自行调试以检查 chrome 上出了什么问题

【参考方案1】：

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

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

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

【讨论】：

如何更频繁地运行计时器？会不会像把 false 改成 50 一样简单？

呵呵.. 发布那个答案时我才醒过来。您的计时器应该足够频繁地运行，因此如果您大于时间，只需将其更改为比较，而不是与它进行精确比较。

我认为这行不通。因为计时器将每 250 毫秒运行一次，它会检查它是否更大并说“是”，然后一遍又一遍地运行该函数。我只希望该功能只运行一次。有什么我可以放置的东西只运行一次 if 语句吗？即使满足了四次要求？