Why won't this encrypted HLS video play on iOS (but works on Windows Chrome via hls.js library)?

I am trying to play an MP4 test video.

My /home/vagrant/Code/example/public/hls_hls.keyInfo is:

https://example.com/hls.key
/home/vagrant/Code/example/public/hls_hls.key
467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a

My /home/vagrant/Code/example/public/hls_hls.key was generated using PHP: hex2bin('467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a')

The ffmpeg command for encrypting the video as HLS playlist with "ts" files:

'/usr/bin/ffmpeg' '-y' '-i' 'storage/app/sample_media2/2020-02-27/Sample_Videos_5.mp4' 
'-c:v' 'libx264' '-s:v' '1920x1080' '-crf' '20' '-sc_threshold' '0' '-g' '48' 
'-keyint_min' '48' '-hls_list_size' '0' 
'-hls_time' '10' '-hls_allow_cache' '0' '-b:v' '4889k' '-maxrate' '5866k' 
'-hls_segment_type' 'mpegts' '-hls_fmp4_init_filename' 'output_init.mp4' 
'-hls_segment_filename' 'storage/app/public/test/output_1080p_%04d.ts' 
'-hls_key_info_file' '/home/vagrant/Code/example/public/hls_hls.keyInfo' 
'-strict' '-2' '-threads' '12' 'storage/app/public/test/output_1080p.m3u8'

Then, I know from https://caniuse.com/#search=hls that Windows Chrome won't be able to play the HLS video without a library, so I use https://github.com/video-dev/hls.js/, and Windows Chrome successfully plays the encrypted video!

However, iOS Safari is unable to play it (with or without the hls.js library).

On iOS Safari, when I try to play the video, I see just a quick glimpse (less than a second) where the screen shows 0:15, so it must be reading and decrypting enough to know the correct duration of the video.

So, to debug, I log events:

const nativeHlsEvents = ['play', 'playing', 'abort', 'error', 'canplaythrough', 'waiting', 'loadeddata', 'loadstart', 'progress', 'timeupdate', 'volumechange'];
$.each(nativeHlsEvents, function (i, eventType) {
    video.addEventListener(eventType, (event) => {//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
        console.log(eventType, event);
        if (eventType === 'error') {
            console.error(video.error);//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
        }
    });
});

I see in the console log:

loadstart, {"isTrusted":true}
progress, {"isTrusted":true}
play, {"isTrusted":true}
waiting, {"isTrusted":true}
error, {"isTrusted":true}
video.error, {}

I don't know how to find more details about the error.

Note that even though Windows Chrome successfully plays the video, it too shows warnings in the console log:

{"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"TS packet did not start with 0x47","frag":{"...
{"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"no audio/video samples found","frag":{...

Where is my problem?

Solution

I would need to buy a newer iPhone.

I see at https://en.wikipedia.org/wiki/IPhone_6#Software and https://support.apple.com/guide/iphone/supported-iphone-models-iphe3fa5df43/ios that “6s” is the oldest hardware that iOS 13 supports, and https://caniuse.com/#search=hls says HLS needs >=13.2.