HTML5 Video pause and rewind

Question

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.

Answer 1

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;

Answer 2

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