How To Stop Playing A Element And Return It Back To Its Original State?

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 wa

Solution 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>       

Solution 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