How to speed up/down the video in Video.js Player?

Video.JS HTML5 Web Development

In this tutorial, we're going to learn how to speed up a video or speed down a video using video.js. Video.js is a widespread and open-source HTML5 video player framework. It allows video playback on a variety of platforms with varying screen sizes, such as desktop computers and mobile devices. The project, which began in the middle of 2010, already has hundreds of contributors and is utilized on over 450,000 websites. Apart from this, Video.js also gives a variety of options for changing and customizing the video players to your preference.

For the purpose of this tutorial, we're going to customize our video player by speeding up and down our video using video.js. Speeding up and down is a very important function and will use useful for many cases, where the end-user need to change the speed of the video. Having an option to increase or decrease the speed of the video in our video player is really going to enhance the user experience. So, learn how to change the video speed using video.js in the next section of this tutorial.

How to speed up/down the video in Video.js Player?

In this part of the tutorial, we're going to understand how we can add a button to change the playback speed of a video in video.js. Whenever the end user will choose a speed, our video will also play on the speed.

Prerequisite − Assuming that you know how to create a basic video player using the video.js library.

For changing the speed of the video, we're going to use a method called 'playbackRates' which is a default method exposed by video.js only. We need to pass the speed multiplier values to this method and the rest of everything will be handled by video.js on its own.

For example, if we pass the value 1.5, then when this speed is selected from the video player our video will play at 1.5x speed, and similarly, if the value selected is 0.5 then our video will play at half speed (50%).

Now, that we know about playbackRates, to use this method in our local code, we have two options. Either we're going to use it inside the 'data-setup' attribute or we can pass the parameter as video options to our video player reference. Let's have a look at both methods with the help of examples.

Using playbackRates inside 'data-setup' in HTML

We need to pass the playback rates array inside the data setup to our <video> element. Consider the code snippet below for adding a playback speed controller to our video.

<video id="my-video"
   class="video-js vjs-default-skin vjs-big-play-centered"
   controls="true"
   muted="true"
   autoplay="true"
   poster="assets/sample.png"
   preload="auto"
   width="1280"
   height="720"
   data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
>

As you can see, we've added playbackRates array with 5 values, i.e., 0.25, 0.5, 1, 1.5, 2 inside the 'data-setup' attribute. Choosing any of the values is going to either increase or decrease the speed of our video. If the value selected is 0.25x then our video speed will come down to 25% and selecting a value of 2x is will speed up the video to 200%.

You can pass however many values to the playback rates array however please make sure that all the values are strictly greater than 0 i.e. the value has to be positive in every case.

For speeding up a video, pass values greater than 1 to the array like 1.5, 2, 2.5, etc. Similarly, for slowing down a video, pass values between 0 and 1 like 0.25, 0.5, 0.75, etc.

Example 1

The complete code example after adding the video speed controller in our video player is going to look something like this.

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Speed Up/Down Video Tutorial</title>
   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
   <script
      src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
   <video id="my-video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      muted="true"
      autoplay="true"
      poster="assets/sample.png"
      preload="auto"
      width="560"
      height="340"
      data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
   >
      <source
         src="https://www.tutorialspoint.com/videos/sample720.mp4"
         type="video/mp4"
      >
      </video>
      <script>
         // Initializing the video player with video options
         var player = videojs('my-video');
      </script>
</body>
</html>

In the above code, we've done the following −

First, we've imported video.js CSS and js file using the CDN URL in the <head> tag.
Later, inside the <body> tag we've create a <video> element with class=”video.js vjs-default-skin vjs-big-play-centered” and 'id' as 'my-video'. We've used this id in the <script> tag below to reference the player. We've also added some standard HTML video options like controls, muted, autoplay, width, height, etc.
Inside the 'data-setup' attribute of the <video> tag, we've passed the playback rates array which is responsible for adding a video speed controller in our video.

On execution of the above code, a video player is going to be created in our web browser with a button in the control bar with options like 2x, 1.5x, 1x, 0.5, and 0.25x. Selecting the value greater than 1 (1.5x or 2x) will increase the speed of our video while tapping on values between 0 and 1 (0.5x and 0.25x) is going to reduce our video speed.

Now, let's learn how we can achieve the same using the video options method inside JavaScript in the subsequent section of the tutorial.

Using playback rates inside video options in JavaScript

For achieving the same video playback speed controller in our video player using JavaScript, we need to create a JS object containing the playbackRates array and then pass it to the video.js player reference.

Consider the following code snippet for adding a speed controller to our video player dynamically using JavaScript.

<script>
   // Adding playbackRates to options
   let videoOptions = {
      "playbackRates": [0.25, 0.5, 1, 1.5, 2]
   }
   // Initializing the video player with video options
   var player = videojs('my-video', videoOptions);
</script>

In the above snippet, we added playback rates array with 5 different speed values in our videoOptions object and passed it to the initialization of our video player which has an id as 'my-video'.

Example 2

Adding the code snippet to the above example will make the code look like this −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Speed Up/Down Video Tutorial</title>
   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js">
</head>
<body>
   <video id="my-video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      muted="true"
      autoplay="true"
      poster="assets/sample.png"
      preload="auto"
      width="560"
      height="340"
      data-setup='{}'
   >
      <source
         src="https://www.tutorialspoint.com/videos/sample720.mp4"
         type="video/mp4"
      >
   </video>
   <script>
      // Adding playbackRates to options
      let videoOptions = {
         "playbackRates": [0.25, 0.5, 1, 1.5, 2]
      }
      
      // Initializing the video player with video options
      var player = videojs('my-video', videoOptions);
   </script>
</body>
</html>

If you'll notice the above example carefully, we've removed playback rates from the 'data-setup' attribute in the <video> tag. Instead, we've added playback rates as video options dynamically in the <script> tag.

However, when you execute the above code in a web browser, the same video player will be created as the example above. It will have the same 5 values for the speed multiplier, i.e., 0.25x, 0.5, 1x, 1.5x, and 2x. Selecting any of the multipliers is going to speed up or slow down our video accordingly. Ideally, both methods are providing the same functionality but invoking the function is all the difference. 'datasetup' is done in the HTML part of the code while 'videoOptions' is done in the js part. So, using any of the above methods, you can speed up or speed down a video in the video.js player.

Conclusion

In this tutorial, we learned how to speed up or speed down you video using video.js. We used the playbackRates method, provided by video.js natively, to achieve the same. Later we saw two ways to use the playback rates method with the help of examples for each one.

Prince Yadav

Updated on: 04-Apr-2023

828 Views

Kickstart Your Career

Get certified by completing the course

Get Started