mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 09:49:21 +02:00
67 lines
1.5 KiB
Markdown
67 lines
1.5 KiB
Markdown
# Video.js Resolution Switcher
|
|
|
|
A revolutionary plugin for video.js
|
|
|
|
## Getting Started
|
|
|
|
Once you've added the plugin script to your page, you can use it with any video:
|
|
|
|
```html
|
|
<video id='video'></video>
|
|
<script src="video.js"></script>
|
|
<script src="videojs-resolution-switcher.js"></script>
|
|
<script>
|
|
videojs('video', {
|
|
controls: true
|
|
}, function(){
|
|
|
|
// Add dynamically sources via newVideoSources method
|
|
player.newVideoSources([
|
|
{
|
|
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())
|
|
})
|
|
|
|
}).videoJsResolutionSwitcher();
|
|
</script>
|
|
```
|
|
|
|
There's also a [working example](example.html) of the plugin you can check out if you're having trouble.
|
|
|
|
## Methods
|
|
|
|
|
|
### newVideoSources([source])
|
|
|
|
```javascript
|
|
|
|
// Update video sources
|
|
player.newVideoSources([
|
|
{ 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", lable: 'HD' },
|
|
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: '4k' }
|
|
])
|
|
|
|
```
|
|
#### PARAMETERS:
|
|
* source `Array` array of sources
|
|
|
|
|
|
## Events
|
|
|
|
### resolutionchange `EVENT`
|
|
|
|
> Fired when resolution is changed
|
|
|
|
|