Html5 视频加载不正确

Question

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

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

项目可以找到here

Answer 1

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

检查视频是否准备就绪

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