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

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• 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

[robwalch]

HLS.js can't play AVC High 10 in browsers that do not support it via MSE. Both MediaSource isTypeSupported and addSourceBuffer fail which is why neither playlist will result in playback.

While [ https://dev-testing.b-cdn.net/hlsjs/1/master.m3u8 ] doesn't play as a master playlist using native HLS, [ https://dev-testing.b-cdn.net/hlsjs/1/1080p.m3u8 ] play just fine [using native HLS], which would suggest that the codecs are supported, just the master playlist is incorrect (?)

When loading the media playlists (e.g. 1080p.m3u8) HLS.js parses the codec from the init segment correctly ("avc1.6e0028"). It skips the isTypeSupported check since this is the only variant, but then fails on addSourceBuffer:

[stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[/avc1.6e0028]
...
[buffer-controller] creating sourceBuffer(video/mp4;codecs=avc1.6e0028)
[buffer-controller] error while trying to add sourceBuffer: The operation is not supported."
[warn] Could not resolve bufferAddCodecError ("The operation is not supported.")

Use HEVC to provide HDR variants that are compatible across a wide range of devices, with AVC SD variants for fallback. The "HLS authoring specification" is a good starting point.

I can't speak to what is happening with native HLS or shaka-player. HLS.js is handling this media as it should. Please file an issue via FeedBack Assistant to request support for AVC High 10 profile in MSE if this is a use-case you need to work in Safari.