ugrás a tartalomhoz

HTML 5: teljes képernyős nézet

Bártházi András · 2012. Feb. 6. (H), 09.15

Flash esetén már nagyon régóta lehetőségünk van teljes képernyőre lépni a teljesebb élményhez, s bár a legtöbb böngészőben is volt már lehetőség „kézzel” teljes képernyőre váltani, a HTML/JavaScript interfész mindeddig váratott magára. A Fullscreen API egy elég friss dolog, a W3C-s javaslat mindössze egy hónapja jelent meg.

A Fullscreen API egyelőre még csak vázlat formájában érhető el a W3C-nél, a szorosan vett HTML 5 ajánlásban még nem szerepel. Mivel vázlatról van szó, ezért még előfordulhatnak kisebb-nagyobb változtatások, de ennek ellenére már egész jó a böngésző támogatottsága: a Firefox, a Chrome és a Safari is támogatja (lásd a bejegyzés vége fele bővebben). Bár a draft egyik szerkesztője operás, az Opera egyelőre még nem támogatja a lehetőséget, és azt sem tudni, hogy az Internet Explorerben mikor fog megjelenni.

Irány a teljes képernyő

A teljes képernyőre váltás egy JavaScript függvényhívással lehetséges. A javaslat szerint egy DOM elemen a requestFullscreen() meghívásával tudunk váltani, a böngészők a szokásos prefixekkel teszik ezt elérhetővé. A teljes dokumentum, vagyis a document.body esetében így alakul a kód:

if (document.body.requestFullscreen) {
    document.body.requestFullscreen();
} else if (document.body.mozRequestFullScreen) {
    document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullScreen) {
    document.body.webkitRequestFullScreen();
}

Az 1. sorban a szabvány szerinti mód, a 3.-ban a Firefox-féle hívás, az 5.-ben pedig a Chrome és Safari megoldást láthatjuk. Vegyük észre, hogy míg a szabvány a Fullscreen S betűjét kisbetűvel írja, addig a böngészők (logikusan) nagybetűvel valósították meg (és tényleg ez tűnik a jobb megoldásnak).

A teljes képernyős módból kilépés a document elemen meghívott exitFullscreen() függvény segítségével lehetséges, a böngészőgyártók viszont a cancelFullScreen() mellett tették le voksukat:

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

Biztonság

A teljes képernyős nézetnél biztonsági problémák is felmerülnek, hiszen könnyedén összerakható egy olyan weboldal, mely egy operációs rendszer bejelentkező képernyőjét utánozza, megtévesztve ezzel a felhasználót, aki így például beírhatja jelszavát. Emiatt – egyelőre – alapból le van tiltva a billentyűzet, s csak az egér használható. Chrome esetén külön paraméter átadásával kell kérni, hogy működjön a billentyűzet: webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT), a Firefox pedig egy másik metódust ad: mozRequestFullScreenWithKeys(). Várhatóan a konkrét megoldás és működés alakul majd még a jövőben, például hiába kell külön kérni a billentyűzet Chrome alatt, semmilyen különbséget, figyelmeztetést nem tapasztaltam a két állapot között. A Firefox már okosabb, pár billentyű kivételével kapunk egy figyelmeztető üzenetet az arcunkba (azok a billentyűk, ahol nem, alkalmasak viszont játék vezérlésre vagy hasonlóra).

CSS kiválasztók és JavaScript események

A teljes képernyős állapothoz kapunk CSS kiválasztót, JavaScript eseményt és állapot lekérdezhetőséget is, így dinamikusan alakíthatjuk a megjelenést, illetve reagálhatunk az állapotváltozásokra.

A CSS kiválasztók így néznek ki:

html:fullscreen,
html:full-screen,
html:-moz-full-screen,
html:-webkit-full-screen {
    background: red;
}

A 2. sorban szereplő kiválasztó jelenleg egyik böngészőben sem működik, de ez lehet a végleges nyertes, legalábbis a böngésző gyártók ezen az állásponton vannak.

A JavaScript eseményeket a szabványos addEventListener() segítségével kezelhetjük le, az aktuális állapotot pedig a document.fullscreen tulajdonság segítségével érhetjük el:

function onFullScreenChange() {
  var state = document.fullscreen || document.fullScreen || document.mozFullScreen || document.webkitFullScreen;
  // állapot feldolgozása
}
document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);

Támogatás

  1. A Mozilla egy javaslat formájában tette közzé gondolatait a teljes képernyős módról: . Érdemes elolvasni, mert bővebb, mint az összefoglalóm.
  2. A teljes képernyős támogatás elsőként a Safari 5-ben jelent meg, azonban csak a video elemmel működött. Az 5.1-es változattól kezdve már minden elemre működik.
  3. A W3C is kihozta a fentebb linkelt dokumentumot.
  4. A Chrome 15 és a nemrég megjelent Firefox 10 is támogatja a lehetőséget.

