DOCSEARCHbyAlgolia
Submit Docs

videojs-quality-selector

repository·master·Indexed 41 days ago

https://github.com/silvermine/videojs-quality-selector

A plugin for Video.js (versions 6+) that adds a quality/resolution selector button to the control bar, allowing users to switch between different video qualities. Version 1.3.1 provides a MenuButton component that automatically updates based on available sources and triggers a QUALITY_REQUESTED event when a user selects a different resolution.

Tokens
2.2K
Snippets
6
Records
7
Agent score
47%

What's inside videojs-quality-selector

  1. Install and include the Silvermine VideoJS Quality Selector

    master

    You can include the plugin using either <script> tags for browser-based environments or require for NPM/bundler-based environments.

    Important: The plugin requires videojs to be available at window.videojs when using script tags. If using the source code directly, note that it uses ES6+ syntax; for ES5 compatibility, use the transpiled files in the dist folder.

    Using <script> tags

    When using script tags, ensure the plugin script appears after the video.js script.

    Using NPM/Browserify

    Install the package via npm, then register the plugin with your videojs instance. You must also include the CSS in your build.

    ### Using `<script>` tag (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` (NPM)
```bash
npm install --save @silvermine/videojs-quality-selector
    var videojs = require('videojs');

// Register the plugin with `videojs`
require('@silvermine/videojs-quality-selector')(videojs);

// Include the CSS
require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css');

  2. Provide video sources with quality labels

    master

    To enable the quality selector, you must provide multiple video sources. Each source must include a label attribute (or key) to identify the quality (e.g., '720P', '480P'). You can also use the selected: true property to set a default starting quality.

    Sources can be provided via standard HTML <source> tags or through the Video.js player.src() method.

    ### Using `<source>`
```html
<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',
   },
]);

  3. Add the Quality Selector to the Video.js control bar

    master

    Once the plugin is included and sources are provided, you must add the quality selector component to the player's controlBar. There are two ways to do this:

    1. Directly via addChild: Use this method inside the player initialization callback.
    2. Via Player Options: Define the qualitySelector in the controlBar.children array during player initialization.
    ### Option 1: Using `addChild`
```js
videojs('video_1', {}, function() {
   var player = this;

   player.controlBar.addChild('QualitySelector');
});

    Option 2: Using player options

    var options, player;

options = {
   controlBar: {
      children: [
         'playToggle',
         'progressControl',
         'volumePanel',
         'qualitySelector',
         'fullscreenToggle',
      ],
   },
};

player = videojs('video_1', options);

  4. Initialize the videojs-quality-selector plugin

    master

    To use the quality selector, pass the videojs object to the plugin's exported function. This initializes the QualitySelector component, the SourceInterceptor middleware, and hooks into the videojs setup lifecycle to handle quality changes via the QUALITY_REQUESTED event.

    If you are using a module bundler, you can require the plugin and pass the videojs instance. If you are in a browser environment without a bundler, the plugin will attempt to find window.videojs automatically.

    var videojs = require('video.js');
var qualitySelector = require('videojs-quality-selector');

// Initialize the plugin
qualitySelector(videojs);

  5. Use the QualitySelector component

    master

    The QualitySelector is registered as a Video.js component named QualitySelector. To use it, you must first initialize the plugin with your Video.js instance. Once initialized, you can add the component to your player's control bar.

    Note: The component requires the player to have multiple sources (e.g., via HLS or multiple <source> tags) to function. If fewer than two sources are present, the menu will remain empty.

    // Assuming the plugin is loaded and initialized
var player = videojs('my-video');

// Add the QualitySelector to the control bar
player.getChild('controlBar').addChild('QualitySelector');

  6. Access Quality Selector events

    master

    The plugin exports an EVENTS object containing the event names used for quality selection. The primary event is QUALITY_REQUESTED, which is triggered when a user selects a different resolution/source from the UI.

    You can access these event names via the EVENTS property on the exported module.

    var qualitySelector = require('videojs-quality-selector');
var events = qualitySelector.EVENTS;

// Example: Listening for the quality requested event on a player
player.on(events.QUALITY_REQUESTED, function(event, newSource) {
    console.log('Quality change requested to:', newSource.src);
});

  7. The QualitySelector component

    master

    The QualitySelector is a Video.js MenuButton component provided by the @silvermine/videojs-quality-selector plugin. It provides a UI menu that allows users to switch between different video resolutions/sources available on the player.

    Key Behaviors:

    • Automatic Menu Updates: The component listens for PLAYER_SOURCES_CHANGED events and automatically updates the list of available quality options.
    • Source Selection: It tracks the currently selected source and visually highlights the active option in the menu.
    • Visual Feedback: When a quality change is requested, the player is temporarily assigned the CSS class vjs-quality-changing. This class is removed once the player emits the loadeddata event, allowing developers to style the player (e.g., adding a loading spinner) during the transition.
    • Activation Requirement: The menu only populates and displays if the player has at least two sources available via player.currentSources().