How to reset a video tag with javascript?

Question

I'm currently working with a video tag:

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

It is tied to an intersection observer that triggers the autoplay attribute on it. When the video is not visible I want to reset it so it returns to its pristine state (showing the poster).

Currently I'm doing this:

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

This works but I'm having trouble with the browser reloading my page (which may or may not is caused by the .load method.

Is there a better way to reset a video?

_"which may or may not is caused by the .load method"_ - That should be easy to debug. — Andreas, Mar 17 '21 at 14:33
Not really, since I'm using NextJs and the relead is not triggered by a specific action - rather by an action triggered by a scroll event. It can also be code that triggers recompiling during development. I don't get why this is downvoted - there is literally no question that explains how to reset a video element on SO. — Xen_mar, Mar 17 '21 at 14:36
Duplicate? https://stackoverflow.com/questions/53529246/html5-video-reset-video-after-slide — T.J. Crowder, Mar 17 '21 at 14:40
@isherwood They all use `.load()` hence there is no _"better way to reset a video"_. You can add `.currentTime` but, according to some of the comments, it didn't change anything or was the actual solution. With that I'm not convinced to choose a dupe target. Maybe someone else can: [1](https://stackoverflow.com/questions/16646648/), [2](https://stackoverflow.com/questions/25799134/), [3](https://stackoverflow.com/questions/39098532/), [4](https://stackoverflow.com/questions/10457750/), [5](https://stackoverflow.com/questions/8402158/), [6](https://stackoverflow.com/questions/7853594/), ... — Andreas, Mar 17 '21 at 14:54

score 2 · Accepted Answer · answered Mar 17 '21 at 14:36

Rather than load, if the goal is to move the video back to the very beginning, I'd set currentTime to 0. From MDN's video documentation:

currentTime

Reading currentTime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. If the media has not started playing yet, the time offset at which it will begin is returned. Setting currentTime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.

(my emphasis) See also HTMLVideoElement and HTMLMediaElement.currentTime.

So:

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

How to reset a video tag with javascript?

1 Answers1