silvermineSilvermine 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.
Including/Requiring
Using <script> tag
The minified JS file can come from a downloaded copy or a CDN. When including
it, make sure that the <script> 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 in
docs/demo/index.html.
From local file
<script src="./path/to/video.min.js"></script>
<script src="./path/to/silvermine-videojs-quality-selector.min.js"></script>From unpkg
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="./path/to/video.min.js"></script>
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>Using require
When using NPM/Browserify, first install the plugin.
npm install --save @silvermine/videojs-quality-selectorFor videojs to use the plug-in, the plugin needs to register itself with the instance of
videojs. This can be accomplished by:
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:
require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css')[!WARNING] This plugin's source code uses ES6+ syntax and keywords, such as
classandstatic. 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.
Providing video sources
Sources can be provided with either the <source> tag or via the src function on the
instance of a video.js player.
Using <source>
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="https://example.com/video_720.mp4" type="video/mp4" label="720P">
<source src="https://example.com/video_480.mp4" type="video/mp4" label="480P" selected="true">
<source src="https://example.com/video_360.mp4" type="video/mp4" label="360P">
</video>Using player.src()
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',
},
]);Adding to the player
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:
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:
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.