1 | # videojs-max-quality-selector
|
2 |
|
3 | ![NPM Publish](https://github.com/FoxCouncil/videojs-max-quality-selector/workflows/NPM%20Publish/badge.svg)
|
4 |
|
5 | A Videojs Plugin to help you list out resolutions and bit-rates from Live, Adaptive and Progressive streams.
|
6 |
|
7 | ![Screenshot1](https://i.imgur.com/ZB8R2JK.png) ![Screenshot2](https://i.imgur.com/MachweD.png)
|
8 |
|
9 | ## Table of Contents
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | - [Installation](#installation)
|
16 | - [Options](#options)
|
17 | - [autoLabel `:string`](#autolabel-string)
|
18 | - [defaultQuality `:number`](#defaultquality-number)
|
19 | - [disableAuto `:boolean`](#disableauto-boolean)
|
20 | - [displayMode `:number`](#displaymode-number)
|
21 | - [filterDuplicateHeights `:boolean`](#filterduplicateheights-boolean)
|
22 | - [filterDuplicates `:boolean`](#filterduplicates-boolean)
|
23 | - [index `:number`](#index-number)
|
24 | - [labels `:Array|Object`](#labels-arrayobject)
|
25 | - [maxHeight `:number`](#maxheight-number)
|
26 | - [minHeight `:number`](#minheight-number)
|
27 | - [showBitrates `:boolean`](#showbitrates-boolean)
|
28 | - [showSingleItemMenu `:boolean`](#showsingleitemmenu-boolean)
|
29 | - [sort `:number`](#sort-number)
|
30 | - [sortEnabled `:boolean`](#sortenabled-boolean)
|
31 | - [Usage](#usage)
|
32 | - [`<link>` & `<script>` Tag](#link--script-tag)
|
33 | - [Browserify/CommonJS](#browserifycommonjs)
|
34 | - [RequireJS/AMD](#requirejsamd)
|
35 | - [Content Delivery Network `CDN`](#content-delivery-network-cdn)
|
36 | - [Contributing](#contributing)
|
37 | - [Code of Conduct](#code-of-conduct)
|
38 | - [License](#license)
|
39 |
|
40 |
|
41 | ## Installation
|
42 |
|
43 | ```sh
|
44 | npm install --save videojs-max-quality-selector
|
45 | ```
|
46 |
|
47 | ## Options
|
48 |
|
49 | ### autoLabel `:string`
|
50 |
|
51 | > Default: `'Auto'`
|
52 |
|
53 | This option lets you rename the string value that represents the auto bitrate selection system.
|
54 |
|
55 | ```js
|
56 | var player = videojs('my-video');
|
57 | player.maxQualitySelector({
|
58 | 'autoLabel': 'ABR' // Change the label from 'Auto' (default) to 'ABR'.
|
59 | });
|
60 | ```
|
61 |
|
62 | ### defaultQuality `:number`
|
63 |
|
64 | This option lets you control which level of quality is selected first.
|
65 |
|
66 | `0` = Default Behaviour (The default from playlist), `1` = Lowest (Start the video with the lowest quality stream selected), `2` = Highest (Start the video with the highest quality stream selected)
|
67 |
|
68 | > Default: `0`
|
69 |
|
70 | ```js
|
71 | var player = videojs('my-video');
|
72 | player.maxQualitySelector({
|
73 | 'defaultQuality': 2 // Make the video start playing at the highest quality possible
|
74 | });
|
75 | ```
|
76 |
|
77 | ### disableAuto `:boolean`
|
78 |
|
79 | This option disables the auto bitrate selection system and focuses on a single quality level.
|
80 |
|
81 | > Default: `false`
|
82 |
|
83 | ```js
|
84 | var player = videojs('my-video');
|
85 | player.maxQualitySelector({
|
86 | 'disableAuto': true // Turn off the auto bitrate selection system
|
87 | });
|
88 | ```
|
89 |
|
90 | ### displayMode `:number`
|
91 |
|
92 | This option lets you control how the default quality level is displayed to the screen.
|
93 |
|
94 | `Note`: This option is ignored if you override the quality level with a label in DefaultOptions.labels
|
95 |
|
96 | `0` = Both (Includes both the resolution, in height, and the quality marketing name), `1` = Resolution (Include just the resolution, in height), `2` = Name (Include just the quality marketing name)
|
97 |
|
98 | > Default: `0`
|
99 |
|
100 | ```js
|
101 | var player = videojs('my-video');
|
102 | player.maxQualitySelector({
|
103 | 'displayMode': 1 // Only render out the height name of the video in the quality button and list
|
104 | });
|
105 | ```
|
106 |
|
107 | ### filterDuplicateHeights `:boolean`
|
108 |
|
109 | This option enabled the filtering of duplicate quality levels when their height all match.
|
110 |
|
111 | `Tip`: This is useful if you want to avoid showing different bitrates to users.
|
112 |
|
113 | > Default: `true`
|
114 |
|
115 | ```js
|
116 | var player = videojs('my-video');
|
117 | player.maxQualitySelector({
|
118 | 'filterDuplicateHeights': false // Turn off filtering of duplicate quality levels with different bitrates
|
119 | });
|
120 | ```
|
121 |
|
122 | ### filterDuplicates `:boolean`
|
123 |
|
124 | This option enabled the filtering of duplicate quality levels when their width, height, bitrate all match.
|
125 |
|
126 | `Tip`: This is useful if you want to avoid showing different endpoints to users.
|
127 |
|
128 | > Default: `true`
|
129 |
|
130 | ```js
|
131 | var player = videojs('my-video');
|
132 | player.maxQualitySelector({
|
133 | 'filterDuplicates': false // Turn off filtering of duplicate quality levels
|
134 | });
|
135 | ```
|
136 |
|
137 | ### index `:number`
|
138 |
|
139 | This option helps you position the button in the VideoJS control bar.
|
140 |
|
141 | > Default: `-1`
|
142 |
|
143 | ```js
|
144 | var player = videojs('my-video');
|
145 | player.maxQualitySelector({
|
146 | 'index': -2 // Put the button before the closed-captioning button.
|
147 | });
|
148 | ```
|
149 |
|
150 | ### labels `:Array|Object`
|
151 |
|
152 | This options lets you override the name of the listed quality levels.
|
153 |
|
154 | `Tip`: Use `maxQualitySelector.getLevelNames();` output to find the ID to overwrite.
|
155 |
|
156 | > Default: `[]`
|
157 |
|
158 | ```js
|
159 | var player = videojs('my-video');
|
160 |
|
161 | // Quick and useful if only a few contiguous quality levels
|
162 | var labelsArray = [ 'High', 'Low' ];
|
163 |
|
164 | // Useful if you need to specify labels in a sparce list
|
165 | var labelsObject = { 0: 'High', 8: 'Medium', 16: 'Low', 24: 'Super Low' };
|
166 |
|
167 | player.maxQualitySelector({
|
168 | 'labels': labelsArray | labelsObject
|
169 | });
|
170 | ```
|
171 |
|
172 | ### maxHeight `:number`
|
173 |
|
174 | This options lets you specify the maximum height resolution to show in the menu.
|
175 |
|
176 | > Default: `0`
|
177 |
|
178 | ```js
|
179 | var player = videojs('my-video');
|
180 | player.maxQualitySelector({
|
181 | 'maxHeight': 1080 // Do not list any resolutions larger than 1080p.
|
182 | });
|
183 | ```
|
184 |
|
185 | ### minHeight `:number`
|
186 |
|
187 | This options lets you specify the minimum height resolution to show in the menu.
|
188 |
|
189 | > Default: `0`
|
190 |
|
191 | ```js
|
192 | var player = videojs('my-video');
|
193 | player.maxQualitySelector({
|
194 | 'minHeight': 480 // Do not list any resolutions smaller than 480p.
|
195 | });
|
196 | ```
|
197 |
|
198 | ### showBitrates `:boolean`
|
199 |
|
200 | This option enables showing the bitrate in the button and menu.
|
201 |
|
202 | > Default: `false`
|
203 |
|
204 | ```js
|
205 | var player = videojs('my-video');
|
206 | player.maxQualitySelector({
|
207 | 'showBitrates': true // Turn on showing bitrates in the button and menu.
|
208 | });
|
209 | ```
|
210 |
|
211 | ### showSingleItemMenu `:boolean`
|
212 |
|
213 | This option enabled to show the menu even if there is only one quality level.
|
214 |
|
215 | > Default: `false`
|
216 |
|
217 | ```js
|
218 | var player = videojs('my-video');
|
219 | player.maxQualitySelector({
|
220 | 'showSingleItemMenu': true // Turn off hidding menu if there is only one quality level.
|
221 | });
|
222 | ```
|
223 |
|
224 | ### sort `:number`
|
225 |
|
226 | This option enables sorting direction the quality levels in the menu.
|
227 |
|
228 | `0` = Descending (Qualities are listed from highest to lowest top down by height), `1` = Ascending (Qualities are listed from lowest to highest top down by height)
|
229 |
|
230 | > Default: `0`
|
231 |
|
232 | ```js
|
233 | var player = videojs('my-video');
|
234 | player.maxQualitySelector({
|
235 | 'sort': 1 // List the qualities from lowest to highest top down.
|
236 | });
|
237 | ```
|
238 |
|
239 | ### sortEnabled `:boolean`
|
240 |
|
241 | This option enables sorting the quality levels in the menu.
|
242 |
|
243 | > Default: `true`
|
244 |
|
245 | ```js
|
246 | var player = videojs('my-video');
|
247 | player.maxQualitySelector({
|
248 | 'sortEnabled': false // List the quality levels as they have been specified.
|
249 | });
|
250 | ```
|
251 |
|
252 | ## Usage
|
253 |
|
254 | > ⚠ Warning: ⚠
|
255 | We require the https://github.com/videojs/videojs-contrib-quality-levels plugin to be included before ours.
|
256 |
|
257 | To include videojs-max-quality-selector on your website or web application, use any of the following methods.
|
258 |
|
259 | ### `<link>` & `<script>` Tag
|
260 |
|
261 | This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.
|
262 |
|
263 | ```html
|
264 | <link src="//path/to/videojs-max-quality-selector.css" rel="stylesheet">
|
265 | ```
|
266 |
|
267 | ```html
|
268 | <script src="//path/to/video.min.js"></script>
|
269 | <script src="//path/to/videojs-contrib-quality-levels.min.js"></script>
|
270 | <script src="//path/to/videojs-max-quality-selector.min.js"></script>
|
271 | <script>
|
272 | var player = videojs('my-video');
|
273 |
|
274 | player.maxQualitySelector();
|
275 | </script>
|
276 | ```
|
277 |
|
278 | ### Browserify/CommonJS
|
279 |
|
280 | When using with Browserify, install videojs-max-quality-selector via npm and `require` the plugin as you would any other module.
|
281 |
|
282 | ```js
|
283 | var videojs = require('video.js');
|
284 |
|
285 | // The actual plugin function is exported by this module, but it is also
|
286 | // attached to the `Player.prototype`; so, there is no need to assign it
|
287 | // to a variable.
|
288 | require('videojs-contrib-quality-levels');
|
289 | require('videojs-max-quality-selector');
|
290 |
|
291 | var player = videojs('my-video');
|
292 |
|
293 | player.maxQualitySelector();
|
294 | ```
|
295 |
|
296 | ### RequireJS/AMD
|
297 |
|
298 | When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:
|
299 |
|
300 | ```js
|
301 | require(['video.js', 'videojs-contrib-quality-levels', 'videojs-max-quality-selector'], function(videojs) {
|
302 | var player = videojs('my-video');
|
303 |
|
304 | player.maxQualitySelector();
|
305 | });
|
306 | ```
|
307 |
|
308 | ## Content Delivery Network `CDN`
|
309 |
|
310 | >We're using [unpkg](https://unpkg.com/) to serve our files.
|
311 | >
|
312 | > File Explorer: https://unpkg.com/videojs-max-quality-selector/
|
313 | >
|
314 | > Latest:
|
315 | https://unpkg.com/videojs-max-quality-selector/dist/videojs-max-quality-selector.css
|
316 | https://unpkg.com/videojs-max-quality-selector/dist/videojs-max-quality-selector.min.js
|
317 |
|
318 | ## Contributing
|
319 |
|
320 | We welcome contributions from everyone! [Find out how to contribute...](CONTRIBUTING.md)
|
321 |
|
322 | ### Code of Conduct
|
323 |
|
324 | [Contributor Covenant Code of Conduct](CONDUCT.md)
|
325 |
|
326 | ## License
|
327 |
|
328 | MIT. Copyright (c) Fox (onefox@gmail.com)
|