Video.js 8.21.1 broken playback on Safari with React

[oxygenhydrate]

Description

I used the demo code provided on your (React and Video.js) to create the player. The player is configured with overrideNative enabled and is broadcasting HLS video.

After upgrading to the latest version 8.21.1 (http-streaming 3.16.2), I encountered an issue on Safari 18 (also I've reproduced in other versions of Safari.):

• Both player.src() and player.currentSrc() always return empty strings.
• When attempting to start the video, the following error is triggered immediately:

  “No compatible source was found for this media”
  CODE: 4 MEDIA_ERR_SRC_NOT_SUPPORTED

Interestingly, there is an unusual behavior related to Picture-in-Picture (PIP) mode:

• If I activate PIP mode before starting the video, it plays normally in the PIP window.
• After exiting PIP mode, the video continues playing normally, as long as I do not pause or click the progress bar.

Reduced test case

https://codesandbox.io/p/sandbox/bold-shamir-93t45y?file=%2Fsrc%2FApp.js%3A4%2C32

Steps to reproduce

1. Open the link Reduced test case
2. Press the Play button in the video player
3. It's pretty clear, when you press the play button, you should get an error.

Errors

CODE: 4 MEDIA_ERR_SRC_NOT_SUPPORTED

What version of Video.js are you using?

8.21.0

Video.js plugins used.

No response

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

On any version of Safari

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

Mac OS Sequoia

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[sven-ra]

I have the same issue, works on iOS 17 but not since iOS 18 I get the error: CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED.