Make an HTML5 video in slow motion using DOM playbackRate property

Here in this tutorial, we are going to show you how to control the speed of an HTML5 video by slow down the speed of the video. Our HTML5 video will play in slow motion after we click a button.

Let’s first write our HTML code:

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

In the above HTML code, we have an HTML5 video and a button. On clicking the button, our HTML5 video will play in slow motion. To give our video slow motion we will add the functionality to 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 will be clicked, then the video will have the playback rate 0.4. We have taken our video by its ID and set the playback rate. The playback rate 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 playback rate 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 browser. It is supported by Chrome, Internet Explorer 9.0 or higher version, Firefox 20.0 or higher, Safari and Opera.

Leave a Reply

Your email address will not be published. Required fields are marked *