如何使用 javascript 重置视频标签？答案

【问题标题】：How to reset a video tag with javascript?如何使用 javascript 重置视频标签？
【发布时间】：2021-03-17 14:30:09
【问题描述】：

我目前正在使用视频标签：

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

它与触发其自动播放属性的交叉点观察器相关联。当视频不可见时，我想将其重置为原始状态（显示海报）。

目前我正在这样做：

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

这可行，但我在浏览器重新加载我的页面时遇到问题（这可能是也可能不是由 .load 方法引起的。

有没有更好的方法来重置视频？

【问题讨论】：

“这可能是由.load方法引起的，也可能不是” - 这应该很容易调试。
并非如此，因为我使用的是 NextJs，并且重新引导不是由特定操作触发的，而是由滚动事件触发的操作触发的。它也可以是在开发过程中触发重新编译的代码。我不明白为什么这被否决了——实际上没有问题可以解释如何在 SO 上重置视频元素。
重复？ stackoverflow.com/questions/53529246/…
@isherwood 他们都使用.load()，因此没有“重置视频的更好方法”。您可以添加.currentTime，但根据一些cmets，它没有改变任何东西或者是实际的解决方案。有了这个，我不相信选择一个欺骗目标。也许其他人可以：1、2、3、4、5、6、...

【解决方案1】：

而不是load，如果目标是将视频移回最开始，我会将currentTime 设置为0。来自 MDN 的video documentation：

currentTime

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

所以：

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

【讨论】：