I'm trying to disable AirPlay button on Safari when using react-player (https://www.npmjs.com/package/react-player) package. I have added x-webkit-wirelessvideoplaybackdisabled="true", x-webkit-airplay="deny", "disableremoteplayback": "true" attributes for Safari since controlslist attribute is not supported for it yet based on this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video.
The video tag becomes like this:
<video preload="auto" controls="" controlslist="nodownload noremoteplayback" x-webkit-airplay="deny" x-webkit-wirelessvideoplaybackdisabled="true" disableremoteplayback="true" ...otherprops...></video>
Unfortunately, this is working partially. The AirPlay button just disappears/appears randomly for some time. Is there any other way to resolve the issue of hiding or even just disabling the button?
Based on the following documentations and forums the webkit attributes should have worked:
- Tells to use
x-webkit-airplay="deny"https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html - Indicates that Safari has switched from
x-webkit-airplaytox-webkit-wirelessvideoplaybackdisabledhttps://github.com/Fyrd/caniuse/issues/5345 - Based on the compatibility, the
disableRemotePlaybackshould work https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#disableremoteplayback
Following all the documentations and forums above, none of them actually provide the constant result, since the AirPlay button just appears randomly and after n-seconds/minutes it just disappears.