每次循环前暂停视频

Question

我有一个video元素，我想在每次循环之前暂停3秒。目的是在这些暂停期间显示海报图像/属性。我在开始播放前设置了这个功能，但我如何让它在每次循环前暂停呢?

此外，我有一些标题元素在这些暂停期间隐藏，但在视频恢复时再次显示。我认为这部分不应该干扰，但我想要注意一下。header和subheader元素都有'hide'类。

标记

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

Answer 1

从谷歌来到这里，想做这个，最后弄清楚了。在这里发布，以防其他人遇到这个。

用视频ended事件代替setTimeout。

let video = document.querySelector("video");
let heading = document.querySelector(".hero-heading");
let subheading = document.querySelector(".hero-subheading");
video.addEventListener("ended", async (event) => {
heading.classList.add('hide');
subheading.classList.add('hide');
// Does the equivalent of a sleep in JS
await new Promise(resolve => setTimeout(resolve, 3000));
heading.classList.remove('hide');
subheading.classList.remove('hide');
// start playing the video again
video.play();
});