]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-ENDLIST<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-MEDIA-SEQUENCE=<n><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-TARGETDURATION=<n><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-DISCONTINUITY<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-DISCONTINUITY-SEQUENCE=<n><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-BYTERANGE=<n>[@<o>]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-MAP:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-KEY:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (</code>METHOD=SAMPLE-AES<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is only supports with MPEG-2 TS segments)<br />- </code>#EXT-X-PROGRAM-DATE-TIME:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-START:TIME-OFFSET=<n><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-SERVER-CONTROL:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-PART-INF:PART-TARGET=<n><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-PART:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-SKIP:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Delta Playlists<br />- </code>#EXT-X-RENDITION-REPORT:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#EXT-X-DATERANGE:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Metadata<br />- </code>#EXT-X-DEFINE:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Variable Import and Substitution (</code>NAME,VALUE,IMPORT,QUERYPARAM<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attributes)<br />- </code>#EXT-X-GAP<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Skips loading GAP segments and parts. Skips playback of unbuffered program containing only GAP content and no suitable alternates. See <a href="https://github.com/video-dev/hls.js/issues/2940" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#2940</a>)</p><p class="my-3">The following tags are added to their respective fragment's attribute list but are not implemented in streaming and playback.</p><p class="my-3">- </code>#EXT-X-BITRATE<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Not used in ABR controller)</p><p class="my-3">Parsed but missing feature support</p><p class="my-3">- </code>#EXT-X-PRELOAD-HINT:<attribute-list><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (See <a href="https://github.com/video-dev/hls.js/issues/3988" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#5074</a>)<br /> - #5074</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">For a complete list of issues, see <a href="https://github.com/video-dev/hls.js/projects/6" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">"Top priorities" in the Release Planning and Backlog project tab</a>. Codec support is dependent on the runtime environment (for example, not all browsers on the same OS support HEVC).</p><p class="my-3">- Advanced variant selection based on runtime media capabilities (See issues labeled <a href="https://github.com/video-dev/hls.js/labels/media-capabilities" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>media-capabilities<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>)<br />- HLS Content Steering<br />- HLS Interstitials<br />- </code>#EXT-X-GAP<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> filling <a href="https://github.com/video-dev/hls.js/issues/2940" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#2940</a><br />- </code>#EXT-X-I-FRAME-STREAM-INF<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> I-frame Media Playlist files<br />- </code>SAMPLE-AES<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with fmp4, aac, mp3, vtt... segments (MPEG-2 TS only)<br />- FairPlay, PlayReady, Widevine DRM with MPEG-2 TS segments<br />- FairPlay legacy keys (For com.apple.fps.1_0 use native Safari playback)<br />- Advanced variant selection based on runtime media capabilities (See issues labeled <a href="https://github.com/video-dev/hls.js/labels/media-capabilities" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>media-capabilities<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>)<br />- MP3 elementary stream audio in IE and Edge (<=18) on Windows 10 (See <a href="https://github.com/video-dev/hls.js/issues/1641" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#1641</a> and <a href="https://answers.microsoft.com/en-us/ie/forum/all/ie11-on-windows-10-cannot-play-hls-with-mp3/2da994b5-8dec-4ae9-9201-7d138ede49d9" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Microsoft answers forum</a>)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">You can safely require this library in Node and <strong>absolutely nothing will happen</strong>. A dummy object is exported so that requiring the library does not throw an error. HLS.js is not instantiable in Node.js. See <a href="https://github.com/video-dev/hls.js/pull/1841" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#1841</a> for more details.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Getting started with development</h2></p><p class="my-3"><a href="https://developer.stackblitz.com/img/open_in_stackblitz.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![Open in StackBlitz</a>](https://stackblitz.com/github/video-dev/hls.js/tree/master?title=HLS.JS)</p><p class="my-3">First, checkout the repository and install the required dependencies</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />git clone https://github.com/video-dev/hls.js.git<br />cd hls.js<br /><h1 class="text-2xl font-bold mt-6 mb-4">After cloning or pulling from the repository, make sure all dependencies are up-to-date</h1><br />npm install ci<br /><h1 class="text-2xl font-bold mt-6 mb-4">Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)</h1><br />npm run dev<br /><h1 class="text-2xl font-bold mt-6 mb-4">After making changes run the sanity-check task to verify all checks before committing changes</h1><br />npm run sanity-check<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The dev server will host files on port 8000. Once started, the demo can be found running at http://localhost:8000/demo/.</p><p class="my-3">Before submitting a PR, please see our <a href="CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contribution guidelines</a>.<br />Join the discussion on Slack via <a href="https://video-dev.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">video-dev.org</a> in #hlsjs for updates and questions about development.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Build all flavors (suitable for prod-mode/CI):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm install ci<br />npm run build<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Only debug-mode artifacts:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run build:debug<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Build and watch (customized dev setups where you'll want to host through another server - for example in a sub-module/project)</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run build:watch<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Only specific flavor (known configs are: debug, dist, light, light-dist, demo):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run build -- --env dist # replace "dist" by other configuration name, see above ^<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Note: The "demo" config is always built.</p><p class="my-3"><strong>NOTE:</strong> </code>hls.light.*.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 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:</p><p class="my-3">- </code>AudioStreamController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>AudioTrackController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>CuesInterface<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>EMEController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>SubtitleStreamController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>SubtitleTrackController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>TimelineController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>CmcdController<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Run linter:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run lint<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Run linter with auto-fix mode:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run lint:fix<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Run linter with errors only (no warnings)</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run lint:quiet<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Run prettier to format code</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run prettier<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Run type-check to verify TypeScript types</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run type-check<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Run all tests at once:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm test<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Run unit tests:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run test:unit<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Run unit tests in watch mode:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run test:unit:watch<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Run functional (integration) tests:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm run test:func<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Design</h2></p><p class="my-3">An overview of this project's design, it's modules, events, and error handling can be found <a href="/docs/design.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">here</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API docs and usage guide</h2></p><p class="my-3">- <a href="./docs/API.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">API and usage docs, with code examples</a><br />- <a href="https://hlsjs.video-dev.org/api-docs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Auto-Generated API Docs (Latest Release)</a><br />- <a href="https://hlsjs-dev.video-dev.org/api-docs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Auto-Generated API Docs (Development Branch)</a></p><p class="my-3">_Note you can access the docs for a particular version using "<a href="https://github.com/video-dev/hls.js/tree/deployments" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://github.com/video-dev/hls.js/tree/deployments</a>"_</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Demo</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><a href="https://hlsjs.video-dev.org/demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://hlsjs.video-dev.org/demo</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><a href="https://hlsjs-dev.video-dev.org/demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://hlsjs-dev.video-dev.org/demo</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Find the commit on <a href="https://github.com/video-dev/hls.js/tree/deployments" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://github.com/video-dev/hls.js/tree/deployments</a>.</p><p class="my-3"><a href="https://opensource.saucelabs.com/images/opensauce/powered-by-saucelabs-badge-gray.png?sanitize=true" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![</a>](https://saucelabs.com)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Compatibility</h2></p><p class="my-3">HLS.js is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.</p><p class="my-3">HLS.js is supported on:</p><p class="my-3">- Chrome 39+ for Android<br />- Chrome 39+ for Desktop<br />- Firefox 41+ for Android<br />- Firefox 42+ for Desktop<br />- Edge for Windows 10+<br />- Safari 8+ for MacOS 10.10+<br />- Safari for ipadOS 13+</p><p class="my-3">A <a href="https://github.com/taylorhakes/promise-polyfill" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Promise polyfill</a> is required in browsers missing native promise support.</p><p class="my-3"><strong>Please note:</strong> iOS Safari on iPhone does not support the MediaSource API. This includes all browsers on iOS as well as apps using UIWebView and WKWebView.</p><p class="my-3">Safari 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.</p><p class="my-3">When a platform has neither MediaSource nor native HLS support, the browser cannot play HLS.</p><p class="my-3">_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._</p><p class="my-3">Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Using HLS.js</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Prepackaged builds are included <a href="https://github.com/video-dev/hls.js/releases" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">with each release</a>. Or install the hls.js as a dependency<br />of your project:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm install --save hls.js<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A canary channel is also available if you prefer to work off the development branch (master):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm install hls.js@canary<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Directly include dist/hls.js or dist/hls.min.js in a script tag on the page. This setup prioritizes HLS.js MSE playback over<br />native browser support for HLS playback in HTMLMediaElements:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script><br /><br /><br /><video id="video"></video><br /><script><br /> var video = document.getElementById('video');<br /> var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';<br /> if (Hls.isSupported()) {<br /> var hls = new Hls();<br /> hls.loadSource(videoSrc);<br /> hls.attachMedia(video);<br /> }<br /> // HLS.js is not supported on platforms that do not have Media Source<br /> // Extensions (MSE) enabled.<br /> //<br /> // When the browser has built-in HLS support (check using </code>canPlayType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">),<br /> // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video<br /> // element through the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property. This is using the built-in support<br /> // of the plain video element, without using HLS.js.<br /> //<br /> // Note: it would be more normal to wait on the 'canplay' event below however<br /> // on Safari (where you are most likely to find built-in HLS support) the<br /> // video.src URL must be on the user-driven white-list before a 'canplay'<br /> // event will be emitted; the last video event that can be reliably<br /> // listened-for when the URL is not on the white-list is 'loadedmetadata'.<br /> else if (video.canPlayType('application/vnd.apple.mpegurl')) {<br /> video.src = videoSrc;<br /> }<br /></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Alternative setup</p><p class="my-3">To check for native browser support first and then fallback to HLS.js, swap these conditionals. See <a href="https://github.com/video-dev/hls.js/pull/2954#issuecomment-670021358" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">this comment</a> to understand some of the tradeoffs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script><br /><br /><br /><video id="video"></video><br /><script><br /> var video = document.getElementById('video');<br /> var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';<br /> //<br /> // First check for native browser HLS support<br /> //<br /> if (video.canPlayType('application/vnd.apple.mpegurl')) {<br /> video.src = videoSrc;<br /> //<br /> // If no native HLS support, check if HLS.js is supported<br /> //<br /> } else if (Hls.isSupported()) {<br /> var hls = new Hls();<br /> hls.loadSource(videoSrc);<br /> hls.attachMedia(video);<br /> }<br /></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">For more embed and API examples see <a href="./docs/API.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">docs/API.md</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">CORS</h2></p><p class="my-3">All HLS resources must be delivered with <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CORS headers</a> permitting </code>GET<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> requests.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Video Control</h2></p><p class="my-3">Video is controlled through HTML </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element </code>HTMLVideoElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> methods, events and optional UI controls (</code><video controls>`).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Build a Custom UI</h2></p><p class="my-3">- <a href="https://github.com/muxinc/media-chrome" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Media Chrome</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Player Integration</h2></p><p class="my-3">The following players integrate HLS.js for HLS playback:</p><p class="my-3">- <a href="https://www.jwplayer.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JW Player</a><br />- <a href="https://www.akamai.com/us/en/solutions/products/media-delivery/adaptive-media-player.jsp" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Akamai Adaptive Media Player (AMP)</a><br />- <a href="https://www.brid.tv" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">BridTV Player</a><br />- <a href="https://github.com/clappr/clappr" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Clappr</a><br />- <a href="https://www.flowplayer.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Flowplayer</a> through <a href="https://github.com/flowplayer/flowplayer-hlsjs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">flowplayer-hlsjs</a><br />- <a href="https://www.mediaelementjs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MediaElement.js</a><br />- <a href="https://developer.kaltura.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">KalturaPlayer</a> through <a href="https://github.com/kaltura/kaltura-player-js#readme" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">kaltura-player-js</a><br />- <a href="https://videojs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Videojs</a> through <a href="https://github.com/benjipott/videojs-hlsjs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Videojs-hlsjs</a><br />- <a href="https://videojs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Videojs</a> through <a href="https://github.com/streamroot/videojs-hls.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">videojs-hls.js</a>. hls.js is integrated as a SourceHandler -- new feature in Video.js 5.<br />- <a href="https://videojs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Videojs</a> through <a href="https://github.com/Peer5/videojs-contrib-hls.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">videojs-contrib-hls.js</a>. Production ready plug-in with full fallback compatibility built-in.<br />- <a href="https://www.fluidplayer.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Fluid Player</a><br />- <a href="https://www.openplayerjs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">OpenPlayerJS</a>, as part of the <a href="https://github.com/openplayerjs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">OpenPlayer project</a><br />- <a href="https://github.com/cdnbye/hlsjs-p2p-engine" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CDNBye</a>, a p2p engine for hls.js powered by WebRTC Datachannel.<br />- <a href="http://m3u-ip.tv/browser/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">M3U IPTV</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| | | | |<br />| :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |<br />| <a href="https://www.adultswim.com/streams" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://i.cdn.turner.com/adultswim/big/img/global/adultswim.jpg" width="120"></a> | <a href="https://www.akamai.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars3.githubusercontent.com/u/5497190?s=200&v=4" width="120"></a> | <a href="https://www.canalplus.fr" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Canal%2B.svg/2000px-Canal%2B.svg.png" width="120"></a> | <a href="https://www.dailymotion.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars2.githubusercontent.com/u/115313" width="120"></a> |<br />| <a href="https://freshlive.tv" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/4006693/44003595-baff193c-9e8f-11e8-9848-7bb91563499f.png" width="120"></a> | <a href="https://www.mux.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/360826/231535440-7cf075f1-bf38-4640-a0a7-d9ff74a1e396.png" width="120"></a> | <a href="https://www.foxsports.com.au" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars1.githubusercontent.com/u/12554082?s=240" width="120"></a> | <a href="https://www.globo.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/244265/12556435/dfaceb48-c353-11e5-971b-2c4429725469.png" width="120"></a> |<br />| <a href="https://gunosy.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://images.gunosy.com/logo/gunosy_icon_company_logo.png" width="120"></a> | <a href="https://www.gl-systemhaus.de/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/1480052/35802840-f8e85b8a-0a71-11e8-8eb2-eee323e3f159.png" width="120"></a> | <a href="https://nettrek.de" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/6525783/20801836/700490de-b7ea-11e6-82bd-e249f91c7bae.jpg" width="120"></a> | <a href="https://www.nytimes.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/244265/12556385/999aa884-c353-11e5-9102-79df54384498.png" width="120"></a> |<br />| <a href="https://www.peer5.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/1798553/20356424/ba158574-ac24-11e6-95e1-1ae591b11a0a.png" width="120"></a> | <a href="https://www.qbrick.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/4909096/20925062/e26e6fc8-bbb4-11e6-99a5-d4762274a342.png" width="120"></a> | <a href="https://www.radiantmediaplayer.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://www.radiantmediaplayer.com/images/radiantmediaplayer-new-logo-640.jpg" width="120"></a> | <a href="https://www.rts.ch" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://www.rts.ch/hummingbird-static/images/logos/logo_marts.svg" width="120"></a> |<br />| <a href="https://www.snapstream.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cloud.githubusercontent.com/assets/12702747/19316434/0a3601de-9067-11e6-85e2-936b1cb099a0.png" width="120"></a> | <a href="https://www.streamamg.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://pamediagroup.com/wp-content/uploads/2019/05/StreamAMG-Logo-RGB.png" width="120"></a> | <a href="https://streamshark.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://streamsharkio.sa.metacdn.com/wp-content/uploads/2015/10/streamshark-dark.svg" width="120"></a> | <a href="https://my.tablotv.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/9580f10e9bfa8aa7fba52c5cb447bee0757e33da/68747470733a2f2f7777772e7461626c6f74762e636f6d2f7374617469632f696d616765732f7461626c6f5f6c6f676f2e706e67" width="120"></a> |<br />| <a href="https://www.streamroot.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/2803310/34083705-349c8fd0-e375-11e7-92a6-5c38509f4936.png" width="120"></a> | <a href="https://www.ted.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/360826/231538721-156a865d-a505-45e7-a362-dafbaf2b182f.png" width="120"></a> | <a href="https://twitter.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://www.seeklogo.net/wp-content/uploads/2014/12/twitter-logo-vector-download.jpg" width="120"></a> | <a href="https://www.clevercast.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://player.clevercast.com/img/clevercast.png" width="120"></a> |<br />| <a href="https://www.viacom.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://player.mtvnservices.com/edge/hosted/Viacom_logo.svg" width="120"></a> | <a href="https://vk.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/1181974/29248959-efabc440-802d-11e7-8050-7c1f4ca6c607.png" width="120"></a> | <a href="https://www.jwplayer.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars0.githubusercontent.com/u/5090060?s=200&v=4" width="120"></a> | <a href="https://corp.kaltura.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/kaltura/kaltura-player-js/master/docs/images/kaltura-logo.svg" width="120"></a> |<br />| <a href="https://tech.showmax.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://showmax.akamaized.net/e/logo/showmax_black.png" width="120"></a> | <a href="https://www.1tv.ru/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://static3.1tv.ru/assets/web/logo-ac67852f1625b338f9d1fb96be089d03557d50bfc5790d5f48dc56799f59dec6.svg" width="120" height="120"></a> | <a href="https://www.zdf.de" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://user-images.githubusercontent.com/1480052/40482633-c013ebce-5f55-11e8-96d5-b776415de0ce.png" width="120"></a> | <a href="https://www.brid.tv/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://cms-static.brid.tv/img/brid-logo-120x120.jpg" width="120"></a> |<br />| <a href="https://streaming.cdn77.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">cdn77</a> | <a href="https://r7.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars0.githubusercontent.com/u/7442371?s=200&v=4" width="120"></a> | <a href="https://github.com/Novage/p2p-media-loader" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/Novage/p2p-media-loader/gh-pages/images/p2pml-logo.png" width="120"></a> | <a href="https://kayosports.com.au" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars3.githubusercontent.com/u/45617200?s=400" width="120"></a> |<br />| <a href="https://flosports.tv" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://avatars1.githubusercontent.com/u/5279615?s=400&u=9771a216836c613f1edf4afe71cfc69d4c5657ed&v=4" width="120"></a> | <a href="https://global.axon.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><img src="https://www.logolynx.com/images/logolynx/c6/c67a2cb3ad33a82b5518f8ad8f124703.png" width="120"></a> | | |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Chrome/Firefox integration</h2></p><p class="my-3">made by <a href="https://github.com/gramk/chrome-hls" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">gramk</a>, plays hls from address bar and m3u8 links</p><p class="my-3">- Chrome <a href="https://chrome.google.com/webstore/detail/native-hls-playback/emnphkkblegpebimobpbekeedfgemhof" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">native-hls</a><br />- Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/native_hls_playback/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">native-hls</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">HLS.js is released under <a href="LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Apache 2.0 License</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"%40tianfeng98%2Fhls.js\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"%40tianfeng98/hls.js\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"@tianfeng98/hls.js - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"HLS.js is a JavaScript library that supports playing MPEG-TS and HEVC encoded HLS streams in browsers with support for MSE.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>@tianfeng98/hls.js