Fullscreen API: przeglądarka w trybie pełnoekranowym

FullScreen API to jedna z tych nowości, na które wielu developerów czekało. Co w nim takiego rewolucyjnego? Wystarczy odpowiedzieć sobie na pytanie, czy dotychczas miałeś możliwość z poziomu JavaScript wywołać tryb pełnoekranowy w przeglądarce? Taką możliwość daje właśnie FullScreen API.

Support

Standardowo, jak przy każdej nowości powstaje pytanie, ale gdzie ja mogę tego użyć? W momencie pisania tego artykułu FullScreen jest wpierany w trzech przeglądarkach: Firefox 10+, Google Chrome 15+ oraz Safari 5.1+. Jednak jak to bywa, za jakiś czas te dane będą nieaktualne, tak więc zalecam sprawdzanie strony caniuse.com. Dodatkowo co warto odnotować, w chwili obecnej każda z przeglądarek inaczej implementuje to API, i nie mówimy tu tylko o przedrostkach moz i webkit, ale o nazwach metod, które w niektórych przypadkach różnią się od tych używanych w specyfikacji.

Wywołanie trybu pełnoekranowego

Skoro wiemy już gdzie eksperymentować z FullScreen API, spróbujmy go wywołać. W trybie pełnoekranowym wyświetlić możemy np. element canvas czy video, a posłuży nam do tego metoda requestFullscreen:

var el = document.documentElement;
if(el.requestFullscreen){
el.requestFullscreen();
}else if(el.webkitRequestFullScreen){
el.webkitRequestFullScreen();
}else if(el.mozRequestFullScreen){
el.mozRequestFullScreen();
}else{
console.log("Your browser doesn't support fullscreen");
}

Jedyną różnicą, poza prefiksami oczywiście, jest litera s w nazwie metody, którą twórcy specyfikacji pozostawili małą, podczas gdy twórcy przeglądarek postanowili użyć wielkiej.

Zamykanie trybu pełnoekranowego

Skoro mamy już otwartą stronę w trybie pełnoekranowym, dowiedzmy się jak powrócić do normalnego widoku. Tutaj posłuży nam metoda exitFullscreen, jednak co pokazuje kod poniżej, przeglądarki używają zupełnie innej nazwy:

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

Jak widać, zamiast exit pojawia nam się słówko cancel, no i standardowo słowo Screen pisane jest z dużej litery.

Wykrywanie trybu pełnoekranowego

Czasem zdarzy się sytuacja, że jako twórca strony/aplikacji chciałbyś wiedzieć czy użytkownik jest w trybie pełnoekranowym czy też może właśnie go opuścił. Do dyspozycji mamy dwie rzeczy: zdarzenie fullscreenchange oraz zmienną fullscreen, które mogą zostać użyte tylko na obiekcie document. Jak to działa?

document.addEventListener("fullscreenchange", function () {
if(document.fullscreen){
// Your code here
}
}, false);

document.addEventListener("mozfullscreenchange", function () {
if(document.mozFullScreen){
// Your code here
}
}, false);

document.addEventListener("webkitfullscreenchange", function () {
if(document.webkitIsFullScreen){
// Your code here
}
}, false);

Zdarzenie fullscreenchange zostanie wywołane zawsze jeżeli wywołujesz lub wychodzisz z trybu pełnoekranowego. Mówiąc krócej, zdarzenie to reaguje na zmianę trybu w jakim strona jest wyświetlana. Jeżeli chodzi o różnicę to tutaj mamy tylko prefiksy. Inną sprawą jest zmienna fullscreen, która przechowuje informację o tym czy używamy fullscreen czy nie. Na tej podstawie, w naszym przykładzie możemy wywołać jakiś kod wtedy gdy użytkownik postanowi przejść do trybu pełnoekranowego. Różnice? Najbliżej specyfikacji pozostał Firefox, który zastosował tylko uppercase dla nazwy zmiennej, kiedy to webkit postanowił dodać jeszcze słówko Is. Pomijam tu oczywiście prefiksy które nie powinny dziwić.

CSS dla fullscreen

Ostatnią kwestią jaką chciałbym poruszyć to możliwość wyróżniania przez CSS elementów na stronie wtedy gdy przeglądarka jest w trybie pełnoekranowym. Posłuży nam do tego pseudo-klasa :fullscreen:

html:fullscreen {
/* your code here */
}

html:-moz-full-screen {
/* your code here */
}

html:-webkit-full-screen {
/* your code here */
}

Podsumowanie

Jak widać Fullscreen API może być bardzo pomocne gdy chcemy pokazać coś w trybie pełnoekranowym. Jedyne o czym nie wspomniałem, opisując zasadę działania tego API, to fakt iż przeglądarki z względów bezpieczeństwa blokują pewne klawisze w trybie pełnoekranowym co można zobaczyć na tym przykładzie uruchomionym np. w Chromie (spróbujcie wpisać swoje imię w polu tekstowym). Aby dać użytkownikowi możliwość korzystania z klawiatury trzeba wywołać fullscreen ze specjalną flagą (działa tylko w webkicie):

el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

Dodatkowe linki