Silvermine VideoJS Quality/Resolution Selector


What is it?

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.

How do I use it?

There are three primary steps to use this plug-in: (1) including,
(2) providing sources, and (3) adding the component the to
controlBar. Please see the following for information on each
step.

$3

#### Using

`

##### 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 of
videojs. 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.
> 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
> require('@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.js')
> to use a JavaScript file that has already been polyfilled/transpiled down to ES5
> compatibility.

$3

Sources can be provided with either the tag or via the src function on the
instance of a video.js 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',
},
]);
`

$3

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);
``

How do I contribute?

We genuinely appreciate external contributions. See our extensive
documentation on how to
contribute.

License

This software is released under the MIT license. See the license file for more
details.