Playback fails on iOS and Mac-Safari for HLS url that has colon

I am testing my hls.js-based player with a content url that has a colon in it:

https://video.mysite.com/97215bca-58d9-4fdb-bccd-ecca1f6c4bce/smil:ABC_ABCDEFGHIJ.smil/playlist.m3u8

This works fine for Chrome/Firefox/Edge on Windows and works on Android too.

However, when I try playback on Mac Big Sur Safari 14 or iOS 14 it fails to fetch any media chunks. I get a successful response for the playlists:

GET https://video.mysite.com/97215bca-58d9-4fdb-bccd-ecca1f6c4bce/smil:ABC_ABCDEFGHIJ.smil/playlist.m3u8
200 OK
GET https://video.mysite.com/97215bca-58d9-4fdb-bccd-ecca1f6c4bce/smil:ABC_ABCDEFGHIJ.smil/chunklist_b1128000.m3u8
200 OK

The chunklist content looks fine

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:5
#EXT-X-MEDIA-SEQUENCE:714
#EXT-X-DISCONTINUITY-SEQUENCE:0
#EXTINF:4.004,
media_b1128000_714.ts
#EXTINF:4.004,
media_b1128000_715.ts
#EXTINF:4.004,
media_b1128000_716.ts

But depending on the iOS device either I never see any requests for the media*.ts files, or they show up as cancelled (appear to timeout). The player eventually gets a decode error.

The player uses hls.js for playback on most devices (all the working ones), but on iOS and I believe Safari it uses built-in Apple HLS playback. My theory is that engine does not like the colon in the url, but I don't have any control over that format. Has anyone experienced any issues like this with Apple?

Solution

Turns out the issue was with the content of the m3u8.

#EXT-X-STREAM-INF:BANDWIDTH=1128000,CODECS="H264,AAC",RESOLUTION=1024x576

Apple devices didn't like the CODECS that were being specified. The provider removed the CODECS part and the playback started working.