{"_id":"@biliblitz/yk-player","_rev":"4-0b60449fe97a0debaa7b298ad98e241c","name":"@biliblitz/yk-player","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.0":{"name":"@biliblitz/yk-player","version":"0.1.0","_id":"@biliblitz/yk-player@0.1.0","maintainers":[{"name":"swwind233","email":"swwind233@gmail.com"}],"dist":{"shasum":"d1d85245ac415a3d8c0154a7cc6dacfda83b5e06","tarball":"https://registry.npmjs.org/@biliblitz/yk-player/-/yk-player-0.1.0.tgz","fileCount":6,"integrity":"sha512-Xauo2fPnmPOBfmxNPZD9o2Z1KL/5+7TWG39Smm9doSUUaWvQAsgMRutO2DDnBK6Yrhr3JHNgNoq+gooXoAvUxQ==","signatures":[{"sig":"MEUCIQC7iBPiA7yExcv285PHllIgo0WiwLO/mxIYOekYzDtA3QIgOzI2sVZoiUh+0XylWBaloh24xD0JR6znXZtaPx1sHp4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32727},"type":"module","types":"./dist/yk-player.d.ts","module":"./dist/yk-player.js","exports":{".":{"types":"./dist/yk-player.d.ts","import":"./dist/yk-player.js"}},"gitHead":"dc5044bf047569d7d01d249cdb05a1cddeee0180","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"swwind233","email":"swwind233@gmail.com"},"_npmVersion":"11.17.0","description":"A modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).","directories":{},"_nodeVersion":"26.5.0","_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.3","vite":"^8.1.1","hls.js":"^1.6.16","typescript":"~6.0.2","vite-plugin-dts":"^5.0.3"},"peerDependencies":{"lit":"^3.3.3","hls.js":"^1.6.16"},"_npmOperationalInternal":{"tmp":"tmp/yk-player_0.1.0_1783823738904_0.8112501160548451","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@biliblitz/yk-player","version":"0.2.0","_id":"@biliblitz/yk-player@0.2.0","maintainers":[{"name":"swwind233","email":"swwind233@gmail.com"}],"homepage":"https://github.com/biliblitz/yk-player#readme","bugs":{"url":"https://github.com/biliblitz/yk-player/issues"},"dist":{"shasum":"40db1cc2f383c976862915666a497187ff699e4c","tarball":"https://registry.npmjs.org/@biliblitz/yk-player/-/yk-player-0.2.0.tgz","fileCount":6,"integrity":"sha512-Kljgng6RIvTDyQEuPpXzS1nYbWHidsKlrAUDuADDDJXMDy12BkN6R2BVUjZnMkShJTgh57/UcFwLKLIJbG4zmA==","signatures":[{"sig":"MEUCICaATx3oXFsQgWe9Cw5h1be7lJe+pKgeirFWAH0xKW04AiEAml9eLVzrsziV7UnyGq5UEc4Nb+t8gfo8ada1ZagX/lE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@biliblitz%2fyk-player@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":37950},"type":"module","types":"./dist/yk-player.d.ts","module":"./dist/yk-player.js","exports":{".":{"types":"./dist/yk-player.d.ts","import":"./dist/yk-player.js"}},"gitHead":"fce0c68e2dfc906ecd9742b2115f589805dfcd55","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9cc60e27-c0ec-4b1f-8819-a22c0c487e80"}},"repository":{"url":"git+https://github.com/biliblitz/yk-player.git","type":"git"},"_npmVersion":"11.16.0","description":"A modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).","directories":{},"_nodeVersion":"24.18.0","_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.3","vite":"^8.1.1","hls.js":"^1.6.16","typescript":"~6.0.2","vite-plugin-dts":"^5.0.3"},"peerDependencies":{"lit":"^3.3.3","hls.js":"^1.6.16"},"_npmOperationalInternal":{"tmp":"tmp/yk-player_0.2.0_1783830681015_0.33794223453136674","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@biliblitz/yk-player","version":"0.2.1","_id":"@biliblitz/yk-player@0.2.1","maintainers":[{"name":"swwind233","email":"swwind233@gmail.com"}],"homepage":"https://github.com/biliblitz/yk-player#readme","bugs":{"url":"https://github.com/biliblitz/yk-player/issues"},"dist":{"shasum":"a15fdec0a1a348a2171a1dc744700f9ae85f937d","tarball":"https://registry.npmjs.org/@biliblitz/yk-player/-/yk-player-0.2.1.tgz","fileCount":6,"integrity":"sha512-4ukDPh96bqdcyQES0emYAjGa7bARaiHmOn0zxl36srFjK7xegeEpBGN6mbq5L0iM2CoaiWMFzgQGYhkbJc7GAw==","signatures":[{"sig":"MEUCIDzXeMtrm11eVt+AIcMrAiLzd9I8gOJZkd7nxMh3KlSuAiEAuqJ8vr4crDM4GE/UVfQzePotRyaAAfh55//JGJiQZUM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@biliblitz%2fyk-player@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":38663},"type":"module","types":"./dist/yk-player.d.ts","module":"./dist/yk-player.js","exports":{".":{"types":"./dist/yk-player.d.ts","import":"./dist/yk-player.js"}},"gitHead":"98a175f6caba89ce44982fd271e39e647d57cdc5","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9cc60e27-c0ec-4b1f-8819-a22c0c487e80"}},"repository":{"url":"git+https://github.com/biliblitz/yk-player.git","type":"git"},"_npmVersion":"11.16.0","description":"A modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).","directories":{},"_nodeVersion":"24.18.0","_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.3","vite":"^8.1.1","hls.js":"^1.6.16","typescript":"~6.0.2","vite-plugin-dts":"^5.0.3"},"peerDependencies":{"lit":"^3.3.3","hls.js":"^1.6.16"},"_npmOperationalInternal":{"tmp":"tmp/yk-player_0.2.1_1784214654638_0.493237681417636","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@biliblitz/yk-player","version":"0.2.2","repository":{"type":"git","url":"git+https://github.com/biliblitz/yk-player.git"},"type":"module","module":"./dist/yk-player.js","types":"./dist/yk-player.d.ts","exports":{".":{"types":"./dist/yk-player.d.ts","import":"./dist/yk-player.js"}},"scripts":{"dev":"vite","build":"tsc && vite build","build:pages":"vite build --config vite.demo.config.ts","preview":"vite preview"},"peerDependencies":{"hls.js":"^1.6.16","lit":"^3.3.3"},"devDependencies":{"hls.js":"^1.6.16","lit":"^3.3.3","typescript":"~6.0.2","vite":"^8.1.1","vite-plugin-dts":"^5.0.3"},"gitHead":"d932e9e4451156cc6c0c177dfda8f601be99e41f","_id":"@biliblitz/yk-player@0.2.2","description":"A modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).","bugs":{"url":"https://github.com/biliblitz/yk-player/issues"},"homepage":"https://github.com/biliblitz/yk-player#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-MD7EqArE1WTCraBB57XcwLwD4nNyNdZmE4ekFV18NOysqkpI9Y3LzfuHt4E1HvGshq/XX5+kdDVH3RWNClwA0w==","shasum":"8777f18903483eb97d1d1bc19f2f61eea089264e","tarball":"https://registry.npmjs.org/@biliblitz/yk-player/-/yk-player-0.2.2.tgz","fileCount":6,"unpackedSize":38681,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@biliblitz%2fyk-player@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCjTXPUSoQ02WZhyM6orXHX9C1oQ8xUJAiOeDOgswz9wwIgCfAvnssN300XckYbPuqpgzRlpUlgdacFvMJw9WeRfbg="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9cc60e27-c0ec-4b1f-8819-a22c0c487e80"}},"directories":{},"maintainers":[{"name":"swwind233","email":"swwind233@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/yk-player_0.2.2_1784217008901_0.44630285076997045"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-12T02:35:38.700Z","modified":"2026-07-16T15:50:09.455Z","0.1.0":"2026-07-12T02:35:39.050Z","0.2.0":"2026-07-12T04:31:21.195Z","0.2.1":"2026-07-16T15:10:54.758Z","0.2.2":"2026-07-16T15:50:09.088Z"},"bugs":{"url":"https://github.com/biliblitz/yk-player/issues"},"homepage":"https://github.com/biliblitz/yk-player#readme","repository":{"type":"git","url":"git+https://github.com/biliblitz/yk-player.git"},"description":"A modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).","maintainers":[{"name":"swwind233","email":"swwind233@gmail.com"}],"readme":"# yk-player\n\nA modern m3u8 (HLS) player built with Web Components — usable in every project, whatever the framework (or none at all).\n\nBuilt on [Lit](https://lit.dev/) and [hls.js](https://github.com/video-dev/hls.js).\n\n![yk-player showcase](./docs/showcase.png)\n\n## Features\n\n- 🎛️ Full controller out of the box — play/pause, seek, volume, speed, fullscreen, auto-hiding controls\n- 💬 Subtitles (WebVTT) — switch between subtitle tracks declared in the HLS manifest\n- 🎚️ Bitrate switching — pick a quality level manually or let hls.js adapt automatically\n- 📺 Native HLS fallback on Safari, where hls.js isn't needed\n- 🌏 Built-in i18n (English, 日本語, 中文)\n- 📦 Ships as a standard custom element — works with any framework or none\n\nStreaming features like subtitles and adaptive bitrate come straight from [hls.js](https://github.com/video-dev/hls.js) — yk-player provides a clean controller UI on top of them.\n\n## Installation\n\n```sh\nnpm install @biliblitz/yk-player hls.js lit\n```\n\n`hls.js` and `lit` are peer dependencies, so install them alongside the package.\n\n## Quick Start\n\nImport the package once to register the `<yk-player>` custom element, then use it like a regular HTML tag:\n\n```ts\nimport \"@biliblitz/yk-player\";\n```\n\n```html\n<yk-player src=\"/videos/index.m3u8\" autoplay></yk-player>\n```\n\nThe element fills its container, so give it a size:\n\n```css\nyk-player {\n  width: 800px;\n  aspect-ratio: 16 / 9;\n}\n```\n\n### Attributes\n\n| Attribute  | Type      | Default | Description                                  |\n| ---------- | --------- | ------- | -------------------------------------------- |\n| `src`      | `string`  | `\"\"`    | URL of the HLS manifest (`.m3u8`)            |\n| `autoplay` | `boolean` | `false` | Start playback automatically                 |\n| `lang`     | `string`  | `\"en\"`  | UI language: `en`, `ja`, or `zh`             |\n\nAll attributes are reactive — updating `src` switches the source in place (playback state is preserved), and updating `lang` re-renders the UI in the new language.\n\n### Keyboard shortcuts\n\nClick the player once to focus it, then:\n\n| Key | Action |\n| --- | ------ |\n| `Space` / `k` | Play / pause |\n| `f` (or double-click) | Toggle fullscreen |\n| `m` | Toggle mute |\n| `c` | Toggle subtitles |\n| `←` / `→` | Seek −5s / +5s |\n| `j` / `l` | Seek −10s / +10s |\n| `↑` / `↓` | Volume up / down |\n| `0`–`9` | Jump to 0%–90% |\n| `Esc` | Close the settings menu |\n\n### Acts like a `<video>` element\n\n`<yk-player>` mirrors the `HTMLMediaElement` API, so you can treat it as a drop-in `<video>`:\n\n- **Methods**: `play()` (returns a promise, like native) and `pause()`\n- **Properties**: `currentTime`, `duration`, `paused`, `ended`, `volume`, `muted`, `playbackRate`\n- **Events**: all standard playback events are re-dispatched on the element — `play`, `pause`, `playing`, `waiting`, `seeking`, `seeked`, `timeupdate`, `durationchange`, `volumechange`, `ratechange`, `ended`, `error`, `loadedmetadata`, `canplay`, and the rest. Fatal hls.js failures fire `error` too, matching what native playback would do.\n\n```ts\nimport type { YkPlayer } from \"@biliblitz/yk-player\";\n\nconst player = document.querySelector<YkPlayer>(\"yk-player\")!;\nplayer.src = \"/another/index.m3u8\";\nplayer.lang = \"ja\";\n\nplayer.currentTime = 42;\nplayer.volume = 0.5;\nplayer.addEventListener(\"timeupdate\", () => console.log(player.currentTime));\nplayer.addEventListener(\"ended\", () => console.log(\"done\"));\n```\n\n## Development\n\n```sh\npnpm install\npnpm dev      # start the demo page (index.html) with Vite\npnpm build    # type-check and build the library to dist/\npnpm preview  # preview the production build\n```\n\nThe demo page at the project root lets you switch between sample sources and UI languages. Place sample HLS streams under `public/` (e.g. `public/pv1.m3u8`).\n","readmeFilename":"README.md"}