Fix iOS Safari Audio Issues in React Video Player (HLS/ReactPlayer). Nextjs/typescript

Good day!
I noticed the description of problems with the video player in your project — specifically, memory leaks and unstable behavior on iOS Safari when using ReactPlayer with HLS.js.
It is important to note that iOS Safari has built-in support for HLS and does not fully support MediaSource Extensions (MSE), which are critically necessary for HLS.js to function. Because of this:
1) HLS.js should not be used in iOS Safari — this is not only inefficient but can also lead to memory leaks and crashes.
2) ReactPlayer, which automatically integrates HLS.js for HLS streams, does not account for the specifics of iOS Safari, leading to the issues you described.
I can suggest the following solution:
1) Use a custom video player that conditionally detects iOS Safari and plays HLS directly through , without HLS.js.
2) For all other platforms — connect HLS.js only where it is truly needed.
3) Properly clear media resources (pause, removeAttribute('src'), load, destroy) to prevent leaks when switching streams.
… If interested — I can quickly implement a prototype of such a player or rewrite the existing component according to this logic. Ready to discuss project details, tech stack, and tasks.

Show original

Translate