“onplay”有延迟吗？

Posted 2023-05-07

【中文标题】“onplay”有延迟吗？

【英文标题】：does "onplay" have a delay?

【发布时间】：2022-01-21 15:12:15

【问题描述】：

在调用play() 函数时，我可以看到在实际开始播放之前有 0.0~0.5 秒的明显延迟。

我在使用以下事件监听器时遇到了一些问题

media.addEventListener(
    "play",
    function()
        toggle_class(button[0], true);
        
        // compute animations for seekbar
        time_to_compute = media.duration - media.currentTime;
        progress.style = "transition: width linear " + time_to_compute + "s; width:100%;";
    
);

我不是在时间更改时更改栏的位置，而是更改一次并使用过渡使其动画化。问题是过渡在视频播放之前开始（0.0~0.5 秒）。 chrome 和 firefox 都会出现这个问题。

视频实际播放时是否有 javascript 事件？

【参考方案1】：

timeupdate 事件让您知道currentTime 属性何时发生变化，因此您可以等到第一个timeupdate 发生时才开始动画。还有playing 事件会在媒体第一次开始播放或在暂停后恢复播放时触发，因此您也许可以使用它。

htmlMediaElement 事件的完整列表可以在on MDN 找到。

---

也就是说，我会非常警惕与视频并行运行的动画，它们必然会不同步。相反，我可能会使用 timeupdate 和 requestAnimationFrame 来更新进度指示器。

【讨论】：

感谢您的回答！但是你所说的“绑定”不同步是什么意思？假设视频播放一个小时没有缓冲也没有暂停，那么栏会不同步吗？

另外，确保在播放事件触发时时间已更改已为我解决了该问题。非常感谢！

编辑：它不适用于 chrome。重新开始播放时不会触发 timeupdate 事件