Fullscreen on Safari iOS

[thomaslochet]

Kyoo's version

v4.7.0

What happened?

The fullscreen button does not work on Safari iOS :(

[zoriya]

I unfortunately don't own an ios device to test this. Could you send the console logs/error of the browser?

[felipemarinho97]

Thats what I got from Safari Mobile on iOS 17 Simulator via MacOS

[Error] TypeError: document.body.requestFullscreen is not a function. (In 'document.body.requestFullscreen({navigationUI:"hide"})', 'document.body.requestFullscreen' is undefined)
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114379
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114582
(anonymous function) — _app-a52ebceb2ec88a05.js:20:114583
f — _app-a52ebceb2ec88a05.js:24:35507
(anonymous function) — _app-a52ebceb2ec88a05.js:20:141547
uI — framework-2880adef1ccdc07d.js:9:84056
oU — framework-2880adef1ccdc07d.js:9:113103
oC — framework-2880adef1ccdc07d.js:9:95922
r8 — framework-2880adef1ccdc07d.js:9:44813
(anonymous function) — framework-2880adef1ccdc07d.js:9:111549
oI — framework-2880adef1ccdc07d.js:9:111553
oS — framework-2880adef1ccdc07d.js:9:94925
x — framework-2880adef1ccdc07d.js:17:1366
T — framework-2880adef1ccdc07d.js:17:1896

	(anonymous function) (_app-a52ebceb2ec88a05.js:20:114577)
	(anonymous function) (_app-a52ebceb2ec88a05.js:20:114582)
	(anonymous function) (_app-a52ebceb2ec88a05.js:20:114583)
	f (_app-a52ebceb2ec88a05.js:24:35507)
	(anonymous function) (_app-a52ebceb2ec88a05.js:20:141547)
	uI (framework-2880adef1ccdc07d.js:9:84056)
	oU (framework-2880adef1ccdc07d.js:9:113103)
	oC (framework-2880adef1ccdc07d.js:9:95922)
	r8 (framework-2880adef1ccdc07d.js:9:44813)
	(anonymous function) (framework-2880adef1ccdc07d.js:9:111549)
	oI (framework-2880adef1ccdc07d.js:9:111553)
	oS (framework-2880adef1ccdc07d.js:9:94925)
	x (framework-2880adef1ccdc07d.js:17:1366)
	T (framework-2880adef1ccdc07d.js:17:1896)

Those 2 methods are defined and working:

 document.querySelector('video').webkitEnterFullscreen()
 document.querySelector("video").webkitEnterFullScreen();

Sources from my research into this issue:

• "requestFullscreen is not a function" in safari iOS vasilevich/react-fullscreen-crossbrowser#2
• https://stackoverflow.com/questions/25520119/how-do-you-get-full-screen-in-safari

[zoriya]

oh yeah, i missed that:

from what i gathered, you can't put elements on fullscreen on ios? you can make videos fullscreen on ipad but no other containers & it doesn't work on mobile?

the only solution i can see would be to just disable the fullscreen button on ios.
for ipads, we could put the video element on fullscreen but it would prevent subtitles & controls from showing so idk if that makes sense to offer this

[felipemarinho97]

If I call document.querySelector('video').webkitEnterFullscreen() from developer console I can enter fullscreen.
But it's using the default player from Safari. Subtitles and controls (play/pause, forward and back) are ok. And there is no quality controls.
I can exit fullscreen also from the default player.

Edit: quality controls are not working because transcoding is not working:

{errors: ["no level with compatible codecs found in manifest"]}

I can only play Pristine mode.

[zoriya]

Okay let's use that then! Should be better than no fullscreen at all.

That means ios fullscreen can't change quality or display ass subtitles nor pgs w/ #335 (after the web player rework i'll do for TheWidlarzGroup/react-native-video#2719 we should be abble to display ass subtitles without styling tho).

@felipemarinho97 do you want to do the PR? I think the simplest fix would be something like

if (!document.body.requestFullscreen)
	document.body.requestFullscreen = webkitEnterFullscreen;

in a web only polyfill file

[zoriya]

the transcode error might be worth investigating also