video.js plugin for selecting a video quality or resolution
npm install @silvermine/videojs-quality-selector



A plugin for videojs versions 6+ that adds a button to the control
bar which will allow the user to choose from available video qualities or resolutions.
There are three primary steps to use this plug-in: (1) including,
(2) providing sources, and (3) adding the component the tocontrolBar. Please see the following for information on each
step.
#### Using tag
The minified JS file can come from a downloaded copy or a CDN. When including
it, make sure that the tag for the plugin appears _after_ the
include for video.js (note that this plugin will look
for videojs at window.videojs).
There is an example of this indocs/demo/index.html.
##### From local file
``js`
##### From unpkg
`js`
#### Using require
When using NPM/Browserify, first install the plugin.
`bash`
npm install --save @silvermine/videojs-quality-selector
For videojs to use the plug-in, the plugin needs to register itself with the instance ofvideojs. This can be accomplished by:
`js
var videojs = require('videojs');
// The following registers the plugin with videojs`
require('@silvermine/videojs-quality-selector')(videojs);
Remember to also add the CSS to your build. With most bundlers you can:
`js`
require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css')
> [!WARNING]
> This plugin's source code uses ES6+ syntax and keywords, such as class and static.require('@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.js')
> If you need to support browsers that do not support newer JavaScript
> syntax, you will need to use a tool like
> Babel to transpile and polyfill your code.
>
> Alternatively, you can
>
> to use a JavaScript file that has already been polyfilled/transpiled down to ES5
> compatibility.
Sources can be provided with either the tag or via the src function on thevideo.js
instance of a player.
#### Using
`html`
#### Using player.src()
`js`
player.src([
{
src: 'https://example.com/video_720.mp4',
type: 'video/mp4',
label: '720P',
},
{
src: 'https://example.com/video_480.mp4',
type: 'video/mp4',
label: '480P',
selected: true,
},
{
src: 'https://example.com/video_360.mp4',
type: 'video/mp4',
label: '360P',
},
]);
There are at least two ways to add the quality selector control to the player's control
bar. The first is directly adding it via addChild. For example:
`js
videojs('video_1', {}, function() {
var player = this;
player.controlBar.addChild('QualitySelector');
});
`
The second option is to add the control via the player's options, for instance:
`js
var options, player;
options = {
controlBar: {
children: [
'playToggle',
'progressControl',
'volumePanel',
'qualitySelector',
'fullscreenToggle',
],
},
};
player = videojs('video_1', options);
``
We genuinely appreciate external contributions. See our extensive
documentation on how to
contribute.
This software is released under the MIT license. See the license file for more
details.