![pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers](https://cdn.sanity.io/images/cgdhsj6q/production/c06a5b74512bcc6da29d38cef96a454fa947810d-1024x1024.webp?w=400&fit=max&auto=format)
Security News
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
videojs-plugin-quality-selector
Advanced tools
Readme
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
Unknown package
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.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.