“onplay”有延迟吗？

Question

在调用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 事件？

Answer 1

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

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

---

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