videojs-contrib-quality-levels
Advanced tools
Exposes a list of quality levels available for the source.
The videojs-contrib-quality-levels package is a plugin for Video.js that provides an API for managing and interacting with the quality levels of a video. This is particularly useful for adaptive bitrate streaming, where multiple quality levels are available, and you want to control or monitor which quality level is being used.
Get Available Quality Levels
This feature allows you to get all available quality levels for the video. The 'addqualitylevel' event is triggered whenever a new quality level is added, and you can access the quality level object from the event.
const player = videojs('my-video');
player.qualityLevels().on('addqualitylevel', function(event) {
const qualityLevel = event.qualityLevel;
console.log('Quality level added:', qualityLevel);
});Select a Quality Level
This feature allows you to select a specific quality level based on certain criteria, such as resolution. In this example, the code selects the 720p quality level and disables all others.
const player = videojs('my-video');
const qualityLevels = player.qualityLevels();
qualityLevels.on('addqualitylevel', function(event) {
const qualityLevel = event.qualityLevel;
if (qualityLevel.height === 720) { // Select 720p quality level
qualityLevel.enabled = true;
} else {
qualityLevel.enabled = false;
}
});Monitor Quality Level Changes
This feature allows you to monitor changes in the active quality level. The 'change' event is triggered whenever the active quality level changes, and you can access the new active quality level from the qualityLevels array.
const player = videojs('my-video');
const qualityLevels = player.qualityLevels();
qualityLevels.on('change', function() {
const activeQualityLevel = qualityLevels[qualityLevels.selectedIndex];
console.log('Active quality level changed to:', activeQualityLevel);
});The videojs-http-source-selector plugin provides a UI component for selecting different quality levels in a Video.js player. It adds a button to the control bar that allows users to manually select the desired quality level. Unlike videojs-contrib-quality-levels, which focuses on providing an API for managing quality levels, videojs-http-source-selector provides a user interface for manual selection.
The videojs-hls-quality-selector plugin is another Video.js plugin that adds a quality selector menu to the player. It is specifically designed for HLS (HTTP Live Streaming) and allows users to manually select the desired quality level from a dropdown menu. This plugin is similar to videojs-http-source-selector but is tailored for HLS streams.
The videojs-resolution-switcher plugin allows users to switch between different video resolutions manually. It adds a button to the Video.js control bar that lets users choose from available resolutions. This plugin is similar to videojs-contrib-quality-levels in that it deals with multiple quality levels, but it focuses more on providing a user interface for manual resolution switching.
A plugin that provides a framework of working with source quality levels.
Maintenance Status: Stable
npm install --save videojs-contrib-quality-levels
The npm installation is preferred, but Bower works, too.
bower install --save videojs-contrib-quality-levels
The list of QualityLevels can be accessed using qualityLevels() on the Player object.
With this list, you can:
Example
let player = videojs('my-video');
let qualityLevels = player.qualityLevels();
// disable quality levels with less than 720 horizontal lines of resolution when added
// to the list.
qualityLevels.on('addqualitylevel', function(event) {
let qualityLevel = event.qualityLevel;
if (qualityLevel.height >= 720) {
qualityLevel.enabled = true;
} else {
qualityLevel.enabled = false;
}
});
// example function that will toggle quality levels between SD and HD, defining and HD
// quality as having 720 horizontal lines of resolution or more
let toggleQuality = (function() {
let enable720 = true;
return function() {
for (var i = 0; i < qualityLevels.length; i++) {
let qualityLevel = qualityLevels[i];
if (qualityLevel.height >= 720) {
qualityLevel.enabled = enable720;
} else {
qualityLevel.enabled = !enable720;
}
}
enable720 = !enable720;
};
})();
let currentSelectedQualityLevelIndex = qualityLevels.selectedIndex; // -1 if no level selected
// Listen to change events for when the player selects a new quality level
qualityLevels.on('change', function() {
console.log('Quality Level changed!');
console.log('New level:', qualityLevels[qualityLevels.selectedIndex]);
});
This project provides the framework for working with source quality levels. Just including this project alongside videojs does not necessarily mean that there will be levels available in the list or that any events will be triggered. Some projects within the videojs org supports this project and automatically populates the list and triggers change events when the selected quality level changes. See the Supported Projects section for a list of these projects.
If you are not using one of the supported projects, but still want to use quality levels with your source, you will have to implement your own plugin that populates the list and triggers change events when selected level changes. Implementing such a plugin is very specific to the source in question, so it is difficult to provide specific examples, but will most likely require a custom middleware, source handler, or tech.
Initially the list of quality levels will be empty. You can add quality levels to the list by using QualityLevelList.addQualityLevel for each quality level specific to your source. QualityLevelList.addQualityLevel takes in a Representation object (or generic object with the required properties). All properties are required except width, height and frameRate.
Example Representation
Representation {
id: string,
width: number,
height: number,
bitrate: number,
frameRate: number,
enabled: function
}
The enabled function should take an optional boolean to enable or disable the representation and return whether it is currently enabled.
You can also remove quality levels from the list using QualityLevelList.removeQualityLevel. Call this function with the reference to the QualityLevel object you wish to remove. The QualityLevelList.selectedIndex property will automatically be updated when a quality level is removed so that it still refers to the correct level. If the currently selected level is removed, the selectedIndex will be set to -1.
When your playback plugin changes the selected quality for playback, you will also have to trigger the change event on the QualityLevelList and update the QualityLevelList.selectedIndex_, as it does not have knowledge of which quality is active in playback.
let player = videojs('my-video');
let qualityLevels = player.qualityLevels();
qualityLevels.selectedIndex_ = 0;
qualityLevels.trigger({ type: 'change', selectedIndex: 0 });
The following projects have built-in support for videojs-contrib-quality-levels and will automatically populate the list with available levels and trigger change events when the quality level changes.
To include videojs-contrib-quality-levels on your website or web application, use any of the following methods.
<script> TagThis is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-contrib-quality-levels.min.js"></script>
<script>
var player = videojs('my-video');
player.qualityLevels();
</script>
When using with Browserify, install videojs-contrib-quality-levels via npm and require the plugin as you would any other module.
var videojs = require('video.js');
// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-contrib-quality-levels');
var player = videojs('my-video');
player.qualityLevels();
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:
require(['video.js', 'videojs-contrib-quality-levels'], function(videojs) {
var player = videojs('my-video');
player.qualityLevels();
});
Apache-2.0. Copyright (c) Brightcove, Inc.
FAQs
Exposes a list of quality levels available for the source.
The npm package videojs-contrib-quality-levels receives a total of 189,820 weekly downloads. As such, videojs-contrib-quality-levels popularity was classified as popular.
We found that videojs-contrib-quality-levels demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 22 open source maintainers 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.