diff --git a/README.md b/README.md index 319a57d..a56c617 100644 --- a/README.md +++ b/README.md @@ -14,11 +14,121 @@ bar which will allow the user to choose from available video qualities or resolu ## How do I use it? -Here's an example of how you can use this library: +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 ` + ``` +##### From [`unpkg`](https://unpkg.com/silvermine-videojs-quality-selector/): + +```js + + +``` + +#### Using `require` + +When using NPM/Browserify, first install the plugin. + +``` +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); +``` + +### 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: + +``` +player.controlBar.addChild('QualitySelector'); +``` + +The second option is to add the control via the player's options, for instance: + +``` +var options, player; + +options = { + controlBar: { + children: [ + 'playToggle', + 'progressControl', + 'volumePanel', + 'qualitySelector', + 'fullscreenToggle', + ], + }, +}; + +player = videojs('video_1', options); +``` ## How do I contribute?