npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@navidmafi/videojs-quality-selector

v1.2.5-2

Published

video.js plugin for selecting a video quality or resolution

Downloads

3

Readme

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">
   <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.