HTML视频标签-海报显示一秒钟，然后在未准备好播放时替换为第一张视频幻灯片

Question

我很难找到任何文档来帮助我弄清楚为什么我的视频海报会在被替换为视频的第一张幻灯片之前显示一小段时间(一瞬间(。播放第一张幻灯片时的视频还没有准备好播放，只是停滞不前。

我很感激这可能是因为它现在正准备播放视频，但由于视频很长，缓冲时间超过了在没有海报的情况下等待的舒适时间。

很难在SO上找到另一个代表我所经历的例子，这表明这可能是一个非常小众的问题。我只是希望有人能帮助我以最方便浏览器的方式主持我的视频，并在视频海报准备播放之前一直显示。

这是我目前使用的HTML(一切正常，只是过早删除了视频海报(：

<video class="video-background" poster="<?php echo $hero_slider_video_poster; ?>" preload="metadata" autoplay muted playsinline>
<source src="<?php echo $hero_slider_video_link; ?>" type="video/mp4">
</video>

感谢所有的贡献！

Answer 1

你有"自动播放"的原因吗？自动播放将尽快启动视频，取代海报。如果你想等到视频准备好，那么添加一个事件监听器：

var el = document.querySelector('.video-background');
el.on('canplay', function () {
el.play();
});