No description
Find a file
Ethan Smith 8b1a082061
Merge pull request #76 from pbredenberg/pb/chore-standardization-upgrades
chore: upgrade standardization and configure markdownlint
2021-09-10 10:56:51 -04:00
docs/demo refactor: Update VideoJS version to the latest one in the demo file 2019-06-05 15:17:32 -04:00
src chore: use standardization library 2021-05-13 15:01:48 -04:00
tests Upgrade eslint config to use new @silvermine org 2018-12-21 15:03:51 -05:00
.editorconfig chore: use standardization library 2021-05-13 15:01:48 -04:00
.eslintrc.json Upgrade eslint config to use new @silvermine org 2018-12-21 15:03:51 -05:00
.gitignore chore: replace istanbul with nyc 2021-05-13 15:01:48 -04:00
.markdownlint.json chore: upgrade standardization and configure markdownlint 2021-09-10 10:49:11 -04:00
.npmignore chore: replace istanbul with nyc 2021-05-13 15:01:48 -04:00
.nvmrc chore: update node to 12.22.1 and drop support for node 8 2021-05-13 15:01:01 -04:00
.nycrc.json chore: replace istanbul with nyc 2021-05-13 15:01:48 -04:00
.travis.yml chore: update node to 12.22.1 and drop support for node 8 2021-05-13 15:01:01 -04:00
CHANGELOG.md docs: update CHANGELOG with recent and next release info 2019-11-21 10:40:07 -05:00
commitlint.config.js chore: use standardization library 2021-05-13 15:01:48 -04:00
Gruntfile.js chore: upgrade standardization and configure markdownlint 2021-09-10 10:49:11 -04:00
LICENSE Initial commit 2017-06-20 20:43:49 -04:00
package-lock.json chore: upgrade standardization and configure markdownlint 2021-09-10 10:49:11 -04:00
package.json chore: upgrade standardization and configure markdownlint 2021-09-10 10:49:11 -04:00
README.md chore: upgrade standardization and configure markdownlint 2021-09-10 10:49:11 -04:00

Silvermine VideoJS Quality/Resolution Selector

Build Status Coverage Status Dependency Status Dev Dependency Status

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

Remember to also add the CSS to your build. With most bundlers you can:

require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css')

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.