Solution 1 :

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).

Problem :

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:

enter image description here

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?

Comments

Comment posted by djeikyb

did you figure out the problem?

By

Leave a Reply

Your email address will not be published. Required fields are marked *