diff options
Diffstat (limited to 'extlib/videojs-resolution-switcher/README.md')
| -rw-r--r-- | extlib/videojs-resolution-switcher/README.md | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/extlib/videojs-resolution-switcher/README.md b/extlib/videojs-resolution-switcher/README.md new file mode 100644 index 00000000..5a1493fb --- /dev/null +++ b/extlib/videojs-resolution-switcher/README.md @@ -0,0 +1,240 @@ +# 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 +<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: + +```html + +<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 + +```html +<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: + +```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. + + +## 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 |