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