reactjs – Trouble entering native full screen on iphone 13 pro device with ios 17 safari


On ios safari, I’m encountering an issue when I try to enter into full screen mode with a <video> element via

videoRef.current.webkitEnterFullScreen();

We’re using srcObject to assign a media stream to the <video> element, which has playsinline and autoplay attributes. I confirmed that the 'loadeddata' and 'lodadedmetadata' events are firing on the <video> element before trying to enter full screen and that the webkitEnterfullScreen() invoke is being triggered as a direct result of a user action (click). Also confirmed that the video is in readyState 4, is playing, the srcOjbect is present, and that full screen is enabled (video.webkitSupportsFullscreen). No errors or console warnings are being thrown when we invoke webkitEnterfullScreen() – nothing whatsoever happens. The same code works just fine on iphone 13 pro emulator running ios 16.4
Wondering if the upgrade to ios 17 might’ve broken webkitEnterFullScreen() ? Here’s the full function for toggling to full screen with an added try-catch:

export function toggleFullscreen(video: WebkitVideoElement) {
    if (screenfull.isEnabled) {
        screenfull.toggle();
    } else if (!useIsFullscreen.getState() && 'webkitEnterFullScreen' in video) {
        try {
            video.webkitEnterFullScreen();
        } catch (err) {
            console.log('Error name:', err.name);
            console.log('Error message:', err.message);
        }
    }
}

Every so often it seems to work randomly but I can’t confirm that because it happens so sporadically and in weird states i.e. refresh or navigate back then forward

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img