requestFullscreen / exitFullscreen în JavaScript

await element.requestFullscreen()
await document.exitFullscreen()

Ce face requestFullscreen / exitFullscreen

requestFullscreen() trece elementul în modul ecran complet și returnează o promisiune. Browserul permite asta doar ca răspuns la o acțiune a utilizatorului (un clic sau o tastă). Elementul afișat este în document.fullscreenElement.

document.exitFullscreen() revine la afișarea normală; utilizatorul poate ieși oricând și cu Esc. Evenimentul fullscreenchange anunță fiecare schimbare.

Ce returnează

O Promise.

Exemple

Exemplul 1: Buton de ecran complet pentru un video

Rezultatul după două clicuri pe buton.

const player = document.querySelector(".player");

document.querySelector("#ecran-complet").addEventListener("click", async () => {
  if (!document.fullscreenElement) await player.requestFullscreen();
  else await document.exitFullscreen();
});

document.addEventListener("fullscreenchange", () => {
  console.log(document.fullscreenElement ? "ecran complet" : "normal");
});

Rezultat în browser

ecran complet
normal

Greșeli frecvente

• Apelezi requestFullscreen la încărcarea paginii, fără clic. Browserul refuză cu TypeError: Permissions check failed.

Comenzi înrudite

• video.play / pause / load: Pornește, oprește și reîncarcă un element video sau audio din JavaScript.
• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.