cookpete
Stop react-player to load HLS video on unmounted without killing the player instance.
Current Behavior
I am using HLS video stream for the react-player, when the player is unmounted it still keeps loading the stream ( .m3u8). I am testing the loading state in BrowserStack with iOS 15 and 16 beta. However, the player media does not load when unmounted on Android 11 and 12.
Expected Behavior
No loading of video in the network tab of DevTools
Environment
-
URL attempting to play: https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8
-
Device: iPhone 12-13 and Samsung Galaxy S22 (BrowserStack)
-
Operating system: iOS (15, 15.4, 15.5, 15.6, 16(beta)) and Android (10, 11, 12)
-
code example: https://codesandbox.io/s/stoic-meadow-ekh824?file=/src/App.js
Other Information
PS: I want to avoid killing the player instance or use useRef hook. I am looking for more elegant way with HLS configurations
Unless you are passing config={{ forceHLS: true }}, HLS streams on iOS use the native HLS support of the device and do not use hls.js. I’m not sure what we can do about this as it’s entirely up to iOS to continue loading data after the <video> element has been removed.
