Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
videojs-plugin-quality-selector
Advanced tools
video.js plugin for selecting a video quality or resolution
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.
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.
<script>
tagThe 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
.
<script src="./path/to/video.min.js"></script>
<script src="./path/to/videojs-plugin-quality-selector.min.js"></script>
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);
Sources can be provided with either the <source>
tag or via the src
function on the
instance of a video.js
player.
<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>
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'
}
]);
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);
This software is released under the MIT license. See the license file for more details.
FAQs
video.js plugin for selecting a video quality or resolution
The npm package videojs-plugin-quality-selector receives a total of 0 weekly downloads. As such, videojs-plugin-quality-selector popularity was classified as not popular.
We found that videojs-plugin-quality-selector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.