HTML5 Video rewind in JavaScript

By Paras Saini

In this tutorial, I will explain to you how you can rewind your HTML 5 video using JavaScript.

Before going into this let’s first understand about HTML5 video element.

HTML5 Video:-

To show a video on your webpage you need to use the <video> element in the HTML.

Using <video> element in HTML you can show any video on your webpage which supports the following formats.

MP4
WebM- an audiovisual file format
Ogg- Open source file format for multimedia

In HTML you have two attributes that come with Video elements controls and autoplay.

Using attribute controls you can add video controls like play, pause, and volume.

And with attribute autoplay you can start your video automatically.

But if you want to add other functionality like rewind, pause, and set the duration then you can do it using DOM(Document Object Model) in HTML.

The HTML DOM elements defines methods, properties and events for the <video> element.

Rewind HTML5 Video using JavaScript

Rewind comes into play when you want to go back to a specific time while watching or playing your video. According to your video length, you can change this time value.

Method:-

Now in order to add rewind functionality in your video, you can do this by creating a function in JavaScript as forwardRewind() or Rewind() or you can give it any name. Using it you can go in both directions forward and backward in your video.

In order to do that you need to pass a parameter like param as name and then setting its value according to the length of your video.

For example, let’s suppose I give param as -7 it means when the user clicks on the rewind button he goes -7 to back to the video, or if the user gives param value as +7 he goes +7 forward to the video.

So, using this method we can rewind as well as go forward in our video.

JavaScript function to rewind and forward video

<!-- JavaScript Function to rewind and forward -->

function forwardRewind(param)
{
   var videoPlayer=document.getElementById("myVideo");
   videoPlayer.currentTime +=param;
}

<!--HTML code to with JavaScript function to rewind a video-->
<!Doctype html>
<html>
<head>
<script>
function forwardRewind(param) 
{ 
      var videoPlayer=document.getElementById("myVideo"); 
       videoPlayer.currentTime +=param; 
}
</script>
</head>

<body>
<video id="myVideo" controls>
<source src="your video" type="your video type">
</video>

<!--calling above JavaScript finction to rewind and forward -->
<button id="btnRewind" onclick="forwardRewind(-7)"><<</button>  <!--this line of code will rewind your video -->
</body>
</html>

Output:-

Successfully Rewind the Video.

Also read: Start HTML5 video from a particular time in JavaScript