updated the README with more up-to-date information (#719)
* updated the README with more up-to-date information fixing code fence formatting remove bandwidth line from constructor as it is done in setOptions_() added tools to the readme * readme: minor spelling/grammar/format fixes
Showing
2 changed files
with
91 additions
and
15 deletions
... | @@ -8,11 +8,21 @@ Play back HLS with video.js, even where it's not natively supported. | ... | @@ -8,11 +8,21 @@ Play back HLS with video.js, even where it's not natively supported. |
8 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | 8 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> |
9 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* | 9 | **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* |
10 | 10 | ||
11 | - [Installation](#installation) | ||
12 | - [NPM](#npm) | ||
13 | - [CDN](#cdn) | ||
14 | - [Local](#local) | ||
15 | - [Manual Build](#manual-build) | ||
16 | - [Contributing](#contributing) | ||
11 | - [Getting Started](#getting-started) | 17 | - [Getting Started](#getting-started) |
12 | - [Known Issues](#known-issues) | 18 | - [Known Issues](#known-issues) |
13 | - [IE11](#ie11) | 19 | - [IE11](#ie11) |
14 | - [Documentation](#documentation) | 20 | - [Documentation](#documentation) |
15 | - [Options](#options) | 21 | - [Options](#options) |
22 | - [How to use](#how-to-use) | ||
23 | - [Initialization](#initialization) | ||
24 | - [Source](#source) | ||
25 | - [List](#list) | ||
16 | - [withCredentials](#withcredentials) | 26 | - [withCredentials](#withcredentials) |
17 | - [Runtime Properties](#runtime-properties) | 27 | - [Runtime Properties](#runtime-properties) |
18 | - [hls.playlists.master](#hlsplaylistsmaster) | 28 | - [hls.playlists.master](#hlsplaylistsmaster) |
... | @@ -30,14 +40,33 @@ Play back HLS with video.js, even where it's not natively supported. | ... | @@ -30,14 +40,33 @@ Play back HLS with video.js, even where it's not natively supported. |
30 | - [Hosting Considerations](#hosting-considerations) | 40 | - [Hosting Considerations](#hosting-considerations) |
31 | - [Testing](#testing) | 41 | - [Testing](#testing) |
32 | - [Release History](#release-history) | 42 | - [Release History](#release-history) |
43 | - [Building](#building) | ||
44 | - [Development Commands](#development-commands) | ||
33 | 45 | ||
34 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> | 46 | <!-- END doctoc generated TOC please keep comment here to allow auto update --> |
35 | 47 | ||
48 | ## Installation | ||
49 | ### NPM | ||
50 | To install `videojs-contrib-hls` with npm run | ||
51 | |||
52 | ```bash | ||
53 | npm install --save videojs-contrib-hls | ||
54 | ``` | ||
55 | |||
56 | ### CDN | ||
57 | Select a version of HLS from the [CDN](https://cdnjs.com/libraries/videojs-contrib-hls) | ||
58 | |||
59 | ### Releases | ||
60 | Download a release of [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls/release) | ||
61 | |||
62 | ### Manual Build | ||
63 | Download a copy of this git repository and then follow the steps in [Building](#building) | ||
64 | |||
65 | ## Contributing | ||
66 | See [CONTRIBUTING.md](/CONTRIBUTING.md) | ||
36 | 67 | ||
37 | ## Getting Started | 68 | ## Getting Started |
38 | Download | 69 | Get a copy of [videojs-contrib-hls](#installation) and include it in your page along with video.js: |
39 | [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls/releases) | ||
40 | and include it in your page along with video.js: | ||
41 | 70 | ||
42 | ```html | 71 | ```html |
43 | <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls> | 72 | <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls> |
... | @@ -53,7 +82,7 @@ player.play(); | ... | @@ -53,7 +82,7 @@ player.play(); |
53 | </script> | 82 | </script> |
54 | ``` | 83 | ``` |
55 | 84 | ||
56 | Check out our [live example](http://videojs.github.io/videojs-contrib-hls/) if you're having trouble. | 85 | Check out our [live example](http://jsbin.com/liwecukasi/edit?html,output) if you're having trouble. |
57 | 86 | ||
58 | ## Known Issues | 87 | ## Known Issues |
59 | Issues that are currenty know about with workarounds. If you want to | 88 | Issues that are currenty know about with workarounds. If you want to |
... | @@ -115,7 +144,9 @@ are some highlights: | ... | @@ -115,7 +144,9 @@ are some highlights: |
115 | [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track | 144 | [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track |
116 | 145 | ||
117 | ### Options | 146 | ### Options |
147 | #### How to use | ||
118 | 148 | ||
149 | ##### Initialization | ||
119 | You may pass in an options object to the hls source handler at player | 150 | You may pass in an options object to the hls source handler at player |
120 | initialization. You can pass in options just like you would for other | 151 | initialization. You can pass in options just like you would for other |
121 | parts of video.js: | 152 | parts of video.js: |
... | @@ -137,10 +168,36 @@ videojs(video, {flash: { | ... | @@ -137,10 +168,36 @@ videojs(video, {flash: { |
137 | } | 168 | } |
138 | }}); | 169 | }}); |
139 | 170 | ||
171 | // or | ||
172 | |||
173 | var options = {hls: { | ||
174 | withCredentials: true; | ||
175 | }}; | ||
176 | |||
177 | videojs(video, {flash: options, html5: options}); | ||
178 | |||
179 | ``` | ||
180 | |||
181 | ##### Source | ||
182 | Some options, such as `withCredentials` can be passed in to hls during | ||
183 | `player.src` | ||
184 | |||
185 | ```javascript | ||
186 | |||
187 | var player = videojs('some-video-id'); | ||
188 | |||
189 | player.src({ | ||
190 | src: "http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8", | ||
191 | type: 'application/x-mpegURL', | ||
192 | withCredentials: true | ||
193 | }); | ||
140 | ``` | 194 | ``` |
141 | 195 | ||
142 | #### withCredentials | 196 | #### List |
143 | Type: `boolean` | 197 | ##### withCredentials |
198 | * Type: `boolean` | ||
199 | * can be used as a source option | ||
200 | * can be used as an initialization option | ||
144 | 201 | ||
145 | When the `withCredentials` property is set to `true`, all XHR requests for | 202 | When the `withCredentials` property is set to `true`, all XHR requests for |
146 | manifests and segments would have `withCredentials` set to `true` as well. This | 203 | manifests and segments would have `withCredentials` set to `true` as well. This |
... | @@ -156,7 +213,7 @@ for more info. | ... | @@ -156,7 +213,7 @@ for more info. |
156 | Runtime properties are attached to the tech object when HLS is in | 213 | Runtime properties are attached to the tech object when HLS is in |
157 | use. You can get a reference to the HLS source handler like this: | 214 | use. You can get a reference to the HLS source handler like this: |
158 | 215 | ||
159 | ```js | 216 | ```javascript |
160 | var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls; | 217 | var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls; |
161 | ``` | 218 | ``` |
162 | 219 | ||
... | @@ -258,7 +315,6 @@ videojs.Hls.xhr.beforeRequest = function(options) { | ... | @@ -258,7 +315,6 @@ videojs.Hls.xhr.beforeRequest = function(options) { |
258 | For information on the type of options that you can modify see the | 315 | For information on the type of options that you can modify see the |
259 | documentation at [https://github.com/Raynos/xhr](https://github.com/Raynos/xhr). | 316 | documentation at [https://github.com/Raynos/xhr](https://github.com/Raynos/xhr). |
260 | 317 | ||
261 | |||
262 | ### Events | 318 | ### Events |
263 | Standard HTML video events are handled by video.js automatically and | 319 | Standard HTML video events are handled by video.js automatically and |
264 | are triggered on the player object. In addition, there are a couple | 320 | are triggered on the player object. In addition, there are a couple |
... | @@ -267,7 +323,8 @@ playback: | ... | @@ -267,7 +323,8 @@ playback: |
267 | 323 | ||
268 | #### loadedmetadata | 324 | #### loadedmetadata |
269 | 325 | ||
270 | Fired after the first media playlist is downloaded for a stream. | 326 | Fired after the first segment is downloaded for a playlist. This will not happen |
327 | until playback if video.js's `metadata` setting is `none` | ||
271 | 328 | ||
272 | #### loadedplaylist | 329 | #### loadedplaylist |
273 | 330 | ||
... | @@ -296,7 +353,7 @@ frames are mapped to cue points and their values set as the cue | ... | @@ -296,7 +353,7 @@ frames are mapped to cue points and their values set as the cue |
296 | text. Cues are created for all other frame types and the data is | 353 | text. Cues are created for all other frame types and the data is |
297 | attached to the generated cue: | 354 | attached to the generated cue: |
298 | 355 | ||
299 | ```js | 356 | ```javascript |
300 | cue.value.data | 357 | cue.value.data |
301 | ``` | 358 | ``` |
302 | 359 | ||
... | @@ -320,3 +377,27 @@ browsers that karma-detect-browsers detects on your machine. | ... | @@ -320,3 +377,27 @@ browsers that karma-detect-browsers detects on your machine. |
320 | 377 | ||
321 | ## Release History | 378 | ## Release History |
322 | Check out the [changelog](CHANGELOG.md) for a summary of each release. | 379 | Check out the [changelog](CHANGELOG.md) for a summary of each release. |
380 | |||
381 | ## Building | ||
382 | To build a copy of videojs-contrib-hls run the following commands | ||
383 | |||
384 | ```bash | ||
385 | git clone https://github.com/videojs/videojs-contrib-hls | ||
386 | cd videojs-contrib-hls | ||
387 | npm i | ||
388 | npm run build | ||
389 | ``` | ||
390 | |||
391 | videojs-contrib-hls will have created all of the files for using it in a dist folder | ||
392 | |||
393 | ## Development | ||
394 | |||
395 | ### Tools | ||
396 | * Download stream locally with the [HLS Fetcher](https://github.com/imbcmdth/hls-fetcher) | ||
397 | * Simulate errors with [Murphy](https://github.com/mrocajr/murphy) | ||
398 | |||
399 | ### Commands | ||
400 | All commands for development are listed in the `package.json` file and are run using | ||
401 | ```bash | ||
402 | npm run <command> | ||
403 | ``` | ... | ... |
... | @@ -307,11 +307,6 @@ class HlsHandler extends Component { | ... | @@ -307,11 +307,6 @@ class HlsHandler extends Component { |
307 | this.options_ = videojs.mergeOptions(videojs.options.hls || {}, options.hls); | 307 | this.options_ = videojs.mergeOptions(videojs.options.hls || {}, options.hls); |
308 | this.setOptions_(); | 308 | this.setOptions_(); |
309 | 309 | ||
310 | // start playlist selection at a reasonable bandwidth for | ||
311 | // broadband internet | ||
312 | // 0.5 Mbps | ||
313 | this.bandwidth = this.options_.bandwidth || 4194304; | ||
314 | |||
315 | // listen for fullscreenchange events for this player so that we | 310 | // listen for fullscreenchange events for this player so that we |
316 | // can adjust our quality selection quickly | 311 | // can adjust our quality selection quickly |
317 | this.on(document, [ | 312 | this.on(document, [ | ... | ... |
-
Please register or sign in to post a comment