Streaming Videos stopped working on iOS 17.4

[RaviJayagopal]

Description

Hi, my WordPress plugin which uses Videojs suddenly stopped working on v17.4 on both iPhones and iPads. Specifically an HLS encrypted video that stopped working (client's website):

https://learn.jdmis.edu.sg/test-encoding-mar-2024/

The above video plays fine on every other OS and device. Just not the above.

I tried updating to videojs 8.10.0, but that didn't help.

Appreciate your help.

Thanks!

Reduced test case

https://learn.jdmis.edu.sg/test-encoding-mar-2024/

Steps to reproduce

1. Go to https://learn.jdmis.edu.sg/test-encoding-mar-2024/ on any iOS device using iOS v17.4 or later
2. Video just keeps "loading".

Errors

No response

What version of Video.js are you using?

8.10.0

Video.js plugins used.

http streaming

What browser(s) including version(s) does this occur with?

Both Safari and Chrome

What OS(es) and version(s) does this occur with?

iOS v17.4 and above

[yxiong20]

Have you found out any useful information at all during last week?

[alawson007]

Hi @RaviJayagopal any leads regarding this? We have been experiencing the same issue on iOS17.4

[mister-ben]

iOS is native playback so it's very unlikely to be anything Video.js can influence. Does the stream behave the same in a simple <video> element? Is there anything in common with the videos that don't work, esp the encoding?

[amolmeshram2509]

Hls videos stopped working on client site on IOS 17.4. Any solution or configuration to solve this issue ?

[markmeeus]

We are experiencing the same behaviour in our app.
There are no initial errors in the console, and in the network tab we see the request to the first fragment appearing.
After a minute or so, the following message appears on the screen and in the console:

"ERROR:""(CODE:3 MEDIA_ERR_DECODE)" "The media playback was aborted due to a corruption problem or because the media used features your browser did not support."

We are using Azure Media Services, and the videos are h264 encoded. This could be relevant as the fragments are loaded cross origin.
Also, our videos are encrypted

[yxiong20]

We 'fixed' the issue by replacing the encryption key from inline data URI with a https file URL. Hope this helps others facing the same problem.

[markmeeus]

ah, we are also using data-uri's, actually our entire manifest is a data-uri.

[markmeeus]

I created a ticket on webkits bugzilla.
https://bugs.webkit.org/show_bug.cgi?id=272525

[yxiong20]

I was told iOS 17.5 has the fix, you can download the beta release to verify.

[vipulfirodiya]

We 'fixed' the issue by replacing the encryption key from inline data URI with a https file URL. Hope this helps others facing the same problem.

Can you elaborate more on this?
We are having a file containing encryption key, we are making blob out of it and assigning it to the EXT-X-KEY in .m3u8 file.
It is working for iOS versions before 17.4, but after that it stopped working.

[yxiong20]

We 'fixed' the issue by replacing the encryption key from inline data URI with a https file URL. Hope this helps others facing the same problem.

Can you elaborate more on this? We are having a file containing encryption key, we are making blob out of it and assigning it to the EXT-X-KEY in .m3u8 file. It is working for iOS versions before 17.4, but after that it stopped working.

Yes it should work if you keep it in the separate file and reference it through https link in your m3u8 file.

[vipulfirodiya]

@yxiong20 No it is not working.

[markmeeus]

We have tested 17.5 beta and our problem persists unfortunately.

[markmeeus]

using https for the key does seems to work

[yxiong20]

using https for the key does seems to work

That's great!

[jyavenard]

This https://learn.jdmis.edu.sg/test-encoding-mar-2024/ is not using HLS with an iPhone 17.4.1 but using a MP4 video.

Do you have a test case using a HLS stream?

[markmeeus]

We created a demo
that has this issue with only video element. It works on Safari, but not Mobile Safari on iOS 17.4. I guess this ticket can be closed because it looks like a webkit issue.

[markmeeus]

Issue should be fixed in 17.5 (21F62)

[RaviJayagopal]

@markmeeus the demo isn't working. Not sure if you deleted the files.

Issue should be fixed in 17.5 (21F62)

Does that mean it is verified that Apple fixed it in 17.5, or you're hoping it will be?

It's still not working for me on iOS.

Thanks.

[jyavenard]

Does that mean it is verified that Apple fixed it in 17.5, or you're hoping it will be?

I have verified it as being fixed in the latest 17.5

I work on WebKit

[RaviJayagopal]

@jyavenard, thanks! My manifest looks like this:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:12
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="https://example.com/decrypt.php"
#EXTINF:9,
test-1080p_00001.ts
#EXT-X-ENDLIST

Is it also resolved for external URLs like this?

[jyavenard]

Is it also resolved for external URLs like this?

This is a different problem to the one listed here.

Please open a bug on bugs.webkit.org with a test site to reproduce and I'll have a look.

[markmeeus]

@RaviJayagopal the demo is still there, but it uses hls in a video element, this may not work on all browsers. Should work om Safari

[RaviJayagopal]

Please see this test page: https://ikcakenpo.com/s3mediavault-test/

Works fine on desktop and Android, but not on iOS (Safari or Chrome).

[RaviJayagopal]

Does anyone have any ideas about https://ikcakenpo.com/s3mediavault-test/

Works fine on desktop and Android, but not on iOS (Safari or Chrome).

Based on troubleshooting using the browser console (Network), on iOS, it fetches the .m3u8 and then stops - doesn't try to access the encryption URL in the file.

Thanks!