Make an HTML5 video in slow motion using DOM playbackRate property

Here in this tutorial, you are going to learn how to control the playback speed of an HTML5 video to give it a slow motion effect.

Let’s first write our HTML code:

<video id="theVideo" width="420" controls>
  <source src="spider-man.mp4" type="video/mp4">
</video>
<br/>
<button id="videoBtn">Play video in slow motion</button>

In the above HTML code, we have an HTML5 video tag and I have also created a button. On clicking the button, our HTML5 video will play in slow motion. To give our video slow motion effect we call our JavaScript function when clicking the button we have just created below the video tag. We have taken an ID videoBtn for our button.

Play/Pause Button For HTML5 Video Using JavaScript

Now, below is our DOM JavaScript code:

document.getElementById("videoBtn").addEventListener("click", function(){ 
    document.getElementById("theVideo").playbackRate = .4;
});

In the above code, we have set the click event listener to our button. If our button is clicked, then the video will have a playback rate 0.4. We have taken our video by its ID and set the playback rate. The playbackRate property is responsible for making the HTML video slower or faster. Here we have made our video play in slower speed by setting the value of this property to 0.4.

That’s it. Now we can test our code on our browser. If we open it with our browser then we will see that if we click the button, our video play in slow motion.

Play/Pause Button For HTML5 Video Using JavaScript

Play/Pause Button For HTML5 Video Using JavaScript

We can set the playbackRate as we like. By default, the value of playbackRate is 1.0. We can make the video play in slow motion by setting this value less than 1. If we set the video playback rate larger than 1, then our HTML5 video will play faster than the normal rate.

The playbackRate property is supported by all modern browsers. It is supported by Chrome, Internet Explorer 9.0 or higher version, Firefox 20.0 or higher, Safari, and Opera and many others.