72 lines
1.7 KiB
Markdown
72 lines
1.7 KiB
Markdown
# HDR Web Plugin
|
|
|
|
Drop-in JavaScript plugin that gives normal web pages a pure-black HDR media
|
|
stage. It detects `dynamic-range`, `color-gamut`, and CSS wide-gamut support,
|
|
then injects an HDR PNG or hardware-decoded HDR10 video layer when the output
|
|
path reports HDR capability. SDR-only environments keep a low-power fallback.
|
|
|
|
## Run
|
|
|
|
```bash
|
|
npm run build
|
|
npm run media:hdr
|
|
npm test
|
|
npm start
|
|
```
|
|
|
|
Open `http://localhost:4173`.
|
|
|
|
## Inject Into A Page
|
|
|
|
```html
|
|
<script src="/dist/hdr-web-plugin.js?v=0.6.2" defer></script>
|
|
```
|
|
|
|
The script auto-runs in the browser. You can tune it without writing custom JS:
|
|
|
|
```html
|
|
<script
|
|
src="/dist/hdr-web-plugin.js?v=0.6.2"
|
|
defer
|
|
data-hdr-media="true"
|
|
data-hdr-media-type="image"
|
|
data-hdr-image-src="/media/hdr-landing-prism.png"
|
|
data-hdr-text="true"
|
|
data-hdr-text-boost="2.8"
|
|
data-hdr-blackout="true"
|
|
data-hdr-badge="true"
|
|
></script>
|
|
```
|
|
|
|
For video-backed motion:
|
|
|
|
```html
|
|
<script
|
|
src="/dist/hdr-web-plugin.js?v=0.6.2"
|
|
defer
|
|
data-hdr-media="true"
|
|
data-hdr-media-type="video"
|
|
data-hdr-video-src="/media/hdr-galaxy-fireworks.mp4"
|
|
data-hdr-webm-src="/media/hdr-galaxy-fireworks.webm"
|
|
data-hdr-effects="false"
|
|
data-hdr-overlay="false"
|
|
data-hdr-scanlines="false"
|
|
data-hdr-blackout="true"
|
|
data-hdr-badge="true"
|
|
></script>
|
|
```
|
|
|
|
The plugin also exposes:
|
|
|
|
```js
|
|
window.HDREnhancer.enhance({ intensity: 1.2, text: true, textBoost: 2.8 });
|
|
window.HDREnhancer.disable();
|
|
window.HDREnhancer.toggle();
|
|
```
|
|
|
|
Set `data-hdr-auto="false"` when you want to load the plugin but start it
|
|
manually.
|
|
|
|
Real HDR output still depends on the physical display, OS HDR setting, browser
|
|
support, and source media. Unsupported environments get an SDR neon fallback.
|