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.

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:

<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-selector

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

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" data-setup='{}'>
   <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:

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.

Silvermine VideoJS Quality/Resolution Selector Change Log

In general, this project adheres to Semantic Versioning. If for some reason we do something that's not strictly semantic, it will be clearly called out below.

1.1.2

• Fixed a bug where selecting a quality menu item while a video was playing did not resume playback after the source changed. Affected Safari and players whose preload attribute was none (8feeafb Fixes #16).

1.1.1

• Reference underscore as a dependency since we depend on it (931d8a4 See #12)

1.1.0

NOTE: Strictly speaking, this version breaks API backwards-compatibility, and thus should have been a 2.0.0 release. However, the break in API was just the changing of an event name, and the event was not a documented event intended for external users to use (although they could have easily done so). Also, even if someone was using the event, depending on the specific reason they were using it, they may not need to make a change at all.

If you were relying on the QUALITY_SELECTED event, it's possible that you will now need to rely on the QUALITY_REQUESTED event instead, depending on why you were listening to the event. See a682125 for details.

• Support quality selector buttons anywhere in the player's component hierarchy (a682125 Fixes #13)

1.0.3

• Stopped modifying format of passed-in source list (See 7da6fd3)

1.0.2

• Added localization (cc7f670 fixes #7)

1.0.1

• Fixed bug with binding to QUALITY_SELECTED way too many times (9dd9ca1 Fixes #5)

1.0.0

• Added documentation and released the initial release of the plugin.

0.9.0

• Working version of the plugin, as yet undocumented.