Is there an existing issue for this?
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
- Open Safari on macOS with an AirPlay-capable device on the network (Apple TV, HomePod, etc.)
- Load a page with Mux Player playing an HLS stream
- Observe that the AirPlay button does NOT appear in the player controls
- Open https://www.theoplayer.com/theoplayer-demo-airplay in another tab
- Click TheoPlayer's AirPlay button (it's visible immediately)
- 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
Is there an existing issue for this?
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
webkitplaybacktargetavailabilitychangedevent fires withavailability: "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:
preferPlayback="native"- no effectwatchAvailability()- reportsavailable: falsex-webkit-airplay="allow"attribute on the video element - no effectreadyState: 4) before checking - still reports unavailabledisableRemotePlaybackis not setDebug logs showing the issue:
After triggering AirPlay from TheoPlayer in another tab:
Reduced test case
https://hwy2v4.csb.app
Steps to reproduce
Current Behavior
webkitplaybacktargetavailabilitychangedevent fires withavailability: "not-available"watchAvailability()callback reportsavailable: falsewebkitShowPlaybackTargetPicker()on button click DOES workExpected Behavior
webkitplaybacktargetavailabilitychangedshould fire withavailability: "available"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