I'm struggling to find any documentation that may help me figure out why my video poster will show for a brief period of time (a split second) before being replaced with the first slide of the video. The video when the first slide is showing is not ready to play, and will just be stagnant.
I appreciate this may be because it is getting ready to play the video now it has been requested but as the video is quite long, the buffer time is exceeding a comfortable amount of time to wait without the poster in place.
It was tough trying to find another example on SO that represents what I am experiencing, suggesting this may be a very niche issue. I'm just hopeful someone can help guide me on the most browser friendly way to host my video that will show the video poster up until it is ready to play.
Here is the HTML I am currently using (everything works, it just removes the video poster too early):
<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>
Appreciate all contributions!
is there a reason you have `autoplay in there? autoplay would start the video as soon as possible, replacing the poster. If you want to wait till video is ready then add a event listener:
var el = document.querySelector('.video-background');
el.on('canplay', function () {
el.play();
});