如何用JavaScript重置视频标记？

Question

我目前正在处理一个视频标签：

<video loop class="video">
    <source src="..." type="video/mp4"></source>
</video>

它被绑定到一个交叉点观察器，该观察器触发了它的autoplay属性。当视频是不可见的，我想重置它，使它回到它的原始状态（显示海报）。

目前我正在这样做：

const videoNote = document.querySelector("video")
videoNote.pause()
videoNote.load()

这是可行的，但我在浏览器重新加载我的页面时遇到了麻烦（这可能是.load方法造成的，也可能不是。

有更好的方法重置视频吗？

Answer 1

而不是load，如果目标是将视频移回到最开始的位置，我会将currenttime设置为0。来自MDN的视频文档：

当前时间

读取currenttime返回一个双精度浮点值，该值指示以秒为单位指定的媒体的当前播放位置。如果媒体尚未开始播放，则返回开始播放的时间偏移量。设置currenttime将当前播放位置设置为给定时间，并在当前加载媒体时查找该位置的媒体。

（我的重点）另请参见HTMLVideoElement和HTMLMediaElement.CurrentTime。

所以：

const videoNote = document.querySelector("video");
videoNote.pause();
videoNote.currentTime = 0;