How to stop playing a <video> element and return it back to its original state?

Question

I was wondering how I could go about resetting a video that was playing or paused to its original state where it isn't playing? I know you can pause the video, but what I really want is for the video to return to it's initial state. This means it would show the poster image if specified and would start from the beginning if the user hit play again.

I looked at all the documentation and I can only find ways to pause.

Answer 1

The easiest way I have been able to find is to reset the source of the video on the ended event so that it returns to the beginning. The other way to handle it would be to have a div with the poster image in that you swap out for the video, but this is simpler...

<script>
var vid=document.getElementById('myVideo');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
    // resets the video element by resetting the source
    this.src = this.src
}
</script>       

Answer 2

You may want to consider using an API for this: have a look at VideoJS

Otherwise try adding the controls Attribute on your video Tag