You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

224 lines
8.3 KiB

  1. # video.js HLS Tech
  2. A video.js tech that plays HLS video on platforms that don't support it but have Flash.
  3. [![Build Status](https://travis-ci.org/videojs/videojs-contrib-hls.svg?branch=master)](https://travis-ci.org/videojs/videojs-contrib-hls)
  4. ## Getting Started
  5. Download [videojs-contrib-media-sources](https://github.com/videojs/videojs-contrib-media-sources/releases) and [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls/releases). Include them both in your web page along with video.js:
  6. ```html
  7. <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
  8. <source
  9. src="https://example.com/index.m3u8"
  10. type="application/x-mpegURL">
  11. </video>
  12. <script src="video.js"></script>
  13. <script src="videojs-media-sources.js"></script>
  14. <script src="videojs-hls.min.js"></script>
  15. <script>
  16. var player = videojs('example-video');
  17. player.play();
  18. </script>
  19. ```
  20. Check out our [live example](http://videojs.github.io/videojs-contrib-hls/) if you're having trouble.
  21. ## Documentation
  22. [HTTP Live Streaming](https://developer.apple.com/streaming/) (HLS) has
  23. become a de-facto standard for streaming video on mobile devices
  24. thanks to its native support on iOS and Android. There are a number of
  25. reasons independent of platform to recommend the format, though:
  26. - Supports (client-driven) adaptive bitrate selection
  27. - Delivered over standard HTTP ports
  28. - Simple, text-based manifest format
  29. - No proprietary streaming servers required
  30. Unfortunately, all the major desktop browsers except for Safari are
  31. missing HLS support. That leaves web developers in the unfortunate
  32. position of having to maintain alternate renditions of the same video
  33. and potentially having to forego HTML-based video entirely to provide
  34. the best desktop viewing experience.
  35. This tech attempts to address that situation by providing a polyfill
  36. for HLS on browsers that have Flash support. You can deploy a single
  37. HLS stream, code against the regular HTML5 video APIs, and create a
  38. fast, high-quality video experience across all the big web device
  39. categories.
  40. Check out the [full documentation](docs/) for details on how HLS works
  41. and advanced configuration. A description of the [adaptive switching
  42. behavior](docs/bitrate-switching.md) is available, too.
  43. The videojs-hls tech is still working towards a 1.0 release so it
  44. may not fit your requirements today. Specifically, there is _no_
  45. support for:
  46. - Alternate audio and video tracks
  47. - Subtitles
  48. - Segment codecs _other than_ H.264 with AAC audio
  49. - Internet Explorer < 10
  50. ### Options
  51. You may pass in an options object to the hls tech at player
  52. initialization. You can pass in options just like you would for any
  53. other tech:
  54. ```javascript
  55. videojs(video, {
  56. hls: {
  57. withCredentials: true
  58. }
  59. });
  60. ```
  61. #### withCredentials
  62. Type: `boolean`
  63. When the `withCredentials` property is set to `true`, all XHR requests for
  64. manifests and segments would have `withCredentials` set to `true` as well. This
  65. enables storing and passing cookies from the server that the manifests and
  66. segments live on. This has some implications on CORS because when set, the
  67. `Access-Control-Allow-Origin` header cannot be set to `*`, also, the response
  68. headers require the addition of `Access-Control-Allow-Credentials` header which
  69. is set to `true`.
  70. See html5rocks's [article](http://www.html5rocks.com/en/tutorials/cors/)
  71. for more info.
  72. ### Runtime Properties
  73. #### player.hls.playlists.master
  74. Type: `object`
  75. An object representing the parsed master playlist. If a media playlist
  76. is loaded directly, a master playlist with only one entry will be
  77. created.
  78. #### player.hls.playlists.media
  79. Type: `function`
  80. A function that can be used to retrieve or modify the currently active
  81. media playlist. The active media playlist is referred to when
  82. additional video data needs to be downloaded. Calling this function
  83. with no arguments returns the parsed playlist object for the active
  84. media playlist. Calling this function with a playlist object from the
  85. master playlist or a URI string as specified in the master playlist
  86. will kick off an asynchronous load of the specified media
  87. playlist. Once it has been retreived, it will become the active media
  88. playlist.
  89. #### player.hls.mediaIndex
  90. Type: `number`
  91. The index of the next video segment to be downloaded from
  92. `player.hls.media`.
  93. #### player.hls.segmentXhrTime
  94. Type: `number`
  95. The number of milliseconds it took to download the last media segment.
  96. This value is updated after each segment download completes.
  97. #### player.hls.bandwidth
  98. Type: `number`
  99. The number of bits downloaded per second in the last segment download.
  100. This value is used by the default implementation of `selectPlaylist`
  101. to select an appropriate bitrate to play.
  102. Before the first video segment has been downloaded, it's hard to
  103. estimate bandwidth accurately. The HLS tech uses a heuristic based on
  104. the playlist download times to do this estimation by default. If you
  105. have a more accurate source of bandwidth information, you can override
  106. this value as soon as the HLS tech has loaded to provide an initial
  107. bandwidth estimate.
  108. #### player.hls.bytesReceived
  109. Type: `number`
  110. The total number of content bytes downloaded by the HLS tech.
  111. #### player.hls.selectPlaylist
  112. Type: `function`
  113. A function that returns the media playlist object to use to download
  114. the next segment. It is invoked by the tech immediately before a new
  115. segment is downloaded. You can override this function to provide your
  116. adaptive streaming logic. You must, however, be sure to return a valid
  117. media playlist object that is present in `player.hls.master`.
  118. ### Events
  119. #### loadedmetadata
  120. Fired after the first media playlist is downloaded for a stream.
  121. #### loadedplaylist
  122. Fired immediately after a new master or media playlist has been
  123. downloaded. By default, the tech only downloads playlists as they
  124. are needed.
  125. #### mediachange
  126. Fired when a new playlist becomes the active media playlist. Note that
  127. the actual rendering quality change does not occur simultaneously with
  128. this event; a new segment must be requested and the existing buffer
  129. depleted first.
  130. ### In-Band Metadata
  131. The HLS tech supports [timed
  132. metadata](https://developer.apple.com/library/ios/#documentation/AudioVideo/Conceptual/HTTP_Live_Streaming_Metadata_Spec/Introduction/Introduction.html)
  133. embedded as [ID3 tags](http://id3.org/id3v2.3.0). When a stream is
  134. encountered with embedded metadata, an [in-band metadata text
  135. track](https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-in-band-metadata-track-dispatch-type)
  136. will automatically be created and populated with cues as they are
  137. encountered in the stream. UTF-8 encoded
  138. [TXXX](http://id3.org/id3v2.3.0#User_defined_text_information_frame)
  139. and [WXXX](http://id3.org/id3v2.3.0#User_defined_URL_link_frame) ID3
  140. frames are mapped to cue points and their values set as the cue
  141. text. Cues are created for all other frame types and the data is
  142. attached to the generated cue:
  143. ```js
  144. cue.frame.data
  145. ```
  146. There are lots of guides and references to using text tracks [around
  147. the web](http://www.html5rocks.com/en/tutorials/track/basics/).
  148. ### Testing
  149. For testing, you can either run `npm test` or use `grunt` directly.
  150. If you use `npm test`, it will only run the karma and end-to-end tests using chrome.
  151. You can specify which browsers you want the tests to run via grunt's `test` task.
  152. You can use either grunt-style arguments or comma separated arguments:
  153. ```
  154. grunt test:chrome:firefox # grunt-style
  155. grunt test:chrome,firefox # comma-separated
  156. ```
  157. Possible options are:
  158. * `chromecanary`
  159. * `phantomjs`
  160. * `opera`
  161. * `chrome`<sup>1</sup>
  162. * `safari`<sup>1, 2</sup>
  163. * `firefox`<sup>1</sup>
  164. * `ie`<sup>1</sup>
  165. _<sup>1</sup>supported end-to-end browsers_<br />
  166. _<sup>2</sup>requires the [SafariDriver extension]( https://code.google.com/p/selenium/wiki/SafariDriver) to be installed_
  167. ## Hosting Considerations
  168. Unlike a native HLS implementation, the HLS tech has to comply with
  169. the browser's security policies. That means that all the files that
  170. make up the stream must be served from the same domain as the page
  171. hosting the video player or from a server that has appropriate [CORS
  172. headers](https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS)
  173. configured. Easy [instructions are
  174. available](http://enable-cors.org/server.html) for popular webservers
  175. and most CDNs should have no trouble turning CORS on for your account.
  176. ## Release History
  177. Check out the [changelog](CHANGELOG.md) for a summary of each release.