Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akhil-neoito/videojs-resolution-switcher
Resolution switcher adds the ability to select the video quality in video.js player.
https://github.com/akhil-neoito/videojs-resolution-switcher
Last synced: 3 months ago
JSON representation
Resolution switcher adds the ability to select the video quality in video.js player.
- Host: GitHub
- URL: https://github.com/akhil-neoito/videojs-resolution-switcher
- Owner: akhil-neoito
- License: other
- Fork: true (kmoskwiak/videojs-resolution-switcher)
- Created: 2021-10-17T08:51:51.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2020-02-25T02:42:58.000Z (almost 5 years ago)
- Last Synced: 2023-07-18T11:58:56.756Z (over 1 year ago)
- Homepage: https://kmoskwiak.github.io/videojs-resolution-switcher/
- Size: 3.31 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-Apache-2.0
Awesome Lists containing this project
README
# Video.js Resolution Switcher [](https://travis-ci.org/kmoskwiak/videojs-resolution-switcher)
Resolution switcher for [video.js v5](https://github.com/videojs/video.js)
## Example
[Working examples](examples) of the plugin you can check out if you're having trouble. Or check out this [demo](https://kmoskwiak.github.io/videojs-resolution-switcher/).
## Getting Started
Install plugin with
**npm**
```
npm i videojs-resolution-switcher
```
or **bower**
```
bower install videojs-resolution-switcher
```
### Setup sources dynamically:
```html
videojs('video', {
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}, function(){
// Add dynamically sources via updateSrc method
player.updateSrc([
{
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm',
label: '360'
},
{
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
type: 'video/mp4',
label: '720'
}
])
player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src())
})
})
```
### Or use `` tags:
```html
videojs('video').videoJsResolutionSwitcher()
```
### YouTube tech
YouTube tech form https://github.com/eXon/videojs-youtube
```html
videojs('video', {
controls: true,
techOrder: ["youtube"],
sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
plugins: {
videoJsResolutionSwitcher: {
default: 'low',
dynamicLabel: true
}
}
}, function(){
var player = this;
player.on('resolutionchange', function(){
console.info('Source changed')
})
});
```
### Flash tech
When using flash tech `preload="auto"` is required.
## Source options
Sources can passed to player using `updateSrc` method or `` tag as shown above. Avalible options for each source are:
* label - `String` (required) is shown in menu (ex. 'SD' or '360p')
* res - `Number` is resolution of video used for sorting (ex. 360 or 1080)
## Plugin options
You can pass options to plugin like this:
```javascript
videojs('video', {
controls: true,
muted: true,
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
default: 'low'
}
}
}, function(){
// this is player
})
```
### Avalible options:
* default - `{Number}|'low'|'high'` - default resolution. If any `Number` is passed plugin will try to choose source based on `res` parameter. If `low` or `high` is passed, plugin will choose respectively worse or best resolution (if `res` parameter is specified). If `res` parameter is not specified plugin assumes that sources array is sorted from best to worse.
* dynamicLabel - `{Boolean}` - if `true` current label will be displayed in control bar. By default gear icon is displayed.
* customSourcePicker - `{Function}` - custom function for selecting source.
* ui - `{Boolean}` - If set to `false` button will not be displayed in control bar. Default is `true`.
## Methods
### updateSrc([source])
Returns video.js player object if used as setter. If `source` is not passed it acts like [player.src()](http://docs.videojs.com/docs/api/player.html#Methodssrc)
```javascript
// Update video sources
player.updateSrc([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' },
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'HD' },
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: '4k' }
])
```
#### PARAMETERS:
| name | type | required | description |
|:----:|:----:|:--------:|:-----------:|
| source| array| no | array of sources |
### currentResolution([label], [customSourcePicker])
If used as getter returns current resolution object:
```javascript
{
label: 'SD', // current label
sources: [
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm", label: 'SD' },
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' }
] // array of sources with current label
}
```
If used as setter returns video.js player object.
```javascript
// Get current resolution
player.currentResolution(); // returns object {label '', sources: []}
// Set resolution
player.currentResolution('SD'); // returns videojs player object
```
#### PARAMETERS:
| name | type | required | description |
|:----:|:----:|:--------:|:-----------:|
| label| string| no | label name |
| customSourcePicker | function | no | cutom function to choose source |
#### customSourcePicker
If there is more than one source with the same label, player will choose source automatically. This behavior can be changed if `customSourcePicker` is passed.
`customSourcePicker` must return `player` object.
```javascript
player.currentResolution('SD', function(_player, _sources, _label){
return _player.src(_sources[0]); \\ Always select first source in array
});
```
`customSourcePicker` accepst 3 arguments.
| name | type | required | description |
|:----:|:----:|:--------:|:-----------:|
| player| Object | yes | videojs player object |
| sources | Array | no | array of sources |
| label | String | no | name of label |
`customSourcePicker` may be passed in options when player is initialized:
```javascript
var myCustomSrcPicker = function(_p, _s, _l){
// select any source you want
return _p.src(selectedSource);
}
videojs('video', {
controls: true,
muted: true,
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
default: 'low',
customSourcePicker: myCustomSrcPicker
}
}
}, function(){
// this is player
})
```
### getGroupedSrc()
Returns sources grouped by label, resolution and type.
## Events
### resolutionchange `EVENT`
> Fired when resolution is changed