AirPlay is not working with FilePlayer and hls

[tpettrov]

Current Behavior

When chosen to play via AirPlay with file player, the airplay logo appears in player but then video continues to play in browser.

Expected Behavior

The video should be played on the receiver (TV) via AirPlay.

Steps to Reproduce

1. Open Safari.
2. Open React Player demo page. https://cookpete.com/react-player/
3. Choose HLS.
4. Add Controls.
5. Click AirPlay Icon. Choose receiver.
6. Watch the bug happening :)

Environment

• URL attempting to play: https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8
• Browser: Safari
• Operating system: MacOS Ventura

Other Information

I dig a little bit. Reason is hidden in hls.js player attaching blob as src on video element. Blob being sent to the AirPlay receiver can't do anything with it. Possible solution is to add 'source' tag. Tried workaround by passing url in array to imitate playlist as it's adding source tags but there is some bug with generating url, which is a separate issue with this lib...