Bug: AirPlay not detected in Safari until another video player triggers discovery

[arielbk]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react, mux-player

Which browsers are you using?

Safari

Which operating systems are you using?

macOS

Description

Safari does not show the AirPlay button in Mux Player, even when AirPlay-capable devices (Apple TV, HomePod, etc.) are available on the network. The webkitplaybacktargetavailabilitychanged event fires with availability: "not-available" on page load.

However, if I open another video player (e.g., TheoPlayer demo) in a different tab and click their AirPlay button, Safari suddenly broadcasts availability: "available" to ALL video elements, including Mux Player. The AirPlay button then appears in Mux Player for ~10 seconds before disappearing again.

This suggests Safari's AirPlay device discovery is not being triggered by Mux Player, while other players (like TheoPlayer) successfully trigger it.

What I've tried:

• Setting preferPlayback="native" - no effect
• Using the Remote Playback API's watchAvailability() - reports available: false
• Setting x-webkit-airplay="allow" attribute on the video element - no effect
• Waiting for video to fully load (readyState: 4) before checking - still reports unavailable
• Ensuring disableRemotePlayback is not set

Debug logs showing the issue:

[AirPlay] SETUP - {readyState: 0, networkState: 0, currentSrc: "", hasWebkitShowPlaybackTargetPicker: true}
[AirPlay] TARGET_AVAILABILITY_CHANGED - {availability: "not-available", readyState: 0}
[AirPlay] REMOTE_PLAYBACK_WATCHING - {callbackId: 3}
[AirPlay] REMOTE_PLAYBACK_AVAILABILITY - {available: false}
[AirPlay] VIDEO_CANPLAY - {readyState: 4, currentSrc: "https://stream.mux.com/..."}
[AirPlay] REMOTE_PLAYBACK_AVAILABILITY_AFTER_LOAD - {available: false}

After triggering AirPlay from TheoPlayer in another tab:

[AirPlay] TARGET_AVAILABILITY_CHANGED - {availability: "available", readyState: 4}

Reduced test case

https://hwy2v4.csb.app

Steps to reproduce

1. Open Safari on macOS with an AirPlay-capable device on the network (Apple TV, HomePod, etc.)
2. Load a page with Mux Player playing an HLS stream
3. Observe that the AirPlay button does NOT appear in the player controls
4. Open https://www.theoplayer.com/theoplayer-demo-airplay in another tab
5. Click TheoPlayer's AirPlay button (it's visible immediately)
6. Return to the Mux Player tab - the AirPlay button now appears briefly (~10 seconds)

Current Behavior

• AirPlay button never appears in Mux Player on Safari
• webkitplaybacktargetavailabilitychanged event fires with availability: "not-available"
• Remote Playback API's watchAvailability() callback reports available: false
• Manual workaround using webkitShowPlaybackTargetPicker() on button click DOES work

Expected Behavior

• AirPlay button should appear when AirPlay-capable devices are on the network
• webkitplaybacktargetavailabilitychanged should fire with availability: "available"
• Behavior should match other video players like TheoPlayer that correctly trigger Safari's AirPlay discovery

Errors

No console errors. The APIs work correctly - they just report that AirPlay is unavailable when it actually is available.

What version of the package are you using?

v3.10.2

[spuppo-mux]

Hello, thank you for reporting this and sorry for the long wait on the response.

I have tried to reproduce this issue both on your example and on this media-chrome example but could not observe the behavior you describe. Could you confirm it still happens on both examples?

I added some logs to test this locally and I am seeing that the watch availability callback fires twice on load (first with not-available and later with available, enabling the button). What I am seeing now is the AirPlay button working correctly on Safari, but not on Chrome (but it seems like my device is not compatible to receive a Chrome tab)

To try to find the source of the issue (and since there has been some other OS version related bugs recently) I'm also interested in which version of macOS you are testing this on.

In general I could appreciate if you could share:

• Sender OS version
• Receiver OS version
• Player version
• Any relevant Mux package you may be explicitly specifying in your dependencies

As an added question, is it always with theoplayer that the Airplay discovery is triggered? Does duplicating your example tab also cause it?