I also had this issue. The solution for me was the file type being provided to the video html element. I was having this issue because the file I was giving it as it’s source was a .mpd (DASH) whereas Safari and iOS work mainly in .m3u8(HLS).

I have added airplay button to my web app following: https://developer.apple.com/documentation/webkitjs/adding_an_airplay_button_to_your_safari_media_controls
On Safari from Mac when I click on the airplay button, I get the menu and select the TV. On my TV I only get this view:

The video doesn’t play. I tried adding x-webkit-airplay="allow" to the video element but the same.

Here’s my code:

    if (
        video &&
        window['WebKitPlaybackTargetAvailabilityEvent']
    ) {
        console.info(
            'UseEffect depending on video. User on iOS, has WebKitPlaybackTargetAvailabilityEvent. Attaching webkitplaybacktargetavailabilitychanged event listener',
        );
        video.addEventListener(
            'webkitplaybacktargetavailabilitychanged',
            (event): void => {
                setShouldDisplayAirplayBtn(event['availability'] === 'available');
            },
        );
    } 

My handle on airplay button click:

    if (video && video['webkitShowPlaybackTargetPicker']) {
        video['webkitShowPlaybackTargetPicker']();
    } else {
        setShouldDisplayAirplayBtn(false);
    }

Same thing on safari from iphone. Any ideas what might be causing this, or guides on how to fix this issue?