Nineties Party Mix

    videojs-plugin-quality-selector

    1.0.3 • Public • Published

    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/videojs-plugin-quality-selector.min.js"></script>

    Using require

    When using NPM/Browserify, first install the plugin.

    npm install --save videojs-plugin-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('videojs-plugin-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);
    

    License

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

    Install

    npm i videojs-plugin-quality-selector

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    140 kB

    Total Files

    16

    Last publish

    Collaborators

    • ptviet