{"id":13470789,"url":"https://github.com/videojs/videojs-contrib-hls","last_synced_at":"2025-09-28T19:32:14.351Z","repository":{"id":44165046,"uuid":"14029328","full_name":"videojs/videojs-contrib-hls","owner":"videojs","description":"HLS library for video.js","archived":true,"fork":false,"pushed_at":"2018-11-14T22:49:48.000Z","size":16862,"stargazers_count":2838,"open_issues_count":0,"forks_count":791,"subscribers_count":209,"default_branch":"master","last_synced_at":"2024-05-22T09:42:47.305Z","etag":null,"topics":["hls","javascript","mpegts","transmuxing","video","videojs","videojs-contrib-hls"],"latest_commit_sha":null,"homepage":"http://videojs.github.io/videojs-contrib-hls/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/videojs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-31T21:55:21.000Z","updated_at":"2024-05-22T07:29:48.000Z","dependencies_parsed_at":"2022-08-19T13:30:36.788Z","dependency_job_id":null,"html_url":"https://github.com/videojs/videojs-contrib-hls","commit_stats":null,"previous_names":[],"tags_count":147,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videojs%2Fvideojs-contrib-hls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videojs%2Fvideojs-contrib-hls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videojs%2Fvideojs-contrib-hls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videojs%2Fvideojs-contrib-hls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/videojs","download_url":"https://codeload.github.com/videojs/videojs-contrib-hls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234555910,"owners_count":18851870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hls","javascript","mpegts","transmuxing","video","videojs","videojs-contrib-hls"],"created_at":"2024-07-31T16:00:35.964Z","updated_at":"2025-09-28T19:32:05.700Z","avatar_url":"https://github.com/videojs.png","language":"JavaScript","funding_links":[],"categories":["react-awesome-player","JavaScript","HarmonyOS"],"sub_categories":["videojs plugins","Windows Manager"],"readme":"# Notice: this project will be deprecated and is succeeded by [videojs-http-streaming](https://github.com/videojs/http-streaming). VHS supports HLS and DASH and is built into video.js 7, see the [video.js 7 blog post](https://blog.videojs.com/video-js-7-is-here/)\n\n# video.js HLS Source Handler\n\n[![Build Status][travis-icon]][travis-link]\n[![Slack Status][slack-icon]][slack-link]\n[![Greenkeeper badge][greenkeeper-icon]][greenkeeper-link]\n\nPlay back HLS with video.js, even where it's not natively supported.\n\nMaintenance Status: Deprecated\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*\n\n- [Installation](#installation)\n  - [NPM](#npm)\n  - [CDN](#cdn)\n  - [Releases](#releases)\n  - [Manual Build](#manual-build)\n- [Contributing](#contributing)\n- [Talk to us](#talk-to-us)\n- [Getting Started](#getting-started)\n  - [Video.js 6](#videojs-6)\n- [Documentation](#documentation)\n  - [Options](#options)\n    - [How to use](#how-to-use)\n      - [Initialization](#initialization)\n      - [Source](#source)\n    - [List](#list)\n      - [withCredentials](#withcredentials)\n      - [useCueTags](#usecuetags)\n      - [overrideNative](#overridenative)\n      - [blacklistDuration](#blacklistduration)\n      - [bandwidth](#bandwidth)\n      - [enableLowInitialPlaylist](#enablelowinitialplaylist)\n  - [Runtime Properties](#runtime-properties)\n    - [hls.playlists.master](#hlsplaylistsmaster)\n    - [hls.playlists.media](#hlsplaylistsmedia)\n    - [hls.segmentXhrTime](#hlssegmentxhrtime)\n    - [hls.bandwidth](#hlsbandwidth)\n    - [hls.bytesReceived](#hlsbytesreceived)\n    - [hls.selectPlaylist](#hlsselectplaylist)\n    - [hls.representations](#hlsrepresentations)\n    - [hls.xhr](#hlsxhr)\n  - [Events](#events)\n    - [loadedmetadata](#loadedmetadata)\n  - [HLS Usage Events](#hls-usage-events)\n    - [Presence Stats](#presence-stats)\n    - [Use Stats](#use-stats)\n  - [In-Band Metadata](#in-band-metadata)\n  - [Segment Metadata](#segment-metadata)\n- [Hosting Considerations](#hosting-considerations)\n- [Known Issues](#known-issues)\n  - [IE10 and Below](#ie10-and-below)\n  - [Fragmented MP4 Support](#fragmented-mp4-support)\n  - [Testing](#testing)\n- [Release History](#release-history)\n- [Building](#building)\n- [Development](#development)\n  - [Tools](#tools)\n  - [Commands](#commands)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n### NPM\nTo install `videojs-contrib-hls` with npm run\n\n```bash\nnpm install --save videojs-contrib-hls\n```\n\n### CDN\nSelect a version of HLS from [cdnjs](https://cdnjs.com/libraries/videojs-contrib-hls) or [jsDelivr](https://www.jsdelivr.com/package/npm/videojs-contrib-hls)\n\n### Releases\nDownload a release of [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls/releases)\n\n### Manual Build\nDownload a copy of this git repository and then follow the steps in [Building](#building)\n\n## Contributing\nSee [CONTRIBUTING.md](/CONTRIBUTING.md)\n\n## Talk to us\nDrop by our slack channel (#playback) on the [Video.js slack][slack-link].\n\n## Getting Started\nGet a copy of [videojs-contrib-hls](#installation) and include it in your page along with video.js:\n\n```html\n\u003cvideo id=example-video width=600 height=300 class=\"video-js vjs-default-skin\" controls\u003e\n  \u003csource\n     src=\"https://example.com/index.m3u8\"\n     type=\"application/x-mpegURL\"\u003e\n\u003c/video\u003e\n\u003cscript src=\"video.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"videojs-contrib-hls.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar player = videojs('example-video');\nplayer.play();\n\u003c/script\u003e\n```\n\nCheck out our [live example](http://jsbin.com/vokipos/8/edit?html,output) if you're having trouble.\n\n### Video.js 6\nWith Video.js 6, by default there is no flash support. Instead, flash support is provided\nthrough the [videojs-flash](https://github.com/videojs/videojs-flash) plugin. If you are\ntrying to use Video.js version 6 and want to include flash support, you must include\n[videojs-flash](https://github.com/videojs/videojs-flash) on your page before including\nvideojs-contrib-hls\n\n```html\n\u003cscript src=\"https://unpkg.com/videojs-flash/dist/videojs-flash.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js\"\u003e\u003c/script\u003e\n```\n\nFlash, and the [videojs-flash](https://github.com/videojs/videojs-flash) plugin, are not\nrequired, but are recommended as a fallback option for browsers that don't have a native\nHLS player or support for [Media Source Extensions](http://caniuse.com/#feat=mediasource).\n\n## Documentation\n[HTTP Live Streaming](https://developer.apple.com/streaming/) (HLS) has\nbecome a de-facto standard for streaming video on mobile devices\nthanks to its native support on iOS and Android. There are a number of\nreasons independent of platform to recommend the format, though:\n\n- Supports (client-driven) adaptive bitrate selection\n- Delivered over standard HTTP ports\n- Simple, text-based manifest format\n- No proprietary streaming servers required\n\nUnfortunately, all the major desktop browsers except for Safari are\nmissing HLS support. That leaves web developers in the unfortunate\nposition of having to maintain alternate renditions of the same video\nand potentially having to forego HTML-based video entirely to provide\nthe best desktop viewing experience.\n\nThis project addresses that situation by providing a polyfill for HLS\non browsers that have support for [Media Source\nExtensions](http://caniuse.com/#feat=mediasource), or failing that,\nsupport Flash. You can deploy a single HLS stream, code against the\nregular HTML5 video APIs, and create a fast, high-quality video\nexperience across all the big web device categories.\n\nCheck out the [full documentation](docs/) for details on how HLS works\nand advanced configuration. A description of the [adaptive switching\nbehavior](docs/bitrate-switching.md) is available, too.\n\nvideojs-contrib-hls supports a bunch of HLS features. Here\nare some highlights:\n\n- video-on-demand and live playback modes\n- backup or redundant streams\n- mid-segment quality switching\n- AES-128 segment encryption\n- CEA-608 captions are automatically translated into standard HTML5\n  [caption text tracks][0]\n- In-Manifest WebVTT subtitles are automatically translated into standard HTML5\n  subtitle tracks\n- Timed ID3 Metadata is automatically translated into HTML5 metedata\n  text tracks\n- Highly customizable adaptive bitrate selection\n- Automatic bandwidth tracking\n- Cross-domain credentials support with CORS\n- Tight integration with video.js and a philosophy of exposing as much\n  as possible with standard HTML APIs\n- Stream with multiple audio tracks and switching to those audio tracks\n  (see the docs folder) for info\n- Media content in\n  [fragmented MP4s](https://developer.apple.com/videos/play/wwdc2016/504/)\n  instead of the MPEG2-TS container format.\n\n[0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\n\n### Options\n#### How to use\n\n##### Initialization\nYou may pass in an options object to the hls source handler at player\ninitialization. You can pass in options just like you would for other\nparts of video.js:\n\n```javascript\n// html5 for html hls\nvideojs(video, {html5: {\n  hls: {\n    withCredentials: true\n  }\n}});\n\n// or\n\n// flash for flash hls\nvideojs(video, {flash: {\n  hls: {\n    withCredentials: true\n  }\n}});\n\n// or\n\nvar options = {hls: {\n  withCredentials: true\n}};\n\nvideojs(video, {flash: options, html5: options});\n\n```\n\n##### Source\nSome options, such as `withCredentials` can be passed in to hls during\n`player.src`\n\n```javascript\n\nvar player = videojs('some-video-id');\n\nplayer.src({\n  src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',\n  type: 'application/x-mpegURL',\n  withCredentials: true\n});\n```\n\n#### List\n##### withCredentials\n* Type: `boolean`\n* can be used as a source option\n* can be used as an initialization option\n\nWhen the `withCredentials` property is set to `true`, all XHR requests for\nmanifests and segments would have `withCredentials` set to `true` as well. This\nenables storing and passing cookies from the server that the manifests and\nsegments live on. This has some implications on CORS because when set, the\n`Access-Control-Allow-Origin` header cannot be set to `*`, also, the response\nheaders require the addition of `Access-Control-Allow-Credentials` header which\nis set to `true`.\nSee html5rocks's [article](http://www.html5rocks.com/en/tutorials/cors/)\nfor more info.\n\n##### handleManifestRedirects\n* Type: `boolean`\n* Default: `false`\n* can be used as a source option\n* can be used as an initialization option\n\nWhen the `handleManifestRedirects` property is set to `true`, manifest requests\nwhich are redirected will have their URL updated to the new URL for future\nrequests.\n\n##### useCueTags\n* Type: `boolean`\n* can be used as an initialization option\n\nWhen the `useCueTags` property is set to `true,` a text track is created with\nlabel 'ad-cues' and kind 'metadata'. The track is then added to\n`player.textTracks()`. Changes in active cue may be\ntracked by following the Video.js cue points API for text tracks. For example:\n\n```javascript\nlet textTracks = player.textTracks();\nlet cuesTrack;\n\nfor (let i = 0; i \u003c textTracks.length; i++) {\n  if (textTracks[i].label === 'ad-cues') {\n    cuesTrack = textTracks[i];\n  }\n}\n\ncuesTrack.addEventListener('cuechange', function() {\n  let activeCues = cuesTrack.activeCues;\n\n  for (let i = 0; i \u003c activeCues.length; i++) {\n    let activeCue = activeCues[i];\n\n    console.log('Cue runs from ' + activeCue.startTime +\n                ' to ' + activeCue.endTime);\n  }\n});\n```\n\n##### overrideNative\n* Type: `boolean`\n* can be used as an initialization option\n\nTry to use videojs-contrib-hls even on platforms that provide some\nlevel of HLS support natively. There are a number of platforms that\n*technically* play back HLS content but aren't very reliable or are\nmissing features like CEA-608 captions support. When `overrideNative`\nis true, if the platform supports Media Source Extensions\nvideojs-contrib-hls will take over HLS playback to provide a more\nconsistent experience.\n\n__NOTE__: If you use this option, you must also set\n`videojs.options.html5.nativeAudioTracks` and\n`videojs.options.html5.nativeVideoTracks` to\n`false`. videojs-contrib-hls relies on audio and video tracks to play\nstreams with alternate audio and requires additional capabilities only\nsupported by non-native tracks in video.js.\n\n##### blacklistDuration\n* Type: `number`\n* can be used as an initialization option\n\nWhen the `blacklistDuration` property is set to a time duration in seconds,\nif a playlist is blacklisted, it will be blacklisted for a period of that\ncustomized duration. This enables the blacklist duration to be configured\nby the user.\n\n##### bandwidth\n* Type: `number`\n* can be used as an initialization option\n\nWhen the `bandwidth` property is set (bits per second), it will be used in\nthe calculation for initial playlist selection, before more bandwidth\ninformation is seen by the player.\n\n##### enableLowInitialPlaylist\n* Type: `boolean`\n* can be used as an initialization option\n\nWhen `enableLowInitialPlaylist` is set to true, it will be used to select\nthe lowest bitrate playlist initially.  This helps to decrease playback start time.\nThis setting is `false` by default.\n\n### Runtime Properties\nRuntime properties are attached to the tech object when HLS is in\nuse. You can get a reference to the HLS source handler like this:\n\n```javascript\nvar hls = player.tech({ IWillNotUseThisInPlugins: true }).hls;\n```\n\nIf you *were* thinking about modifying runtime properties in a\nvideo.js plugin, we'd recommend you avoid it. Your plugin won't work\nwith videos that don't use videojs-contrib-hls and the best plugins\nwork across all the media types that video.js supports. If you're\ndeploying videojs-contrib-hls on your own website and want to make a\ncouple tweaks though, go for it!\n\n#### hls.playlists.master\nType: `object`\n\nAn object representing the parsed master playlist. If a media playlist\nis loaded directly, a master playlist with only one entry will be\ncreated.\n\n#### hls.playlists.media\nType: `function`\n\nA function that can be used to retrieve or modify the currently active\nmedia playlist. The active media playlist is referred to when\nadditional video data needs to be downloaded. Calling this function\nwith no arguments returns the parsed playlist object for the active\nmedia playlist. Calling this function with a playlist object from the\nmaster playlist or a URI string as specified in the master playlist\nwill kick off an asynchronous load of the specified media\nplaylist. Once it has been retreived, it will become the active media\nplaylist.\n\n#### hls.segmentXhrTime\nType: `number`\n\nThe number of milliseconds it took to download the last media segment.\nThis value is updated after each segment download completes.\n\n#### hls.bandwidth\nType: `number`\n\nThe number of bits downloaded per second in the last segment download.\nThis value is used by the default implementation of `selectPlaylist`\nto select an appropriate bitrate to play.\n\nBefore the first video segment has been downloaded, it's hard to\nestimate bandwidth accurately. The HLS tech uses a heuristic based on\nthe playlist download times to do this estimation by default. If you\nhave a more accurate source of bandwidth information, you can override\nthis value as soon as the HLS tech has loaded to provide an initial\nbandwidth estimate.\n\n#### hls.bytesReceived\nType: `number`\n\nThe total number of content bytes downloaded by the HLS tech.\n\n#### hls.selectPlaylist\nType: `function`\n\nA function that returns the media playlist object to use to download\nthe next segment. It is invoked by the tech immediately before a new\nsegment is downloaded. You can override this function to provide your\nadaptive streaming logic. You must, however, be sure to return a valid\nmedia playlist object that is present in `player.hls.master`.\n\nOverridding this function with your own is very powerful but is overkill\nfor many purposes. Most of the time, you should use the much simpler\nfunction below to selectively enable or disable a playlist from the\nadaptive streaming logic.\n\n#### hls.representations\nType: `function`\n\nIt is recommended to include the [videojs-contrib-quality-levels](https://github.com/videojs/videojs-contrib-quality-levels) plugin to your page so that videojs-contrib-hls will automatically populate the QualityLevelList exposed on the player by the plugin. You can access this list by calling `player.qualityLevels()`. See the [videojs-contrib-quality-levels project page](https://github.com/videojs/videojs-contrib-quality-levels) for more information on how to use the api.\n\nExample, only enabling representations with a width greater than or equal to 720:\n\n```javascript\nvar qualityLevels = player.qualityLevels();\n\nfor (var i = 0; i \u003c qualityLevels.length; i++) {\n  var quality = qualityLevels[i];\n  if (quality.width \u003e= 720) {\n    quality.enabled = true;\n  } else {\n    quality.enabled = false;\n  }\n}\n```\n\nIf including [videojs-contrib-quality-levels](https://github.com/videojs/videojs-contrib-quality-levels) is not an option, you can use the representations api. To get all of the available representations, call the `representations()` method on `player.hls`. This will return a list of plain objects, each with `width`, `height`, `bandwidth`, and `id` properties, and an `enabled()` method.\n\n```javascript\nplayer.hls.representations();\n```\n\nTo see whether the representation is enabled or disabled, call its `enabled()` method with no arguments. To set whether it is enabled/disabled, call its `enabled()` method and pass in a boolean value. Calling `\u003crepresentation\u003e.enabled(true)` will allow the adaptive bitrate algorithm to select the representation while calling `\u003crepresentation\u003e.enabled(false)` will disallow any selection of that representation.\n\nExample, only enabling representations with a width greater than or equal to 720:\n\n```javascript\nplayer.hls.representations().forEach(function(rep) {\n  if (rep.width \u003e= 720) {\n    rep.enabled(true);\n  } else {\n    rep.enabled(false);\n  }\n});\n```\n\n#### hls.xhr\nType: `function`\n\nThe xhr function that is used by HLS internally is exposed on the per-\nplayer `hls` object. While it is possible, we do not recommend replacing\nthe function with your own implementation. Instead, the `xhr` provides\nthe ability to specify a `beforeRequest` function that will be called\nwith an object containing the options that will be used to create the\nxhr request.\n\nExample:\n```javascript\nplayer.hls.xhr.beforeRequest = function(options) {\n  options.uri = options.uri.replace('example.com', 'foo.com');\n\n  return options;\n};\n```\n\nThe global `videojs.Hls` also exposes an `xhr` property. Specifying a\n`beforeRequest` function on that will allow you to intercept the options\nfor *all* requests in every player on a page. For consistency across\nbrowsers the video source should be set at runtime once the video player\nis ready.\n\nExample\n```javascript\nvideojs.Hls.xhr.beforeRequest = function(options) {\n  /*\n   * Modifications to requests that will affect every player.\n   */\n\n  return options;\n};\n\nvar player = videojs('video-player-id');\nplayer.ready(function() {\n  this.src({\n    src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',\n    type: 'application/x-mpegURL',\n  });\n});\n```\n\nFor information on the type of options that you can modify see the\ndocumentation at [https://github.com/Raynos/xhr](https://github.com/Raynos/xhr).\n\n### Events\nStandard HTML video events are handled by video.js automatically and\nare triggered on the player object.\n\n#### loadedmetadata\n\nFired after the first segment is downloaded for a playlist. This will not happen\nuntil playback if video.js's `metadata` setting is `none`\n\n### HLS Usage Events\n\nUsage tracking events are fired when we detect a certain HLS feature, encoding setting,\nor API is used. These can be helpful for analytics, and to pinpoint the cause of HLS errors.\nFor instance, if errors are being fired in tandem with a usage event indicating that the\nplayer was playing an AES encrypted stream, then we have a possible avenue to explore when\ndebugging the error.\n\nNote that although these usage events are listed below, they may change at any time without\na major version change.\n\nHLS usage events are triggered on the tech with the exception of the 3 hls-reload-error\nevents, which are triggered on the player.\n\n#### Presence Stats\n\nEach of the following usage events are fired once per source if (and when) detected:\n\n| Name          | Description   |\n| ------------- | ------------- |\n| hls-webvtt    | master manifest has at least one segmented WebVTT playlist |\n| hls-aes       | a playlist is AES encrypted |\n| hls-fmp4      | a playlist used fMP4 segments |\n| hls-demuxed   | audio and video are demuxed by default |\n| hls-alternate-audio | alternate audio available in the master manifest |\n| hls-playlist-cue-tags | a playlist used cue tags (see useCueTags(#usecuetags) for details) |\n\n#### Use Stats\n\nEach of the following usage events are fired per use:\n\n| Name          | Description   |\n| ------------- | ------------- |\n| hls-gap-skip  | player skipped a gap in the buffer |\n| hls-player-access | player.hls was accessed |\n| hls-audio-change | a user selected an alternate audio stream |\n| hls-rendition-disabled | a rendition was disabled |\n| hls-rendition-enabled | a rendition was enabled |\n| hls-rendition-blacklisted | a rendition was blacklisted |\n| hls-timestamp-offset | a timestamp offset was set in HLS (can identify discontinuities) |\n| hls-unknown-waiting | the player stopped for an unknown reason and we seeked to current time try to address it |\n| hls-live-resync | playback fell off the back of a live playlist and we resynced to the live point |\n| hls-video-underflow | we seeked to current time to address video underflow |\n| hls-error-reload-initialized | the reloadSourceOnError plugin was initialized |\n| hls-error-reload | the reloadSourceOnError plugin reloaded a source |\n| hls-error-reload-canceled | an error occurred too soon after the last reload, so we didn't reload again (to prevent error loops) |\n\n\n### In-Band Metadata\nThe HLS tech supports [timed\nmetadata](https://developer.apple.com/library/ios/#documentation/AudioVideo/Conceptual/HTTP_Live_Streaming_Metadata_Spec/Introduction/Introduction.html)\nembedded as [ID3 tags](http://id3.org/id3v2.3.0). When a stream is\nencountered with embedded metadata, an [in-band metadata text\ntrack](https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-in-band-metadata-track-dispatch-type)\nwill automatically be created and populated with cues as they are\nencountered in the stream. UTF-8 encoded\n[TXXX](http://id3.org/id3v2.3.0#User_defined_text_information_frame)\nand [WXXX](http://id3.org/id3v2.3.0#User_defined_URL_link_frame) ID3\nframes are mapped to cue points and their values set as the cue\ntext. Cues are created for all other frame types and the data is\nattached to the generated cue:\n\n```javascript\ncue.value.data\n```\n\nThere are lots of guides and references to using text tracks [around\nthe web](http://www.html5rocks.com/en/tutorials/track/basics/).\n\n### Segment Metadata\nYou can get metadata about the segments currently in the buffer by using the `segment-metadata`\ntext track. You can get the metadata of the currently rendered segment by looking at the\ntrack's `activeCues` array. The metadata will be attached to the `cue.value` property and\nwill have this structure\n\n```javascript\ncue.value = {\n  byteLength, // The size of the segment in bytes\n  bandwidth, // The peak bitrate reported by the segment's playlist\n  resolution, // The resolution reported by the segment's playlist\n  codecs, // The codecs reported by the segment's playlist\n  uri, // The Segment uri\n  timeline, // Timeline of the segment for detecting discontinuities\n  playlist, // The Playlist uri\n  start, // Segment start time\n  end // Segment end time\n};\n```\n\nExample:\nDetect when a change in quality is rendered on screen\n```javascript\nlet tracks = player.textTracks();\nlet segmentMetadataTrack;\n\nfor (let i = 0; i \u003c tracks.length; i++) {\n  if (tracks[i].label === 'segment-metadata') {\n    segmentMetadataTrack = tracks[i];\n  }\n}\n\nlet previousPlaylist;\n\nif (segmentMetadataTrack) {\n  segmentMetadataTrack.on('cuechange', function() {\n    let activeCue = segmentMetadataTrack.activeCues[0];\n\n    if (activeCue) {\n      if (previousPlaylist !== activeCue.value.playlist) {\n        console.log('Switched from rendition ' + previousPlaylist +\n                    ' to rendition ' + activeCue.value.playlist);\n      }\n      previousPlaylist = activeCue.value.playlist;\n    }\n  });\n}\n```\n\n## Hosting Considerations\nUnlike a native HLS implementation, the HLS tech has to comply with\nthe browser's security policies. That means that all the files that\nmake up the stream must be served from the same domain as the page\nhosting the video player or from a server that has appropriate [CORS\nheaders](https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS)\nconfigured. Easy [instructions are\navailable](http://enable-cors.org/server.html) for popular webservers\nand most CDNs should have no trouble turning CORS on for your account.\n\n\n## Known Issues\nIssues that are currenty know about with workarounds. If you want to\nhelp find a solution that would be appreciated!\n\n### IE10 and Below\nAs of version 5.0.0, IE10 and below are no longer supported.\n\n### Fragmented MP4 Support\nEdge has native support for HLS but only in the MPEG2-TS container. If\nyou attempt to play an HLS stream with fragmented MP4 segments, Edge\nwill stall. Fragmented MP4s are only supported on browser that have\n[Media Source Extensions](http://caniuse.com/#feat=mediasource) available.\n\n### Testing\n\nFor testing, you run `npm run test`. This will run tests using any of the\nbrowsers that karma-detect-browsers detects on your machine.\n\n## Release History\nCheck out the [changelog](CHANGELOG.md) for a summary of each release.\n\n## Building\nTo build a copy of videojs-contrib-hls run the following commands\n\n```bash\ngit clone https://github.com/videojs/videojs-contrib-hls\ncd videojs-contrib-hls\nnpm i\nnpm run build\n```\n\nvideojs-contrib-hls will have created all of the files for using it in a dist folder\n\n## Development\n\n### Tools\n* Download stream locally with the [HLS Fetcher](https://github.com/imbcmdth/hls-fetcher)\n* Simulate errors with [Murphy](https://github.com/mrocajr/murphy)\n\n### Commands\nAll commands for development are listed in the `package.json` file and are run using\n```bash\nnpm run \u003ccommand\u003e\n```\n\n[slack-icon]: http://slack.videojs.com/badge.svg\n[slack-link]: http://slack.videojs.com\n[travis-icon]: https://travis-ci.org/videojs/videojs-contrib-hls.svg?branch=master\n[travis-link]: https://travis-ci.org/videojs/videojs-contrib-hls\n[greenkeeper-icon]: https://badges.greenkeeper.io/videojs/videojs-contrib-hls.svg\n[greenkeeper-link]: https://greenkeeper.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideojs%2Fvideojs-contrib-hls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvideojs%2Fvideojs-contrib-hls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideojs%2Fvideojs-contrib-hls/lists"}