49e02ea7 by Brandon Casey Committed by Jon-Carlos Rivera

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
1 parent 7244f99c
...@@ -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, [
......