Vollbild-API auf Mobilgeräten ⇐ JavaScript

[Anonymous]

Ich schreibe meinen benutzerdefinierten Player auf React und habe ein Problem beim Anpassen des Vollbildmodus für mobile Geräte.
So sieht die Funktion jetzt aus, die die Komponente in den Vollbildmodus versetzt:

Code: Select all

const handleFullScreen = () => {
const player = playerRef.current;
const video = videoRef.current;
if (!player || !video) return;

if (!document.fullscreenElement) {
player.requestFullscreen();
setIsFullscreen(true);
} else {
document.exitFullscreen();
setIsFullscreen(false);
}
};

So sieht das Video-Tag aus:

Code: Select all

 handlePlayerClick()}
playsInline
controls={false}
/>

Im Moment führt die Schaltfläche einfach nichts aus, aber sie kann angeklickt werden, wenn Sie eine Warnung oder Protokollierung hinzufügen.
Ich habe nach Informationen gesucht und immer noch nicht herausgefunden, wie ich alles zum Laufen bringen kann. Soweit ich weiß, verfügen iOS und Android über eigene Funktionen zum Umschalten in den FS-Modus.
Für iOS habe ich herausgefunden, was zu tun ist, damit die FS-Taste in den Safari-Player selbst übersetzt wird. Mit anderen Worten, Sie können keine benutzerdefinierten Schaltflächen im Vollbildmodus speichern.
Auf Android können Sie bereits die vollständige Anpassung des Players speichern, aber meine Schaltfläche funktioniert auf keinem mobilen Betriebssystem überhaupt.
Auf dem PC funktioniert alles einwandfrei.
Soweit ich weiß, sollte ich auf Mobiltelefonen nicht für div auf FS umsteigen, sondern für das Video-Tag? Aber wie kann man gleichzeitig die Anpassung für Android beibehalten?
Ich würde gerne Rat von jemandem einholen, der dies erlebt hat.