# HDR video on a web page: Safari, Chrome, Firefox, Edge

You graded a clip in HDR. On your phone it glows. On your website it looks flat, or gray, or too bright. This note sets out what the browser makers themselves say, as of 17 September 2026, and where they say nothing. Each fact links to its source. Where only a forum or a blog makes a claim, this note says so.

The short version: HDR video on the web depends on four things at once. The browser, the operating system, the display, and the power settings. Change one and the same file looks different.

## What the browser makers say

| Browser | First-party statement | Source |
|---|---|---|
| Safari | HDR video shipped in 2020, in Safari 14.0 | [WebKit blog](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/) |
| Firefox on Windows | HDR video playback arrived in Firefox 153.0 (21 July 2026) and needs HDR mode on in Windows display settings | [Firefox 153.0 release notes](https://www.firefox.com/en-US/firefox/153.0/releasenotes/) |
| Firefox on macOS | HDR video "has been available for some time" | [Mozilla graphics blog](https://mozillagfx.wordpress.com/2026/07/14/hdr-video-in-firefox-for-windows-tech-retrospective/) |
| Chrome | An older post covers VP9 Profile 2 10-bit HDR on Windows 10 with HDR mode on | [Chrome developer blog](https://developer.chrome.com/blog/media-updates-in-chrome-63-64) |
| Edge | No Edge-specific HDR page found | none |

### Safari

The WebKit team says Safari has played HDR video since Safari 14.0. The same post says Safari 26.0 adds HDR images on iOS 26, iPadOS 26, macOS 26 and visionOS 26, plus a CSS property called `dynamic-range-limit`. Read it on the [WebKit blog](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/).

### Firefox

Firefox 153.0 brought HDR video to Windows, and the release notes say it needs HDR switched on for the display in Windows settings. Before that it was experimental in Nightly 148, per [Mozilla's graphics team](https://mozillagfx.wordpress.com/2026/01/16/experimental-high-dynamic-range-video-playback-on-windows-in-firefox-nightly-148/). Their later [retrospective](https://mozillagfx.wordpress.com/2026/07/14/hdr-video-in-firefox-for-windows-tech-retrospective/) says macOS support has existed for some time, and that HDR video cannot take rounded corners or blur filters. If your page puts rounded corners on a video, keep that in mind when you test in Firefox.

### Chrome

The newest first-party Chrome statement found on HDR playback itself is the [Chrome 63 and 64 media post](https://developer.chrome.com/blog/media-updates-in-chrome-63-64). It says VP9 Profile 2 10-bit video plays in HDR on Windows 10 Fall Creators Update, with HDR mode on, an HDR-capable GPU and an HDR display. No newer first-party statement on HLG, PQ or HEVC HDR playback in Chrome was found. A community guide on GitHub claims wider support, but it is not from Google.

Google did post on 14 May 2026 that new SMPTE ST 2094-50 metadata, worked on with Apple and NBCUniversal, is coming to "an upcoming release of Chrome". Read it on [Google's blog](https://blog.google/chromium/bringing-a-clearer-more-consistent-hdr-video-experience-to-chrome/). That is a plan, not a shipped feature.

### Edge

No first-party Edge page about HDR video was found. Microsoft does document the Windows side, covered below. Some third-party articles claim that displays with only "Stream HDR video" support do not get HDR in Edge. That is not confirmed by Microsoft.

## Why it looks washed out

A "washed out" clip is often a system setting, not the file. Check these first.

- **Windows.** Open Settings, then System, then Display, then HDR. There is a toggle for HDR video streaming. Microsoft says HDR streaming is off by default on battery. See [Microsoft support](https://support.microsoft.com/en-us/windows/hardware/display-graphics/stream-hdr-video-on-windows). A long-running Firefox bug is titled "When HDR in Windows is turned on, videos have wrong colors" ([bug 1832971](https://bugzilla.mozilla.org/show_bug.cgi?id=1832971)), so check both states.
- **Mac.** Apple lists which Macs play HDR video: MacBook Pro and Air from 2018, iMac from 2020, Mac mini from 2018, Mac Studio from 2022, Mac Pro from 2019. With "Optimize video streaming while on battery" on, HDR plays as SDR on battery. See [Apple support](https://support.apple.com/en-md/102205). Plug in before you judge a grade.

## Detecting HDR is not the same as playing it

CSS has media queries that describe the screen. They tell you about the display, not whether a given video will play in HDR.

- `dynamic-range`: [caniuse](https://caniuse.com/mdn-css_at-rules_media_dynamic-range) lists Chrome 98+, Edge 98+, Safari 13.1+, Firefox 100+ and iOS Safari 13.4+.
- `video-dynamic-range`: [caniuse](https://caniuse.com/mdn-css_at-rules_media_video-dynamic-range) lists Firefox as supported and Safari as not, while other sources say WebKit shipped it. The sources conflict, so trust neither without a device test.
- `dynamic-range-limit`, which tames HDR next to SDR content, is marked "Limited availability" on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/dynamic-range-limit).

## What inkoji does

inkoji does not guess from a media query. A video tile can carry two files: an H.264 file that every browser plays, and an HDR twin. The page asks the browser one direct question:

```
canPlayType('video/mp4; codecs="dvh1.08.07"')
```

Only if the browser says it can play Dolby Vision does the page switch to the HDR file and show a small "HDR" label. Everyone else gets the H.264 file, so nobody sees a broken or gray video. A video plays only while it is on screen, muted and looping. Every media tile reserves its box before the bytes arrive, so the page does not jump.

A maker's page at [inkoji.com/cyberyogi](https://inkoji.com/cyberyogi) opens with an HDR reel marked HDR. Open it on an HDR phone and on an older laptop and compare. You can read the tile list as data too:

```
curl https://inkoji.com/cyberyogi.json
```

Uploading your own video is part of the paid year; see [pricing](/pricing). If you are deciding where your film work should live, read [where to put your AI films](/notes/where-to-put-your-ai-films).

## What to do next

1. Export an H.264 file for everyone first. Treat HDR as the extra.
2. Plug in your Mac, or switch Windows HDR on, before you judge color.
3. Test on real devices: one HDR phone, one Mac, one Windows machine with HDR on and off, in each browser you care about.
4. Avoid rounded corners and blur on the video element if Firefox matters to you.
5. Put the clip on a page that falls back to the plain file, and check that page on a screen that is not HDR.