I have a video element that I want to pause for 3 seconds before each loop. The purpose is to show the poster image/attribute during those pauses. I’ve got it set up to do this before the initial play, but how do I get it do pause before each loop?
In addition, I have some header elements that are hidden during these pauses, but are shown again when the video resumes. I don’t think this part should interfere, but wanted to note it.
Markup
<video id="video"
poster="<?php echo get_template_directory_uri();?>/assets/img/award.jpg" playsinline
muted loop>
<source type="video/mp4" src="<?php the_field('hero_video'); ?>" />
</video>
CSS
.hide {
opacity: 0;
transition: all .2s ease;
}
Javascript
let video = document.getElementById("video");
let heading = document.querySelector(".hero-heading");
let subheading = document.querySelector(".hero-subheading")
video.addEventListener("canplay", function () {
setTimeout(function () {
video.play();
heading.classList.remove('hide');
subheading.classList.remove('hide');
}, 3000);
});