Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to setup different video quality in Video.js player?
In this tutorial, we're going to understand how to set up different video quality in video.js player. Setting up a different video quality means our video player, created using video.js, is going to have multiple resolutions of the same video and the end user can switch the resolution basis as per their liking or their bandwidth.
However, video.js doesn't support this feature natively out of the box, which means we'll have to use a plugin (as video.js has a wide range of plugins and support) to set multiple video resolutions for our video player.
The video.js plugin that we're going to use is a free-to-use and very popular plugin, which lets you add the ability to select the video quality in the video.js player. The name of the plugin is "Video.js Resolution Switcher".
Now let's learn how to use this plugin for adding video resolution support to our video player.
Video.js Resolution Switcher
As the name suggests, Video.js Resolution Switcher provides us the functions to switch between various video resolutions.
Video.js Resolution Switcher can be installed using both, npm and bower. Use the below command to install the plugin using the node package manager −
npm i videojs-resolution-switcher —save-dev
If you are using the bower package manager, then Video.js Resolution Switcher can be installed using the following command −
Note − Make sure that these commands are executed in the project directory.
Since we've installed the "bower install videojs resolution switcher" plugin, we need to include it in our project.
Consider the following code snippet to incorporate the downloaded plugin in our local project −
<script src="videojs-resolution-switcher.js"></script>
Here, we've added the path to videojs-resolution-switcher.js in the 'src' attribute of the <script> tag. This is going to ensure that the plugin has been included in our project.
Now since we've added the plugin to our project, we can start using it to add multiple resolutions to our video player. There are two ways to set up different video quality for our video player using this plugin.
The first and a little easier method is going to make use of multiple <source> tags while the second method is going to set up the video resolutions dynamically. We're going to have a look at each one of those with the help of an example.
Method 1 − Using <source> tags
In this method, we're going to include multiple <source> tags in our <video> element with different video files and a different label for each one of the sources.
Example
Consider the example given below for the same −
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video class="video-js vjs-default-skin" id="my-video" width="560" data-setup='{}' controls="true" autoplay="true" muted preload="auto" > <source src="https://www.tutorialspoint.com/videos/sample480.mp4" type='video/mp4' label='SD' res='480' id="my-video1"/> <source src="https://www.tutorialspoint.com/videos/sample640.mp4" type='video/mp4' label='640p' res='640' id="my-video2"/> <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type='video/mp4' label='720p' res='720' id="my-video3"/> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type='video/mp4' label='HD' res='1080' id="my-video4"/> </video> <script src="videojs-resolution-switcher.js"></script> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> </script> <script> videojs('video').videoJsResolutionSwitcher(); </script> </body> </html>
In the above piece of code, we've done the following −
Added "videojs-resolution-switcher" in the <script> tag for including it in our project.
We've also initialized the video.js player with the videoJsResolutionSwitcher() method.
Further, we've used four different <source> tags in our <video> element. Each of these <source> elements correspond to a different video in a distinct resolution. The first video in the <source> tag has slow definition (SD) quality while the second one has 640p quality. Similarly, the third video is for 720p and the final one is 1080p high resolution.
After adding all the desired video resolutions in the <source> tag, we've also added a label to each one of those. This is the label, that an end user will see and click on to change the resolution of the video.
This was a fairly simple method to include multiple videos in our video player for setting up various resolutions. Now, let's see how we can achieve the same dynamically.
Method 2 − Setup <sources> Dynamically
In this section of the tutorial, we're going to see how we can set up different video quality in our video.js player using the Video.js Resolution Switcher plugin, dynamically.
Here, we're going to just change the video sources inside the <script> tag using various methods provided by Video.js Resolution Switcher plugin.
Example
Consider the below code for changing video quality using the 'updateSrc' method.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video class="video-js vjs-default-skin" id="my-video" width="560" data-setup='{}' controls="true" autoplay="true" muted preload="auto" > </video> <script src="videojs-resolution-switcher.js"></script> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> </script> <script> videojs('my-video', { controls: true, plugins: { videoJsResolutionSwitcher: { default: 'high', dynamicLabel: true } } }, function () { // Add dynamically sources via updateSrc method player.updateSrc([ { src: 'https://www.tutorialspoint.com/videos/sample480.mp4', type: 'video/mp4', label: '480' }, { src: 'https://www.tutorialspoint.com/videos/sample640.mp4', type: 'video/mp4', label: '640' }, { src: 'https://www.tutorialspoint.com/videos/sample720.mp4', type: 'video/mp4', label: '720' }, { src: 'https://www.tutorialspoint.com/videos/sample1080p.mp4', type: 'video/mp4', label: '1080' } ]) }) </script> </body> </html>
In the code shown above, we've removed all the <source> tags from the <video> element. Then, a video.js player is initialized in the <script> tag with plugins as videoJsResolutionSwitcher.
The plugin videoJsResolutionSwitcher has a "default" attribute which sets the default resolution as high for our video player. Another attribute "dynamicLabel: true" has been used to dynamically load the videos.
Later in the code, "updateSrc" method has been used on the player to add 4 videos sources dynamically each with their own video path, label, and type. 'updateSrc' is a method provided by the videoJsResolutionSwitcher plugin and it is doing to load all the video sources, which will in turn show multiple video resolutions on our video player.
So, those were the two methods to use the video.js resolution switcher plugin for setting up multiple video qualities in our video player created using video.js.
Conclusion
In this tutorial, we understood how we can have a different resolution in our video player using video.js. We used a plugin called "videoJsResolutionSwitcher" to set up multiple video files of various qualities in our video player. Later, we had a look at the 2 methods to use the plugin with the help of proper examples.
4K+ Views
