{"_id":"@mux/mux-background-video","_rev":"9-202244a00d2dee60d1077d3fe941efd9","name":"@mux/mux-background-video","dist-tags":{"latest":"0.2.3"},"versions":{"0.0.1":{"name":"@mux/mux-background-video","version":"0.0.1","keywords":["hls","video","engine","video","mux","player","web-component","react"],"author":{"name":"@muxinc"},"license":"MIT","_id":"@mux/mux-background-video@0.0.1","maintainers":[{"name":"a-bro","email":"adam@adambrown.io"},{"name":"jsanford8","email":"justin@mux.com"},{"name":"diehlad","email":"adiehl@mux.com"},{"name":"dylanjha","email":"dylanjhaveri@gmail.com"},{"name":"brownsarahv","email":"sbrown@mux.com"},{"name":"electra-mux","email":"echong@mux.com"},{"name":"danielhayes","email":"dhayes@mux.com"},{"name":"jacquimanzi","email":"jacquimanzi@gmail.com"},{"name":"heyimdaveatmux","email":"dkiss@mux.com"},{"name":"mmcc","email":"matt@mmcc.io"},{"name":"rpeckmux","email":"rpeck@mux.com"},{"name":"nidhik82","email":"nkulkarni@mux.com"},{"name":"heff","email":"npm@heff.me"},{"name":"luwes","email":"me@wesleyluyten.com"},{"name":"phil-mux","email":"pcluff@mux.com"},{"name":"mux-npmjs","email":"mux-npmjs@mux.com"},{"name":"stephenmcrowe","email":"scrowe@mux.com"},{"name":"wfrankenberg","email":"wfrankenberg@mux.com"},{"name":"jwienmux","email":"jwien@mux.com"},{"name":"darius-at-mux","email":"dcepulis@mux.com"},{"name":"cpillsburymux","email":"cpillsbury@mux.com"}],"dist":{"shasum":"eac6c1a88cb90e93e00b43ae723b7ce4e3810961","tarball":"https://registry.npmjs.org/@mux/mux-background-video/-/mux-background-video-0.0.1.tgz","fileCount":65,"integrity":"sha512-P09Qeg2Xt9esQ5SDi4Jh7x98QO8cgsVxJfCISIH0841SnOtXBbpxEPYuSelW9EpYnps85WwK2vT0DuMHBoyKrg==","signatures":[{"sig":"MEYCIQDwOx7+BmvVo2xT09P6zITQfHsSHbFzXiniiLHS6n6gNgIhAJRhLoYNpe9KBSR4BHt+s7ACt9ZqA3H6zAtLivIYGuj1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":616126},"main":"dist/index.js","type":"module","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","default":"./dist/*.js"},"./*.js":{"import":"./dist/*.js","default":"./dist/*.js"},"./dist/*":{"import":"./dist/*","default":"./dist/*"}},"gitHead":"470507605a486a7db3766fce4835d126f0050e89","scripts":{"test":"web-test-runner","build":"run-s types \"build:** --\"","start":"run-p watch start:vercel","types":"tsc --outDir dist","watch":"run-p \"types -- -w\" \"build:** -- --watch=forever\"","start:vercel":"(cd examples/vercel-function && npm run start)","build:esm:core":"esbuild src/index.ts --bundle --minify --format=esm --outdir=dist","build:esm:html":"esbuild src/html.ts --bundle --minify --format=esm --outdir=dist","build:esm:react":"esbuild src/react.tsx --bundle --minify --format=esm --outdir=dist --external:react","test:browserstack":"web-test-runner --config web-test-runner.browserstack.config.mjs","setup:browserstack":"node scripts/setup-browserstack.js"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"_npmVersion":"10.9.2","description":"A super lightweight component and HLS engine for creating background videos using Mux HLS streams.","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.1","dotenv":"^17.2.2","esbuild":"^0.25.9","mux-embed":"^5.11.0","typescript":"^5.9.2","npm-run-all":"^4.1.5","@types/mocha":"^10.0.10","@types/react":"^19.1.12","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2","@web/test-runner-mocha":"^0.9.0","@web/dev-server-esbuild":"^1.0.4","@web/test-runner-browserstack":"^0.8.0"},"_npmOperationalInternal":{"tmp":"tmp/mux-background-video_0.0.1_1757097366186_0.6196188955038253","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@mux/mux-background-video","version":"0.1.0","keywords":["hls","video","engine","video","mux","player","web-component","react"],"author":{"name":"@muxinc"},"license":"MIT","_id":"@mux/mux-background-video@0.1.0","maintainers":[{"name":"mux-npmjs","email":"mux-npmjs@mux.com"}],"homepage":"https://github.com/muxinc/mux-background-video#readme","bugs":{"url":"https://github.com/muxinc/mux-background-video/issues"},"dist":{"shasum":"940a243221e8e077d7895be55a194a6ab8386d71","tarball":"https://registry.npmjs.org/@mux/mux-background-video/-/mux-background-video-0.1.0.tgz","fileCount":29,"integrity":"sha512-vxGljN2u4fZHc0V17dDf5gmdTtR62I/US3UGLUH14B/ZW3feRn4VGMx0cA8V79qdNzUZh7YsakMJzjFldwj2tw==","signatures":[{"sig":"MEUCIQD4tsWEGg6JnHkox9BhyO1SaGcedhUL3WqVzyDQtc5OPQIgFu8nNMLE5FswXIayUHVt8JEI1N65JFXCq7uv0s4QRSE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@mux%2fmux-background-video@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":84214},"main":"dist/index.js","type":"module","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","default":"./dist/*.js"},"./*.js":{"import":"./dist/*.js","default":"./dist/*.js"},"./dist/*":{"import":"./dist/*","default":"./dist/*"}},"gitHead":"983ec6b0b564ddaed1f4aa02d43af37acb7a585f","scripts":{"test":"web-test-runner","build":"run-s types \"build:** --\"","start":"run-p watch start:vercel","types":"tsc --outDir dist","watch":"run-p \"types -- -w\" \"build:** -- --watch=forever\"","start:vercel":"(cd examples/vercel-function && npm run start)","build:esm:core":"esbuild src/index.ts --bundle --minify --format=esm --outdir=dist","build:esm:html":"esbuild src/html.ts --bundle --minify --format=esm --outdir=dist","build:esm:react":"esbuild src/react.tsx --bundle --minify --format=esm --outdir=dist --external:react","test:browserstack":"web-test-runner --config web-test-runner.browserstack.config.mjs","setup:browserstack":"node scripts/setup-browserstack.js"},"_npmUser":{"name":"mux-npmjs","email":"mux-npmjs@mux.com"},"repository":{"url":"git+https://github.com/muxinc/mux-background-video.git","type":"git"},"_npmVersion":"10.8.2","description":"A super lightweight component and HLS engine for creating background videos using Mux HLS streams.","directories":{},"_nodeVersion":"20.19.4","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.1","dotenv":"^17.2.2","esbuild":"^0.25.9","mux-embed":"^5.11.0","typescript":"^5.9.2","npm-run-all":"^4.1.5","@types/mocha":"^10.0.10","@types/react":"^19.1.12","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2","@web/test-runner-mocha":"^0.9.0","@web/dev-server-esbuild":"^1.0.4","@web/test-runner-browserstack":"^0.8.0"},"_npmOperationalInternal":{"tmp":"tmp/mux-background-video_0.1.0_1757145887741_0.84016878837523","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@mux/mux-background-video","version":"0.2.0","keywords":["hls","video","engine","video","mux","player","web-component","react"],"author":{"name":"@muxinc"},"license":"MIT","_id":"@mux/mux-background-video@0.2.0","maintainers":[{"name":"jsanford8","email":"justin@mux.com"},{"name":"phil-mux","email":"pcluff@mux.com"},{"name":"mux-npmjs","email":"mux-npmjs@mux.com"}],"homepage":"https://github.com/muxinc/mux-background-video#readme","bugs":{"url":"https://github.com/muxinc/mux-background-video/issues"},"dist":{"shasum":"439e2e75e86f1725ed4bfa14e20a6c0df1ce479a","tarball":"https://registry.npmjs.org/@mux/mux-background-video/-/mux-background-video-0.2.0.tgz","fileCount":29,"integrity":"sha512-bsaaDmrHuCAOxG0NZDQZA99XpNZPJOtgFLr1MrB9X0Vs5R+n2ZK5SejRrDRP9EcesNEoMIi4eEM0uKAWmlk0lA==","signatures":[{"sig":"MEQCIF+azFyW4nD6iaUTkHeHwiTaoNWc7L23SucsfYtk/dsmAiA1Aw5XmA9q7GiKC/MnL7NuWnDVSsxserN4jvJcFJfBOw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@mux%2fmux-background-video@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":86286},"main":"dist/index.js","type":"module","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","default":"./dist/*.js"},"./*.js":{"import":"./dist/*.js","default":"./dist/*.js"},"./dist/*":{"import":"./dist/*","default":"./dist/*"}},"gitHead":"bf289261d1a41dc038196de808a188531e48c929","scripts":{"test":"web-test-runner","build":"run-s types \"build:** --\"","start":"run-p watch start:vercel","types":"tsc --outDir dist","watch":"run-p \"types -- -w\" \"build:** -- --watch=forever\"","start:vercel":"(cd examples/vercel-function && npm run start)","build:esm:core":"esbuild src/index.ts --bundle --minify --format=esm --outdir=dist","build:esm:html":"esbuild src/html.ts --bundle --minify --format=esm --outdir=dist","build:esm:react":"esbuild src/react.tsx --bundle --minify --format=esm --outdir=dist --external:react","test:browserstack":"web-test-runner --config web-test-runner.browserstack.config.mjs","setup:browserstack":"node scripts/setup-browserstack.js"},"_npmUser":{"name":"mux-npmjs","email":"mux-npmjs@mux.com"},"repository":{"url":"git+https://github.com/muxinc/mux-background-video.git","type":"git"},"_npmVersion":"10.8.2","description":"A super lightweight component and HLS engine for creating background videos using Mux HLS streams.","directories":{},"_nodeVersion":"20.19.6","_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.1","dotenv":"^17.2.2","esbuild":"^0.25.9","mux-embed":"^5.11.0","typescript":"^5.9.2","npm-run-all":"^4.1.5","@types/mocha":"^10.0.10","@types/react":"^19.1.12","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2","@web/test-runner-mocha":"^0.9.0","@web/dev-server-esbuild":"^1.0.4","@web/test-runner-browserstack":"^0.8.0"},"_npmOperationalInternal":{"tmp":"tmp/mux-background-video_0.2.0_1766247250850_0.5847854116400166","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@mux/mux-background-video","version":"0.2.3","description":"A super lightweight component and HLS engine for creating background videos using Mux HLS streams.","author":{"name":"@muxinc"},"license":"MIT","homepage":"https://github.com/muxinc/mux-background-video#readme","bugs":{"url":"https://github.com/muxinc/mux-background-video/issues"},"repository":{"type":"git","url":"git+https://github.com/muxinc/mux-background-video.git"},"type":"module","main":"dist/index.js","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.js"},"./dist/*":{"import":"./dist/*","default":"./dist/*"},"./*.js":{"import":"./dist/*.js","default":"./dist/*.js"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","default":"./dist/*.js"}},"scripts":{"build":"run-s types \"build:** --\"","build:esm:core":"esbuild src/index.ts --bundle --minify --format=esm --outdir=dist","build:esm:react":"esbuild src/react.tsx --bundle --minify --format=esm --outdir=dist --external:react","build:esm:html":"esbuild src/html.ts --bundle --minify --format=esm --outdir=dist","types":"tsc --outDir dist","watch":"run-p \"types -- -w\" \"build:** -- --watch=forever\"","start":"run-p watch start:vercel","start:vercel":"(cd examples/vercel-function && npm run start)","test":"web-test-runner","test:browserstack":"web-test-runner --config web-test-runner.browserstack.config.mjs","setup:browserstack":"node scripts/setup-browserstack.js"},"devDependencies":{"@open-wc/testing":"^4.0.0","@types/mocha":"^10.0.10","@types/react":"^19.1.12","@web/dev-server-esbuild":"^1.0.4","@web/test-runner":"^0.20.2","@web/test-runner-browserstack":"^0.8.0","@web/test-runner-mocha":"^0.9.0","dotenv":"^17.2.2","esbuild":"^0.25.9","mux-embed":"^5.11.0","npm-run-all":"^4.1.5","react":"^19.1.1","typescript":"^5.9.2"},"keywords":["hls","video","engine","video","mux","player","web-component","react"],"gitHead":"478642fc95fddf56a35f501fefb6b8f081c0550b","_id":"@mux/mux-background-video@0.2.3","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-J5e8KxvdAvHTDVYBI3iuiyKn6P3JYmYiCgIaxTgN/E3L/DXSSUoaP8Tuifbt/q8bJQatBXQ6IBBsOtGKVJN/JA==","shasum":"90849f787c8a7e778966c5079459cbdb2ecb1796","tarball":"https://registry.npmjs.org/@mux/mux-background-video/-/mux-background-video-0.2.3.tgz","fileCount":29,"unpackedSize":88320,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@mux%2fmux-background-video@0.2.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDpvLUpMEoButDQ5kcA2B4y1mxWx3HNCGOLdfIoGhFMLwIgGIYKUSX/HKijOHL/btylg3XZdmbwU1Jtae9miTINcU8="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:ec214d38-176e-41fe-bde3-9b0f3241221c"}},"directories":{},"maintainers":[{"name":"jsanford8","email":"justin@mux.com"},{"name":"dylanjha","email":"dylanjhaveri@gmail.com"},{"name":"phil-mux","email":"pcluff@mux.com"},{"name":"mux-npmjs","email":"mux-npmjs@mux.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mux-background-video_0.2.3_1776365249289_0.835916113645683"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-05T18:36:06.185Z","modified":"2026-04-16T18:47:29.994Z","0.0.1":"2025-09-05T18:36:06.443Z","0.1.0":"2025-09-06T08:04:47.940Z","0.2.0":"2025-12-20T16:14:11.037Z","0.2.3":"2026-04-16T18:47:29.426Z"},"bugs":{"url":"https://github.com/muxinc/mux-background-video/issues"},"author":{"name":"@muxinc"},"license":"MIT","homepage":"https://github.com/muxinc/mux-background-video#readme","keywords":["hls","video","engine","video","mux","player","web-component","react"],"repository":{"type":"git","url":"git+https://github.com/muxinc/mux-background-video.git"},"description":"A super lightweight component and HLS engine for creating background videos using Mux HLS streams.","maintainers":[{"name":"jsanford8","email":"justin@mux.com"},{"name":"dylanjha","email":"dylanjhaveri@gmail.com"},{"name":"phil-mux","email":"pcluff@mux.com"},{"name":"mux-npmjs","email":"mux-npmjs@mux.com"}],"readme":"# Mux Background Video\n\nA super lightweight component and HLS engine for creating background videos using Mux HLS streams.\n\n## Features\n\n- **Background Video**: Perfect for hero sections, landing pages, and immersive experiences\n- **HLS Video Support**: Built-in HLS video engine for smooth streaming\n- **React**: React component for easy integration\n- **Web Components**: Custom element for easy integration\n- **TypeScript Support**: Full TypeScript definitions included\n- **Lightweight**: Minimal bundle size with no dependencies\n- **Preload Control**: Control video preloading behavior\n- **Audio Control**: Optionally enable audio tracks for background videos\n- **Resolution Control**: Set maximum resolution for optimal performance\n\n## Installation\n\n```bash\nnpm install mux-embed # Enable Mux Data integration\nnpm install @mux/mux-background-video\n```\n\n## Usage\n\n> [!IMPORTANT]\n> Requires Mux [Basic](https://www.mux.com/docs/guides/use-video-quality-levels#basic) or [Premium](https://www.mux.com/docs/guides/use-video-quality-levels#premium) video quality. The [Plus](https://www.mux.com/docs/guides/use-video-quality-levels#plus) tier (and other classic HLS sources) is **not** supported because it serves MPEG-TS (`.ts`) segments, which this engine does not transmux.\n\n### HTMLCustom Element\n\nThe easiest way to use Mux Background Video is with the custom element:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Background Video</title>\n  <style>\n    html, \n    body {\n      height: 100%;\n    }\n\n    body {\n      margin: 0;\n      padding: 0;\n    }\n    \n    mux-background-video,\n    img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  </style>\n\n  <!-- (optional) Enable Mux Data integration -->\n  <script defer src=\"https://cdn.jsdelivr.net/npm/mux-embed\"></script>\n  <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@mux/mux-background-video/html/+esm\"></script>\n</head>\n<body>\n  <mux-background-video src=\"https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8\">\n    <img src=\"https://image.mux.com/YOUR_PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"Mux Background Video\" />\n  </mux-background-video>\n</body>\n</html>\n```\n\n### JavaScript Import\n\nYou can also import the custom element directly:\n\n```ts\nimport 'mux-embed'; // (optional) Enable Mux Data integration\nimport '@mux/mux-background-video/html';\n\n// The custom element is automatically registered\n// You can now use <mux-background-video> in your HTML\n```\n\n### React Component\n\nFor React applications, use the React component:\n\n```tsx\nimport 'mux-embed'; // (optional) Enable Mux Data integration\nimport { MuxBackgroundVideo } from '@mux/mux-background-video/react';\n\nfunction HeroSection() {\n  return (\n    <MuxBackgroundVideo src=\"https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8\">\n      <img src=\"https://image.mux.com/YOUR_PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"Mux Background Video\" />\n    </MuxBackgroundVideo>\n  );\n}\n```\n\n## Mux Data Integration\n\n[Mux data](https://www.mux.com/data) integrates with video players to provide detailed analytics and insights about video performance, which can be found in the Mux dashboard. Mux can also use this performance data to help improve the player and streaming. All that's required to use Mux data is including or importing the script. Once the script is included, Mux data will automatically be enabled for all background videos on the page.\n\n```html\n<script defer src=\"https://cdn.jsdelivr.net/npm/mux-embed\"></script>\n```\n\n## API Reference\n\n### HTML Custom Element: `<mux-background-video>`\n\nThe `<mux-background-video>` element automatically handles HLS streaming.\n\n#### Attributes\n\n- **`src`**: The Mux HLS stream URL (required)\n- **`max-resolution`**: Maximum resolution for the video (e.g., \"720p\", \"1080p\")\n- **`audio`**: Enable audio track (default: false)\n- **`preload`**: Controls video preloading behavior (default: auto)\n  - `\"none\"`: No preloading\n  - `\"metadata\"`: Preload only metadata\n  - `\"auto\"`: Preload video data\n\n#### HTML Structure\n\n```html\n<mux-background-video audio max-resolution=\"720p\" src=\"YOUR_STREAM_URL\">\n  <img src=\"https://image.mux.com/YOUR_PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"Mux Background Video\" />\n</mux-background-video>\n```\n\n#### JavaScript Attributes\n\nYou can also set attributes programmatically:\n\n```typescript\nconst element = document.querySelector('mux-background-video');\n\n// Set maximum resolution\nelement.setAttribute('max-resolution', '1080p');\n\n// Enable audio track\nelement.toggleAttribute('audio', true);\n\n// Set preload behavior\nelement.setAttribute('preload', 'metadata');\n\n// Set the stream URL\nelement.setAttribute('src', 'https://stream.mux.com/NEW_PLAYBACK_ID.m3u8');\n\n// Get current values\nconsole.log(element.getAttribute('src'));\nconsole.log(element.getAttribute('max-resolution'));\nconsole.log(element.hasAttribute('audio'));\nconsole.log(element.getAttribute('preload'));\n```\n\n### React Component: `MuxBackgroundVideo`\n\n#### Props\n\n- **`src`**: The Mux HLS stream URL (required)\n- **`maxResolution`**: Maximum resolution for the video (e.g., \"720p\", \"1080p\")\n- **`audio`**: Enable audio track (default: false)\n- **`preload`**: Controls video preloading behavior (default: auto)\n  - `\"none\"`: No preloading\n  - `\"metadata\"`: Preload only metadata\n  - `\"auto\"`: Preload video data\n\n\n#### Example\n\n```tsx\n<MuxBackgroundVideo\n  src=\"https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8\"\n  maxResolution=\"720p\"\n  audio={true}\n>\n  <img src=\"https://image.mux.com/YOUR_PLAYBACK_ID/thumbnail.webp?time=0\" alt=\"Mux Background Video\" />\n</MuxBackgroundVideo>\n```\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+ \n- npm or yarn\n\n### Setup\n\n1. Clone the repository:\n```bash\ngit clone <repository-url>\ncd mux-background-video\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm start\n```\n\n### Development Commands\n\n- **`npm start`**: Start development server with watch mode\n- **`npm run build`**: Build the project\n- **`npm run watch`**: Watch for changes and rebuild\n- **`npm test`**: Run tests locally\n- **`npm run test:browserstack`**: Run integration tests on BrowserStack\n- **`npm run setup:browserstack`**: Interactive setup for BrowserStack credentials\n\n### Testing\n\n#### Local Testing\n\nRun tests locally:\n```bash\nnpm test\n```\n\n\n### Development Server\n\nWhen running the dev server, you can use the following URL parameters:\n\n- **`PLAYBACK_ID`**: Set a custom Mux playback ID (defaults to demo video)\n- **`max-resolution`**: Set maximum resolution for the background video\n- **`audio`**: Enable or disable audio track (default: false)\n- **`preload`**: Set preload behavior (\"none\", \"metadata\", or \"auto\")\n- **`debug`**: Enable debug mode\n- **`nomuted`**: Disable muted attribute\n- **`noloop`**: Disable loop attribute\n- **`noautoplay`**: Disable autoplay attribute\n\nExample:\n```\nhttp://localhost:3000/PLAYBACK_ID?max-resolution=720p&audio=1&preload=metadata\n```\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Support\n\nFor issues and questions, please [open an issue](https://github.com/muxinc/mux-background-video/issues/new) on GitHub.\n","readmeFilename":"README.md"}