videojs-resolution-switcher-vjs7
v1.0.0
Published
VideoJS Resolution Switcher for VideoJS Version 7+ Modified by Bari Artz from Poko for you using VideoJS Version 7+. For you using videojs resolution switcher from original script by kmoskwiak on Github but do not appear in VideoJS version 7+, you can usi
Downloads
304
Maintainers
Readme
Video.js Resolution Switcher for VideoJS Version 7+
Modified by Bari Artz from Poko
Resolution switcher for video.js v7+
Example
Check out this demo.
Getting Started
Get plugin from this Github.
Setup sources dynamically:
<video id='video' class="video-js vjs-default-skin"></video>
<script src="video.js"></script>
<script src="videojs-resolution-switcher.js"></script>
<script>
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())
})
})
</script>
Or use <source>
tags:
<video id="video" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
<source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' />
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/>
</video>
<script>
videojs('video').videoJsResolutionSwitcher()
</script>
YouTube tech
YouTube tech form https://github.com/eXon/videojs-youtube
<video id='video' class="video-js vjs-default-skin"></video>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
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')
})
});
</script>
Flash tech
When using flash tech preload="auto"
is required.
Source options
Sources can passed to player using updateSrc
method or <source>
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:
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 anyNumber
is passed plugin will try to choose source based onres
parameter. Iflow
orhigh
is passed, plugin will choose respectively worse or best resolution (ifres
parameter is specified). Ifres
parameter is not specified plugin assumes that sources array is sorted from best to worse. - dynamicLabel -
{Boolean}
- iftrue
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 tofalse
button will not be displayed in control bar. Default istrue
.
Methods
updateSrc([source])
Returns video.js player object if used as setter. If source
is not passed it acts like player.src()
// 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:
{
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.
// 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.
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:
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