x264 HDR video does not work in safari

[drajvver]

What version of Hls.js are you using?

1.5.10

What browser (including version) are you using?

Safari 17.5

What OS (including version) are you using?

macOS Sonoma 14.5

Test stream

https://dev-testing.b-cdn.net/hlsjs/2/playlist.m3u8

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

Not setup steps per se, but some explanation here. Testing streams are: https://dev-testing.b-cdn.net/hlsjs/1/master.m3u8 and https://dev-testing.b-cdn.net/hlsjs/2/playlist.m3u8

While the first one that is generated by FFmpeg doesn't play as a master playlist using native HLS, the variant playlist themselves play just fine, which would suggest that the codecs are supported, just the master playlist is incorrect (?) mediastreamvalidator doesn't seem to say antyhing that would indicate obvious errors besides this one (which may be the actual problem for native playback issue):

Error: Variant requires playlist declared video range
--> Detail:  Playlist attribute should be PQ
--> Source:  https://dev-testing.b-cdn.net/hlsjs/1/master.m3u8
--> Compare: 480p/video.m3u8

Second playlist, that is generated by Shaka packager from the same source files works just fine, as both the master and variant playlists, but still fails to play via hls.js

Checklist

• [X] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• [X] The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• [X] The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• [X] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [X] There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Using safari, set source as either https://dev-testing.b-cdn.net/hlsjs/1/master.m3u8 or https://dev-testing.b-cdn.net/hlsjs/2/playlist.m3u8

Expected behaviour

The video should play

What actually happened?

The video fails to play using hls.js

Console output

[Log] [log] > – "destroy" (hls.js, line 30098)
[Log] [log] > – "detachMedia" (hls.js, line 30134)
[Log] [log] > – "[buffer-controller]:" – "media source detaching" (hls.js, line 19834)
[Log] Using Hls.js config: – {debug: true, enableWorker: true, lowLatencyMode: true, …} (hls-demo.js, line 24436)
{debug: true, enableWorker: true, lowLatencyMode: true, backBufferLength: 90}Object
[Log] [log] > – "Debug logs enabled for \"Hls instance\" in hls.js version 1.5.12-0.canary.10367" (hls.js, line 525)
[Log] [log] > – "stopLoad" (hls.js, line 30183)
[Log] [log] > – "loadSource:https://dev-testing.b-cdn.net/hlsjs/2/playlist.m3u8" (hls.js, line 30151)
[Log] [log] > – "[stream-controller]:" – "Trigger BUFFER_RESET" (hls.js, line 29167)
[Log] [log] > – "attachMedia" (hls.js, line 30123)
[Log] [log] > – "[buffer-controller]:" – "created media source: ManagedMediaSource" (hls.js, line 19798)
[Log] [log] > – "[buffer-controller]:" – "Media source opened" (hls.js, line 19674)
[Warning] [warn] > – "[level-controller]:" – "One or more CODECS in variant not supported: {\"BANDWIDTH\":\"1582183\",\"AVERAGE-BANDWIDTH\":\"978178\",\"CODECS\":\"avc1.6e001e,mp4a.40.2\",\"RESOLUTIO…" (hls.js, line 27725)
"One or more CODECS in variant not supported: {\"BANDWIDTH\":\"1582183\",\"AVERAGE-BANDWIDTH\":\"978178\",\"CODECS\":\"avc1.6e001e,mp4a.40.2\",\"RESOLUTION\":\"640x360\",\"FRAME-RATE\":\"24.000\",\"VIDEO-RANGE\":\"PQ\",\"AUDIO\":\"audio\",\"CLOSED-CAPTIONS\":\"NONE\"}"
[Log] [log] > – "[stream-controller]:" – "STOPPED->ERROR" (hls.js, line 11310)
[Log] [log] > – "[audio-stream-controller]:" – "STOPPED->ERROR" (hls.js, line 11310)
[Log] [log] > – "stopLoad" (hls.js, line 30183)
[Log] [log] > – "[stream-controller]:" – "ERROR->STOPPED" (hls.js, line 11310)
[Log] [log] > – "[audio-stream-controller]:" – "ERROR->STOPPED" (hls.js, line 11310)
[Warning] Error event: – {type: "mediaError", details: "manifestIncompatibleCodecsError", fatal: true, …} (hls-demo.js, line 24774)
{type: "mediaError", details: "manifestIncompatibleCodecsError", fatal: true, url: "https://dev-testing.b-cdn.net/hlsjs/2/playlist.m3u8", error: Error: no level with compatible codecs found in manifest, …}Object
[Error] Fatal error : manifestIncompatibleCodecsError
	(anonymous function) (hls-demo.js:24849)
	emit (hls.js:17013)
	(anonymous function) (hls.js:27728)
[Log] [log] > – "recoverMediaError" (hls.js, line 30227)
[Log] [log] > – "detachMedia" (hls.js, line 30134)
[Log] [log] > – "[buffer-controller]:" – "media source detaching" (hls.js, line 19834)
[Log] [log] > – "attachMedia" (hls.js, line 30123)
[Log] [log] > – "[buffer-controller]:" – "created media source: ManagedMediaSource" (hls.js, line 19798)
[Log] [log] > – "[buffer-controller]:" – "Media source opened" (hls.js, line 19674)

Chrome media internals output

No response