CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Alejandro Ar
Alejandro Ar

Reputation: 553

HTML5 Video pause and rewind

Is there any way to pause and rewind to 0s a HTML5 video? Or just simply stop?

I got a jQuery popup, so when someone clicks on it, the popup shows up and the video plays, and when you hit the close button the video pauses. So what I'm trying to do is that if you click again the button to show the popup the video begins in the start position (0 secs).

Thanks.

Upvotes: 39

Views: 73521

Answers (4)

Chris Ching
Chris Ching

Reputation: 1444

You can get a reference to your jquery video element upon opening it (or closing the popup) and pause it using pause(), and then set the "currentTime" property to 0 to go back to the beginning.

Here's a reference to the documentation for currentTime.

here's a code sample:

var mediaElement = document.getElementById("video"); 
mediaElement.pause(); 
mediaElement.currentTime = 0;

Upvotes: 61

ajaxx042
ajaxx042

Reputation: 31

To reset a video to 0 seconds in jQuery:

$('#video')[0].currentTime = 0;

Or, in vanilla JS (Although this has been pointed out above):

var video = document.getElementById('video');
video.currentTime = 0;

Upvotes: 2

Matyas
Matyas

Reputation: 13702

To have a proper stop (pause & rewind) functionality you could do the following:

var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();

Note: This is the only version that worked for me in chrome using nodejs (meteorjs) in the backend, serving webm & ogg files

Upvotes: 9

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Just call the pause() method of the video element. To reset the time, set currentTime to 0 (or any other value if needed, in seconds).

Upvotes: 6

Related Questions