A többi böngészővel kapcsolatosan még semmi konkrétum nincs. Az iOS eszközök már támogatják a fentebb írtakat.

Hogyan tovább?

A Mozillánál lehet olvasni egy átfogó leírást: Using full-screen mode, illetve egy korrekt Fullscreen API demó is kipróbálható.

 
1

Csak arra volnék kíváncsi,

kuka · 2012. Feb. 6. (H), 17.13
Csak arra volnék kíváncsi, hogy akkor ezentúl az a reklám nyitja magát teljes képernyősre amelyik akarja?

(Magam erejéből ezt soha sem fogom megtudni, mert Firefoxban full-screen-api.enabled=false-t állítottam.)
2

window.open

Bártházi András · 2012. Feb. 6. (H), 17.45
Ugyanaz a policy vonatkozik erre is, mint a window.open-re, vagyis csak felhasználói interakció eredményeképpen tudsz teljes képernyős üzemmódra váltani. Ugyanannyi reklám nyitja magát majd teljes képernyősre, mint amennyi most ablakot nyit. Nem hinném, hogy szignifikáns probléma lesz.
8

csak felhasználói interakció

kuka · 2012. Feb. 7. (K), 09.45
csak felhasználói interakció eredményeképpen tudsz teljes képernyős üzemmódra váltani
Köszönöm, ezek szerint erre vonatkozhat a full-screen-api.key-input-restricted állítás. Így már egyáltalán nem hangzik aggasztóan.
9

Inkább

Bártházi András · 2012. Feb. 7. (K), 14.38
Az a beállítás inkább az lesz, hogy vagy nem lehet engedélyezett billentyűzettel teljes képernyőre váltani, vagy minden esetben visszavált, ha alfanumerikus billentyűt ütsz le.
10

Ah, vagy úgy. Bizonyára

kuka · 2012. Feb. 7. (K), 14.58
Ah, vagy úgy. Bizonyára igazad lesz, logikusabban hangzik.
3

és azt sem tudni, hogy az

Hidvégi Gábor · 2012. Feb. 6. (H), 17.50
és azt sem tudni, hogy az Internet Explorerben mikor fog megjelenni
Ha a Microsoft az IE esetében nem tér át arra a gyors fejlesztési ütemezésre, amit a többiek már megtettek, szerintem menthetetlenül el fognak tűnni a süllyesztőben.
4

Nagyon szeretem... Mar

Leonuh · 2012. Feb. 6. (H), 19.14
Nagyon szeretem... Mar joideje ezt kihasznalva hasznalom youtubot (full screen ezzel van megoldva) Regebben voltak bugjai... Manapsag egy rossz szavam nem lehet ra... Es persze jo a cikk :)
Nem a reklam helye, de ha mas nem tudna esetleg es erdekelne: http://www.youtube.com/html5
5

IE workaround 10 éve

Gixx · 2012. Feb. 6. (H), 22.47
A cikk nagyszerű, de az Internet Explorer kapcsán annyit esetleg meg lehetne említeni imeretterjesztő céllal, hogy van két (egyébként meglehetősen durva) workaround:

Az első megoldás régebbi, valamikor még 2000 környékén jött ki, és egyből hekkelték is. Ebből lettek a híres Chromeless Window megoldások (azóta talán már nem lehet ilyet).
A lényege egy fullscreen ablak megnyitása:

function ieRequestFullScreen() {
  window.open(location.href,"fs","fullscreen=yes");
  onFullScreenChange();
}
A másik megoldás talán még ennél is borzasztóbb, mert ActiveX objektummal dolgozik:

function ieRequestFullScreen() {
  var wscript = new ActiveXObject("Wscript.shell");
  wscript.SendKeys("{F11}");
  onFullScreenChange();
}
Azt hiszem (bár nem próbáltam) mind a kettő megoldás működik IE9 alatt is.

Ha másképp nem is, de azért ez a workaround sem rosszabb, mint moz* meg webkit* böngésző specifikus (natív) megoldásokat használni. Legalábbis, amíg nincs elfogadott szabvány.
6

Lol, ha ez a második működik

inf3rno · 2012. Feb. 6. (H), 23.46
Lol, ha ez a második működik kérdés nélkül az nagyon durva...

szerk:
Azért nekem kiírta, hogy activeX vezérlő meg nem biztonságos...
7

Működik a második is, de

virág · 2012. Feb. 7. (K), 07.22
Működik a második is, de rákérdez, hogy engedélyezed-e, meg blokkolhatod stb.