javascript - Html5 视频加载不正确

Question

我有一个元素正在致力于在悬停时在弹出窗口中实现自动播放 html5 视频。一切正常，但在 Chrome 中，当您将鼠标悬停在视频上时，弹出窗口中会出现一个小黑框并持续一秒钟。

现在，我确定这与提取和加载视频所需的时间有关。我只是不确定如何有效地对抗它。也许以某种方式延迟播放或确保它在 onMouseover() 之前加载？

可以找到元素here

Answer 1

您可以在加载媒体之前显示加载动画。要知道如何，请阅读此 Tell whether video is loaded or not in Javascript 如果视频很多，之前加载所有视频对用户来说会很麻烦。

检查视频是否就绪

if ( yourVideoElement.readyState === 4 ) {
    // it's loaded
}