如何实现视频每次循环前暂停3秒并显示poster图像？

需求说明 #

我有一个video元素，希望每次循环播放前暂停3秒，目的是在暂停期间显示poster图像。目前已实现初始播放前的该效果，但不知如何实现每次循环前的暂停。此外，我有一些header元素会在暂停时隐藏，恢复播放时重新显示，这些header和subheader元素都带有hide类，这部分不会产生干扰。

修改后的代码实现 #

HTML（无需修改） #

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

// 监听视频结束事件，实现循环前的暂停逻辑
video.addEventListener("ended", function () {
    // 暂停视频，浏览器会自动显示poster图
    video.pause();
    // 隐藏标题元素
    heading.classList.add('hide');
    subheading.classList.add('hide');
    
    // 延迟3秒后重置进度并重新播放
    setTimeout(function () {
        video.currentTime = 0;
        video.play();
        heading.classList.remove('hide');
        subheading.classList.remove('hide');
    }, 3000);
});

关键说明 #

• 借助视频的ended事件：视频播放到结尾时会触发该事件，这是实现循环前暂停的核心触发点
• 视频暂停后，浏览器会自动显示设置的poster图像，无需额外添加显示逻辑
• 重置currentTime到0，是为了避免部分浏览器在循环时出现进度异常，确保每次都从视频开头播放
• 保留初始加载时的3秒延迟逻辑，同时同步了循环前的暂停、标题隐藏/显示流程

内容的提问来源于stack exchange，提问作者RRhodes