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();
});

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

HTML Video Tag - Poster showing for a fraction of a second, then replaced with first slide of video when not ready to play

html

video

buffering