Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michioxd/videojs-quality-selector-prebuilt
https://github.com/michioxd/videojs-quality-selector-prebuilt
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/michioxd/videojs-quality-selector-prebuilt
- Owner: michioxd
- License: mit
- Created: 2023-10-30T13:53:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-01T10:17:46.000Z (about 1 year ago)
- Last Synced: 2024-04-16T04:51:37.730Z (7 months ago)
- Size: 268 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Silvermine VideoJS Quality/Resolution Selector
[](https://travis-ci.org/silvermine/videojs-quality-selector)
[](https://coveralls.io/github/silvermine/videojs-quality-selector?branch=master)
[](https://david-dm.org/silvermine/videojs-quality-selector)
[](https://david-dm.org/silvermine/videojs-quality-selector?type=dev)
## What is it?
A plugin for [videojs](http://videojs.com/) 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](#includingrequiring),
[(2) providing sources](#providing-video-sources), and [(3) adding the component the to
`controlBar`](#adding-to-the-player). Please see the following for information on each
step.
### Including/Requiring
#### Using `` 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](http://videojs.com/) (note that this plugin will look
for `videojs` at `window.videojs`).
There is an example of this in
[`docs/demo/index.html`](./docs/demo/index.html).
##### From local file
```js
<script src="./path/to/video.min.js">
```
##### From [`unpkg`](https://unpkg.com/@silvermine/videojs-quality-selector/)
```js
```
#### Using `require`
When using NPM/Browserify, first install the plugin.
```bash
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:
```js
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:
```js
require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css')
```
### Providing video sources
Sources can be provided with either the `` tag or via the `src` function on the
instance of a `video.js` player.
#### Using ``
```html
```
#### Using `player.src()`
```js
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:
```js
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:
```js
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](https://github.com/silvermine/silvermine-info#contributing) on how to
contribute.
## License
This software is released under the MIT license. See [the license file](LICENSE) for more
details.