[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3823":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":45,"discoverSource":46},3823,"hls.js","video-dev\u002Fhls.js","video-dev","HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.","https:\u002F\u002Fhlsjs.video-dev.org\u002Fdemo",null,"TypeScript",16755,2746,306,76,0,2,9,80,45,"Other",false,"master",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"ecmascript6","hacktoberfest","hls","hlsjs","html5","http-live-streaming","javascript","mediasource","mediasource-extensions","native-hls","playback","player","stream","streaming","video","video-streaming","2026-06-12 02:00:54","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fhls.js.svg?style=flat)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fhls.js)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fhls.js\u002Fcanary.svg?style=flat)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhls.js\u002Fv\u002Fcanary)\n[![](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002Fhls.js\u002Fbadge?style=rounded)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fhls.js)\n[![Sauce Test Status](https:\u002F\u002Fsaucelabs.com\u002Fbuildstatus\u002Frobwalch)](https:\u002F\u002Fapp.saucelabs.com\u002Fu\u002Frobwalch)\n[![jsDeliver](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002Fhls.js\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fhls.js)\n\n[comment]: \u003C> ([![Sauce Test Status](https:\u002F\u002Fsaucelabs.com\u002Fbrowser-matrix\u002Frobwalch.svg)](https:\u002F\u002Fsaucelabs.com\u002Fu\u002Frobwalch))\n\n# ![HLS.js](https:\u002F\u002Fraw.githubusercontent.com\u002Fvideo-dev\u002Fhls.js\u002Fmaster\u002Fdocs\u002Flogo.svg)\n\nHLS.js is a JavaScript library that implements an [HTTP Live Streaming] client.\nIt relies on [HTML5 video][] and [MediaSource Extensions][] for playback.\n\nIt works by transmuxing MPEG-2 Transport Stream and AAC\u002FMP3 streams into ISO BMFF (MP4) fragments.\nTransmuxing is performed asynchronously using a [Web Worker] when available in the browser.\nHLS.js also supports HLS + fmp4, as announced during [WWDC2016](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2016\u002F504\u002F).\n\nHLS.js works directly on top of a standard HTML`\u003Cvideo>` element.\n\nHLS.js is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly typed superset of ES6), and transpiled in ECMAScript5 using [Babel](https:\u002F\u002Fbabeljs.io\u002F) and the [TypeScript compiler].\n\n[Rollup] is used to build the distro bundle and serve the local development environment.\n\n[html5 video]: https:\u002F\u002Fwww.html5rocks.com\u002Fen\u002Ftutorials\u002Fvideo\u002Fbasics\u002F\n[mediasource extensions]: https:\u002F\u002Fw3c.github.io\u002Fmedia-source\u002F\n[http live streaming]: https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHTTP_Live_Streaming\n[web worker]: https:\u002F\u002Fcaniuse.com\u002F#search=worker\n[ecmascript6]: https:\u002F\u002Fgithub.com\u002Fericdouglas\u002FES6-Learning#articles--tutorials\n[typescript]: https:\u002F\u002Fwww.typescriptlang.org\u002F\n[typescript compiler]: https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fcompiler-options.html\n[rollup]: https:\u002F\u002Frollupjs.org\u002F\n\n## Features\n\n- VOD & Live playlists\n  - DVR support on Live playlists\n- Fragmented MP4 container\n- MPEG-2 TS container\n  - ITU-T Rec. H.264 and ISO\u002FIEC 14496-10 Elementary Stream\n  - ITU-T Rec. H.265 and ISO\u002FIEC 23008-2 Elementary Stream\n  - ISO\u002FIEC 13818-7 ADTS AAC Elementary Stream\n  - ISO\u002FIEC 11172-3 \u002F ISO\u002FIEC 13818-3 (MPEG-1\u002F2 Audio Layer III) Elementary Stream\n  - ATSC A\u002F52 \u002F AC-3 \u002F Dolby Digital Elementary Stream\n  - Packetized metadata (ID3v2.3.0) Elementary Stream\n- AAC container (audio only streams)\n- MPEG Audio container (MPEG-1\u002F2 Audio Layer III audio only streams)\n- Timed Metadata for HTTP Live Streaming (ID3 format carried in MPEG-2 TS, Emsg in CMAF\u002FFragmented MP4, and DATERANGE playlist tags)\n- AES-128 decryption\n- \"identity\" format SAMPLE-AES decryption of MPEG-2 TS segments only\n- Encrypted media extensions (EME) support for DRM (digital rights management)\n  - FairPlay, PlayReady, Widevine CDMs with fmp4 segments\n- Level capping based on HTMLMediaElement resolution, dropped-frames, and HDCP-Level\n- CEA-608\u002F708 captions\n- WebVTT subtitles\n- Alternate Audio Track Rendition (Master Playlist with Alternative Audio) for VoD and Live playlists\n- Adaptive streaming\n  - Manual & Auto Quality Switching\n    - 3 Quality Switching modes are available (controllable through API means)\n      - Instant switching (immediate quality switch at current video position)\n      - Smooth switching (quality switch for next loaded fragment)\n      - Bandwidth conservative switching (quality switch change for next loaded fragment, without flushing the buffer)\n    - In Auto-Quality mode, emergency switch down in case bandwidth is suddenly dropping to minimize buffering.\n- Accurate Seeking on VoD & Live (not limited to fragment or keyframe boundary)\n- Ability to seek in buffer and back buffer without redownloading segments\n- Built-in Analytics\n  - All internal events can be monitored (Network Events, Video Events)\n  - Playback session metrics are also exposed\n- Resilience to errors\n  - Retry mechanism embedded in the library\n  - Recovery actions can be triggered fix fatal media or network errors\n- [Redundant\u002FFailover Playlists](https:\u002F\u002Fdeveloper.apple.com\u002Flibrary\u002Fios\u002Fdocumentation\u002FNetworkingInternet\u002FConceptual\u002FStreamingMediaGuide\u002FUsingHTTPLiveStreaming\u002FUsingHTTPLiveStreaming.html#\u002F\u002Fapple_ref\u002Fdoc\u002Fuid\u002FTP40008332-CH102-SW22)\n- HLS Variable Substitution\n\n### Supported HLS tags\n\nFor details on the HLS format and these tags' meanings, see https:\u002F\u002Fdatatracker.ietf.org\u002Fdoc\u002Fhtml\u002Fdraft-pantos-hls-rfc8216bis\n\n#### Multivariant Playlist tags\n\n- `#EXT-X-STREAM-INF:\u003Cattribute-list>`\n  `\u003CURI>`\n- `#EXT-X-I-FRAME-STREAM-INF` I-frame Media Playlist files\n- `#EXT-X-MEDIA:\u003Cattribute-list>`\n- `#EXT-X-SESSION-DATA:\u003Cattribute-list>`\n- `#EXT-X-SESSION-KEY:\u003Cattribute-list>` EME Key-System selection and preloading\n- `#EXT-X-START:TIME-OFFSET=\u003Cn>`\n- `#EXT-X-CONTENT-STEERING:\u003Cattribute-list>` Content Steering\n- `#EXT-X-DEFINE:\u003Cattribute-list>` Variable Substitution (`NAME,VALUE,QUERYPARAM` attributes)\n\n#### Media Playlist tags\n\n- `#EXTM3U` (ignored)\n- `#EXT-X-VERSION=\u003Cn>` (value is ignored)\n- `#EXT-X-INDEPENDENT-SEGMENTS` (ignored)\n- `#EXT-X-I-FRAMES-ONLY`\n- `#EXTINF:\u003Cduration>,[\u003Ctitle>]`\n- `#EXT-X-ENDLIST`\n- `#EXT-X-MEDIA-SEQUENCE=\u003Cn>`\n- `#EXT-X-TARGETDURATION=\u003Cn>`\n- `#EXT-X-DISCONTINUITY`\n- `#EXT-X-DISCONTINUITY-SEQUENCE=\u003Cn>`\n- `#EXT-X-BITRATE`\n- `#EXT-X-BYTERANGE=\u003Cn>[@\u003Co>]`\n- `#EXT-X-MAP:\u003Cattribute-list>`\n- `#EXT-X-KEY:\u003Cattribute-list>` (`KEYFORMAT=\"identity\",METHOD=SAMPLE-AES` is only supports with MPEG-2 TS segments)\n- `#EXT-X-PROGRAM-DATE-TIME:\u003Cattribute-list>`\n- `#EXT-X-START:TIME-OFFSET=\u003Cn>`\n- `#EXT-X-SERVER-CONTROL:\u003Cattribute-list>`\n- `#EXT-X-PART-INF:PART-TARGET=\u003Cn>`\n- `#EXT-X-PART:\u003Cattribute-list>`\n- `#EXT-X-SKIP:\u003Cattribute-list>` Delta Playlists\n- `#EXT-X-RENDITION-REPORT:\u003Cattribute-list>`\n- `#EXT-X-DATERANGE:\u003Cattribute-list>` Metadata\n  - HLS EXT-X-DATERANGE Schema for Interstitials\n- `#EXT-X-DEFINE:\u003Cattribute-list>` Variable Import and Substitution (`NAME,VALUE,IMPORT,QUERYPARAM` attributes)\n- `#EXT-X-GAP` (Skips loading GAP segments and parts. Skips playback of unbuffered program containing only GAP content and no suitable alternates. See [#2940](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fissues\u002F2940))\n\nParsed but missing feature support:\n\n- `#EXT-X-PRELOAD-HINT:\u003Cattribute-list>` (See [#5074](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fissues\u002F3988))\n  - #5074\n\n### Not Supported\n\nFor a complete list of issues, see [\"Top priorities\" in the Release Planning and Backlog project tab](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fprojects\u002F6). Codec support is dependent on the runtime environment (for example, not all browsers on the same OS support HEVC).\n\n- #EXT-X-PLAYLIST-TYPE is not used to determine if media playlists should be reloaded based on \"Expires\" header value (#7082)\n- `REQ-VIDEO-LAYOUT` is not used in variant filtering or selection\n- \"identity\" format `SAMPLE-AES` method keys with fmp4, aac, mp3, vtt... segments (MPEG-2 TS only)\n- MPEG-2 TS segments with FairPlay Streaming, PlayReady, or Widevine encryption\n- FairPlay Streaming legacy keys (For com.apple.fps.1_0 use native Safari playback)\n- MP3 elementary stream audio in IE and Edge (\u003C=18) on Windows 10 (See [#1641](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fissues\u002F1641) and [Microsoft answers forum](https:\u002F\u002Fanswers.microsoft.com\u002Fen-us\u002Fie\u002Fforum\u002Fall\u002Fie11-on-windows-10-cannot-play-hls-with-mp3\u002F2da994b5-8dec-4ae9-9201-7d138ede49d9))\n\n### Server-side-rendering (SSR) and `require` from a Node.js runtime\n\nYou can safely require this library in Node and **absolutely nothing will happen**. A dummy object is exported so that requiring the library does not throw an error. HLS.js is not instantiable in Node.js. See [#1841](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fpull\u002F1841) for more details.\n\n## Getting started with development\n\n[![Open in StackBlitz](https:\u002F\u002Fdeveloper.stackblitz.com\u002Fimg\u002Fopen_in_stackblitz.svg)](https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fvideo-dev\u002Fhls.js\u002Ftree\u002Fmaster?title=HLS.JS)\n\nFirst, checkout the repository and install the required dependencies\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js.git\ncd hls.js\n# After cloning or pulling from the repository, make sure all dependencies are up-to-date\nnpm install ci\n# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)\nnpm run dev\n# After making changes run the sanity-check task to verify all checks before committing changes\nnpm run sanity-check\n```\n\nThe dev server will host files on port 8000. Once started, the demo can be found running at http:\u002F\u002Flocalhost:8000\u002Fdemo\u002F.\n\nBefore submitting a PR, please see our [contribution guidelines](CONTRIBUTING.md).\nJoin the discussion on Slack via [video-dev.org](https:\u002F\u002Fvideo-dev.org) in #hlsjs for updates and questions about development.\n\n### Build tasks\n\nBuild all flavors (suitable for prod-mode\u002FCI):\n\n```\nnpm install ci\nnpm run build\n```\n\nOnly debug-mode artifacts:\n\n```\nnpm run build:debug\n```\n\nBuild and watch (customized dev setups where you'll want to host through another server - for example in a sub-module\u002Fproject)\n\n```\nnpm run build:watch\n```\n\nOnly specific flavor (known configs are: debug, dist, light, light-dist, demo):\n\n```\nnpm run build -- --env dist # replace \"dist\" by other configuration name, see above ^\n```\n\nNote: The \"demo\" config is always built.\n\n**NOTE:** `hls.light.*.js` dist files do not include alternate-audio, subtitles, CMCD, EME (DRM), or Variable Substitution support. In addition, the following types are not available in the light build:\n\n- `AudioStreamController`\n- `AudioTrackController`\n- `CuesInterface`\n- `EMEController`\n- `SubtitleStreamController`\n- `SubtitleTrackController`\n- `TimelineController`\n- `CmcdController`\n\n### Linter (ESlint)\n\nRun linter:\n\n```\nnpm run lint\n```\n\nRun linter with auto-fix mode:\n\n```\nnpm run lint:fix\n```\n\nRun linter with errors only (no warnings)\n\n```\nnpm run lint:quiet\n```\n\n### Formatting Code\n\nRun prettier to format code\n\n```\nnpm run prettier\n```\n\n### Type Check\n\nRun type-check to verify TypeScript types\n\n```\nnpm run type-check\n```\n\n### Automated tests (Mocha\u002FKarma)\n\nRun all tests at once:\n\n```\nnpm test\n```\n\nRun unit tests:\n\n```\nnpm run test:unit\n```\n\nRun unit tests in watch mode:\n\n```\nnpm run test:unit:watch\n```\n\nRun functional (integration) tests:\n\n```\nnpm run test:func\n```\n\n## Design\n\nAn overview of this project's design, it's modules, events, and error handling can be found [here](\u002Fdocs\u002Fdesign.md).\n\n## API docs and usage guide\n\n- [API and usage docs, with code examples](.\u002Fdocs\u002FAPI.md)\n- [Auto-Generated API Docs (Latest Release)](https:\u002F\u002Fhlsjs.video-dev.org\u002Fapi-docs\u002F)\n- [Auto-Generated API Docs (Development Branch)](https:\u002F\u002Fhlsjs-dev.video-dev.org\u002Fapi-docs\u002F)\n\n_Note you can access the docs for a particular version using \"[https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Ftree\u002Fdeployments](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Ftree\u002Fdeployments)\"_\n\n## Demo\n\n### Latest Release\n\n[https:\u002F\u002Fhlsjs.video-dev.org\u002Fdemo](https:\u002F\u002Fhlsjs.video-dev.org\u002Fdemo)\n\n### Master\n\n[https:\u002F\u002Fhlsjs-dev.video-dev.org\u002Fdemo](https:\u002F\u002Fhlsjs-dev.video-dev.org\u002Fdemo)\n\n### Specific Version\n\nFind the commit on [https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Ftree\u002Fdeployments](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Ftree\u002Fdeployments).\n\n[![](https:\u002F\u002Fopensource.saucelabs.com\u002Fimages\u002Fopensauce\u002Fpowered-by-saucelabs-badge-gray.png?sanitize=true)](https:\u002F\u002Fsaucelabs.com)\n\nThis project is tested with BrowserStack.\nThis project is tested with SauceLabs.\n\n## Compatibility\n\nHLS.js is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video\u002FMP4' mime-type inputs.\n\nHLS.js is supported on:\n\n- Chrome 39+ for Android\n- Chrome 39+ for Desktop\n- Firefox 41+ for Android\n- Firefox 42+ for Desktop\n- Edge for Windows 10+\n- Safari 9+ for macOS 10.11+\n- Safari for iPadOS 13+\n- Safari for iOS 17.1+ since HLS version [1.5.0](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Freleases\u002Ftag\u002Fv1.5.0) using Managed Media Source (MMS) [WebKit blog](https:\u002F\u002Fwebkit.org\u002Fblog\u002F14735\u002Fwebkit-features-in-safari-17-1\u002F)\n\nA [Promise polyfill](https:\u002F\u002Fgithub.com\u002Ftaylorhakes\u002Fpromise-polyfill) is required in browsers missing native promise support.\n\n**Please note:**\n\nSafari browsers (iOS, iPadOS, and macOS) have built-in HLS support through the plain video \"tag\" source URL. See the example below (Using HLS.js) to run appropriate feature detection and choose between using HLS.js or natively built-in HLS support.\n\nWhen a platform has neither MediaSource nor native HLS support, the browser cannot play HLS.\n\n_Keep in mind that if the intention is to support HLS on multiple platforms, beyond those compatible with HLS.js, the HLS streams need to strictly follow the specifications of RFC8216, especially if apps, smart TVs, and set-top boxes are to be supported._\n\nFind a support matrix of the MediaSource API here: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FMediaSource\n\n## Using HLS.js\n\n### Installation\n\nPrepackaged builds are included [with each release](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Freleases). Or install the hls.js as a dependency\nof your project:\n\n```sh\nnpm install --save hls.js\n```\n\nA canary channel is also available if you prefer to work off the development branch (master):\n\n```\nnpm install hls.js@canary\n```\n\n### Embedding HLS.js\n\nDirectly include dist\u002Fhls.js or dist\u002Fhls.min.js in a script tag on the page. This setup prioritizes HLS.js MSE playback over\nnative browser support for HLS playback in HTMLMediaElements:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhls.js@1\">\u003C\u002Fscript>\n\u003C!-- Or if you want the latest version from the main branch -->\n\u003C!-- \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhls.js@canary\">\u003C\u002Fscript> -->\n\u003Cvideo id=\"video\">\u003C\u002Fvideo>\n\u003Cscript>\n  var video = document.getElementById('video');\n  var videoSrc = 'https:\u002F\u002Ftest-streams.mux.dev\u002Fx36xhzz\u002Fx36xhzz.m3u8';\n  if (Hls.isSupported()) {\n    var hls = new Hls();\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n  }\n  \u002F\u002F HLS.js is not supported on platforms that do not have Media Source\n  \u002F\u002F Extensions (MSE) enabled.\n  \u002F\u002F\n  \u002F\u002F When the browser has built-in HLS support (check using `canPlayType`),\n  \u002F\u002F we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video\n  \u002F\u002F element through the `src` property. This is using the built-in support\n  \u002F\u002F of the plain video element, without using HLS.js.\n  else if (video.canPlayType('application\u002Fvnd.apple.mpegurl')) {\n    video.src = videoSrc;\n  }\n\u003C\u002Fscript>\n```\n\n#### Alternative setup\n\nTo check for native browser support first and then fallback to HLS.js, swap these conditionals. See [this comment](https:\u002F\u002Fgithub.com\u002Fvideo-dev\u002Fhls.js\u002Fpull\u002F2954#issuecomment-670021358) to understand some of the tradeoffs.\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhls.js@1\">\u003C\u002Fscript>\n\u003C!-- Or if you want the latest version from the main branch -->\n\u003C!-- \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhls.js@canary\">\u003C\u002Fscript> -->\n\u003Cvideo id=\"video\">\u003C\u002Fvideo>\n\u003Cscript>\n  var video = document.getElementById('video');\n  var videoSrc = 'https:\u002F\u002Ftest-streams.mux.dev\u002Fx36xhzz\u002Fx36xhzz.m3u8';\n  \u002F\u002F\n  \u002F\u002F First check for native browser HLS support\n  \u002F\u002F\n  if (video.canPlayType('application\u002Fvnd.apple.mpegurl')) {\n    video.src = videoSrc;\n    \u002F\u002F\n    \u002F\u002F If no native HLS support, check if HLS.js is supported\n    \u002F\u002F\n  } else if (Hls.isSupported()) {\n    var hls = new Hls();\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n  }\n\u003C\u002Fscript>\n```\n\n#### Ensure correct time in video\n\nHLS transcoding of an original video file often pushes the time of the first frame a bit. If you depend on having an exact match of frame times between original video and HLS stream, you need to account for this:\n\n```javascript\nlet tOffset = 0;\nconst getAppendedOffset = (eventName, { frag }) => {\n  if (frag.type === 'main' && frag.sn !== 'initSegment' && frag.elementaryStreams.video) {\n    const { start, startDTS, startPTS, maxStartPTS, elementaryStreams } = frag;\n    tOffset = elementaryStreams.video.startPTS - start;\n    hls.off(Hls.Events.BUFFER_APPENDED, getAppendedOffset);\n    console.log('video timestamp offset:', tOffset, { start, startDTS, startPTS, maxStartPTS, elementaryStreams });\n  }\n}\nhls.on(Hls.Events.BUFFER_APPENDED, getAppendedOffset);\n\u002F\u002F and account for this offset, for example like this:\nconst video = document.querySelector('video');\nvideo.addEventListener('timeupdate', () => setTime(Math.max(0, video.currentTime - tOffset))\nconst seek = (t) => video.currentTime = t + tOffset;\nconst getDuration = () => video.duration - tOffset;\n```\n\nFor more embed and API examples see [docs\u002FAPI.md](.\u002Fdocs\u002FAPI.md).\n\n## CORS\n\nAll HLS resources must be delivered with [CORS headers](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FAccess_control_CORS) permitting `GET` requests.\n\n## Video Control\n\nVideo is controlled through HTML `\u003Cvideo>` element `HTMLVideoElement` methods, events and optional UI controls (`\u003Cvideo controls>`).\n\n## Build a Custom UI\n\n- [Media Chrome](https:\u002F\u002Fgithub.com\u002Fmuxinc\u002Fmedia-chrome)\n\n## Player Integration\n\nThe following players integrate HLS.js for HLS playback:\n\n- [JW Player](https:\u002F\u002Fwww.jwplayer.com)\n- [Akamai Adaptive Media Player (AMP)](https:\u002F\u002Fwww.akamai.com\u002Fus\u002Fen\u002Fsolutions\u002Fproducts\u002Fmedia-delivery\u002Fadaptive-media-player.jsp)\n- [BridTV Player](https:\u002F\u002Fwww.brid.tv)\n- [Clappr](https:\u002F\u002Fgithub.com\u002Fclappr\u002Fclappr)\n- [Flowplayer](https:\u002F\u002Fwww.flowplayer.org) through [flowplayer-hlsjs](https:\u002F\u002Fgithub.com\u002Fflowplayer\u002Fflowplayer-hlsjs)\n- [MediaElement.js](https:\u002F\u002Fwww.mediaelementjs.com)\n- [KalturaPlayer](https:\u002F\u002Fdeveloper.kaltura.com) through [kaltura-player-js](https:\u002F\u002Fgithub.com\u002Fkaltura\u002Fkaltura-player-js#readme)\n- [Videojs](https:\u002F\u002Fvideojs.com) through [Videojs-hlsjs](https:\u002F\u002Fgithub.com\u002Fbenjipott\u002Fvideojs-hlsjs)\n- [Videojs](https:\u002F\u002Fvideojs.com) through [videojs-hls.js](https:\u002F\u002Fgithub.com\u002Fstreamroot\u002Fvideojs-hls.js). hls.js is integrated as a SourceHandler -- new feature in Video.js 5.\n- [Videojs](https:\u002F\u002Fvideojs.com) through [videojs-contrib-hls.js](https:\u002F\u002Fgithub.com\u002FPeer5\u002Fvideojs-contrib-hls.js). Production ready plug-in with full fallback compatibility built-in.\n- [Fluid Player](https:\u002F\u002Fwww.fluidplayer.com)\n- [OpenPlayerJS](https:\u002F\u002Fwww.openplayerjs.com), as part of the [OpenPlayer project](https:\u002F\u002Fgithub.com\u002Fopenplayerjs)\n- [CDNBye](https:\u002F\u002Fgithub.com\u002Fcdnbye\u002Fhlsjs-p2p-engine), a p2p engine for hls.js powered by WebRTC Datachannel.\n- [M3U IPTV](http:\u002F\u002Fm3u-ip.tv\u002Fbrowser\u002F)\n- [ArtPlayer](https:\u002F\u002Fartplayer.org\u002F?libs=https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fhls.js\u002F1.5.17\u002Fhls.min.js&example=hls)\n- [IPTV Player](https:\u002F\u002Fiptvplayer.stream), A free web-based HLS player that lets you play HLS,DASH and MP4 streams\n\n### They use HLS.js in production!\n\n|                                                                                                                                                              |                                                                                                                                                                         |                                                                                                                                                                |                                                                                                                                                                                                                                         |\n| :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n|                 [\u003Cimg src=\"https:\u002F\u002Fi.cdn.turner.com\u002Fadultswim\u002Fbig\u002Fimg\u002Fglobal\u002Fadultswim.jpg\" width=\"120\">](https:\u002F\u002Fwww.adultswim.com\u002Fstreams)                 |                              [\u003Cimg src=\"https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F5497190?s=200&v=4\" width=\"120\">](https:\u002F\u002Fwww.akamai.com)                               |       [\u003Cimg src=\"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Fthumb\u002F1\u002F1a\u002FCanal%2B.svg\u002F2000px-Canal%2B.svg.png\" width=\"120\">](https:\u002F\u002Fwww.canalplus.fr)       |                                                                 [\u003Cimg src=\"https:\u002F\u002Favatars2.githubusercontent.com\u002Fu\u002F115313\" width=\"120\">](https:\u002F\u002Fwww.dailymotion.com)                                                                  |\n|     [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F4006693\u002F44003595-baff193c-9e8f-11e8-9848-7bb91563499f.png\" width=\"120\">](https:\u002F\u002Ffreshlive.tv)      |           [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F360826\u002F231535440-7cf075f1-bf38-4640-a0a7-d9ff74a1e396.png\" width=\"120\">](https:\u002F\u002Fwww.mux.com\u002F)           |                        [\u003Cimg src=\"https:\u002F\u002Favatars1.githubusercontent.com\u002Fu\u002F12554082?s=240\" width=\"120\">](https:\u002F\u002Fwww.foxsports.com.au)                         |                                          [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F244265\u002F12556435\u002Fdfaceb48-c353-11e5-971b-2c4429725469.png\" width=\"120\">](https:\u002F\u002Fwww.globo.com)                                           |\n|                          [\u003Cimg src=\"https:\u002F\u002Fimages.gunosy.com\u002Flogo\u002Fgunosy_icon_company_logo.png\" width=\"120\">](https:\u002F\u002Fgunosy.com)                           |      [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1480052\u002F35802840-f8e85b8a-0a71-11e8-8eb2-eee323e3f159.png\" width=\"120\">](https:\u002F\u002Fwww.gl-systemhaus.de\u002F)       |       [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F6525783\u002F20801836\u002F700490de-b7ea-11e6-82bd-e249f91c7bae.jpg\" width=\"120\">](https:\u002F\u002Fnettrek.de)       |                                         [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F244265\u002F12556385\u002F999aa884-c353-11e5-9102-79df54384498.png\" width=\"120\">](https:\u002F\u002Fwww.nytimes.com\u002F)                                         |\n|    [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F1798553\u002F20356424\u002Fba158574-ac24-11e6-95e1-1ae591b11a0a.png\" width=\"120\">](https:\u002F\u002Fwww.peer5.com\u002F)    |         [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F4909096\u002F20925062\u002Fe26e6fc8-bbb4-11e6-99a5-d4762274a342.png\" width=\"120\">](https:\u002F\u002Fwww.qbrick.com)          |          [\u003Cimg src=\"https:\u002F\u002Fwww.radiantmediaplayer.com\u002Fimages\u002Fradiantmediaplayer-new-logo-640.jpg\" width=\"120\">](https:\u002F\u002Fwww.radiantmediaplayer.com\u002F)          |                                                             [\u003Cimg src=\"https:\u002F\u002Fwww.rts.ch\u002Fhummingbird-static\u002Fimages\u002Flogos\u002Flogo_marts.svg\" width=\"120\">](https:\u002F\u002Fwww.rts.ch)                                                             |\n| [\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F12702747\u002F19316434\u002F0a3601de-9067-11e6-85e2-936b1cb099a0.png\" width=\"120\">](https:\u002F\u002Fwww.snapstream.com\u002F) |                    [\u003Cimg src=\"https:\u002F\u002Fpamediagroup.com\u002Fwp-content\u002Fuploads\u002F2019\u002F05\u002FStreamAMG-Logo-RGB.png\" width=\"120\">](https:\u002F\u002Fwww.streamamg.com\u002F)                     |            [\u003Cimg src=\"https:\u002F\u002Fstreamsharkio.sa.metacdn.com\u002Fwp-content\u002Fuploads\u002F2015\u002F10\u002Fstreamshark-dark.svg\" width=\"120\">](https:\u002F\u002Fstreamshark.io\u002F)             | [\u003Cimg src=\"https:\u002F\u002Fcamo.githubusercontent.com\u002F9580f10e9bfa8aa7fba52c5cb447bee0757e33da\u002F68747470733a2f2f7777772e7461626c6f74762e636f6d2f7374617469632f696d616765732f7461626c6f5f6c6f676f2e706e67\" width=\"120\">](https:\u002F\u002Fmy.tablotv.com\u002F) |\n|  [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F2803310\u002F34083705-349c8fd0-e375-11e7-92a6-5c38509f4936.png\" width=\"120\">](https:\u002F\u002Fwww.streamroot.io\u002F)   |           [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F360826\u002F231538721-156a865d-a505-45e7-a362-dafbaf2b182f.png\" width=\"120\">](https:\u002F\u002Fwww.ted.com\u002F)           |              [\u003Cimg src=\"https:\u002F\u002Fwww.seeklogo.net\u002Fwp-content\u002Fuploads\u002F2014\u002F12\u002Ftwitter-logo-vector-download.jpg\" width=\"120\">](https:\u002F\u002Ftwitter.com\u002F)              |                                                                 [\u003Cimg src=\"https:\u002F\u002Fplayer.clevercast.com\u002Fimg\u002Fclevercast.png\" width=\"120\">](https:\u002F\u002Fwww.clevercast.com)                                                                  |\n|                        [\u003Cimg src=\"https:\u002F\u002Fplayer.mtvnservices.com\u002Fedge\u002Fhosted\u002FViacom_logo.svg\" width=\"120\">](https:\u002F\u002Fwww.viacom.com\u002F)                        |             [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1181974\u002F29248959-efabc440-802d-11e7-8050-7c1f4ca6c607.png\" width=\"120\">](https:\u002F\u002Fvk.com\u002F)              |                         [\u003Cimg src=\"https:\u002F\u002Favatars0.githubusercontent.com\u002Fu\u002F5090060?s=200&v=4\" width=\"120\">](https:\u002F\u002Fwww.jwplayer.com)                         |                                          [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fkaltura\u002Fkaltura-player-js\u002Fmaster\u002Fdocs\u002Fimages\u002Fkaltura-logo.svg\" width=\"120\">](https:\u002F\u002Fcorp.kaltura.com\u002F)                                           |\n|                          [\u003Cimg src=\"https:\u002F\u002Fshowmax.akamaized.net\u002Fe\u002Flogo\u002Fshowmax_black.png\" width=\"120\">](https:\u002F\u002Ftech.showmax.com)                          | [\u003Cimg src=\"https:\u002F\u002Fstatic3.1tv.ru\u002Fassets\u002Fweb\u002Flogo-ac67852f1625b338f9d1fb96be089d03557d50bfc5790d5f48dc56799f59dec6.svg\" width=\"120\" height=\"120\">](https:\u002F\u002Fwww.1tv.ru\u002F) |       [\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F1480052\u002F40482633-c013ebce-5f55-11e8-96d5-b776415de0ce.png\" width=\"120\">](https:\u002F\u002Fwww.zdf.de)        |                                                                  [\u003Cimg src=\"https:\u002F\u002Fcms-static.brid.tv\u002Fimg\u002Fbrid-logo-120x120.jpg\" width=\"120\">](https:\u002F\u002Fwww.brid.tv\u002F)                                                                   |\n|                                                            [cdn77](https:\u002F\u002Fstreaming.cdn77.com\u002F)                                                             |                                  [\u003Cimg src=\"https:\u002F\u002Favatars0.githubusercontent.com\u002Fu\u002F7442371?s=200&v=4\" width=\"120\">](https:\u002F\u002Fr7.com\u002F)                                  | [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FNovage\u002Fp2p-media-loader\u002Fgh-pages\u002Fimages\u002Fp2pml-logo.png\" width=\"120\">](https:\u002F\u002Fgithub.com\u002FNovage\u002Fp2p-media-loader) |                                                              [\u003Cimg src=\"https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F45617200?s=400\" width=\"120\">](https:\u002F\u002Fkayosports.com.au)                                                               |\n|    [\u003Cimg src=\"https:\u002F\u002Favatars1.githubusercontent.com\u002Fu\u002F5279615?s=400&u=9771a216836c613f1edf4afe71cfc69d4c5657ed&v=4\" width=\"120\">](https:\u002F\u002Fflosports.tv)     |                  [\u003Cimg src=\"https:\u002F\u002Fwww.logolynx.com\u002Fimages\u002Flogolynx\u002Fc6\u002Fc67a2cb3ad33a82b5518f8ad8f124703.png\" width=\"120\">](https:\u002F\u002Fglobal.axon.com\u002F)                   |                    [\u003Cimg src=\"https:\u002F\u002Fstatic.rutube.ru\u002Fstatic\u002Fimg\u002Fsvg\u002Flogo_rutube_black_color_154x25.svg\" width=\"120\">](https:\u002F\u002Frutube.ru\u002F)                    |                                                 [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Faaskaoui\u002Flabra-flex-assets\u002Fmaster\u002Flabra-flex.png\" width=\"120\">](https:\u002F\u002Flabra-flex.world\u002F)                                                 |\n\n## Chrome\u002FFirefox integration\n\nmade by [gramk](https:\u002F\u002Fgithub.com\u002Fgramk\u002Fchrome-hls), plays hls from address bar and m3u8 links\n\n- Chrome [native-hls](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fnative-hls-playback\u002Femnphkkblegpebimobpbekeedfgemhof)\n- Firefox [native-hls](https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fnative_hls_playback\u002F)\n\n## License\n\nHLS.js is released under [Apache 2.0 License](LICENSE)\n","HLS.js 是一个用于在浏览器中播放 HLS（HTTP Live Streaming）的 JavaScript 库，支持 MSE（Media Source Extensions）。该项目的核心功能包括对 VOD 和直播播放列表的支持、DVR 功能、多种音视频容器格式（如 MPEG-2 TS、Fragmented MP4 等）以及对 AES-128 加密和 EME DRM 的支持。技术上，HLS.js 采用 TypeScript 编写，并使用 Babel 和 Rollup 进行编译与打包。它适合于需要在网页上实现高质量视频流播放的应用场景，特别是那些要求兼容各种设备和浏览器的在线视频平台或直播服务。","2026-06-11 02:56:32","top_language"]