Pause video before every loop

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