Como utilizar o API fullScreen

Juntamente com o HTML5 vieram vários API vantajosos, entre os quais o Fullscreen API que permite ao navegador fazer algo que apenas o Flash permitia, que o utilizador visualize o website em modo Fullscreen. 

Esta funcionalidade é especialmente proveitosa se está a disponibilizar vídeo, imagens ou se está a desenvolver um jogo. De facto, qualquer conteúdo a que se queira dar especial enfoque pode beneficiar do Fullscreen API.

E o melhor é que é bastante simples utilizá-lo…

Os métodos

Diversos métodos fazem parte do Fullscreen API:

element.requestFullScreen()

Este método permite que um único elemento seja utilizado em fullscreen.

Document.getElementById(“myCanvas”).requestFullScreen()

Para que a "canvas" com o ID "myCanvas" seja exibida em fullscreen.

document.cancelFullScreen()

Para cancelamento do modo de fullscreen e visualização no formato original do documento.

Document.fullScreen

Para cancelamento modo de fullscreen se o utilizador estiver em modo fullscreen

document.fullScreenElement

Volta para o elemento que está atualmente em modo fullscreen

Nota: Estes são os métodos standard, precisando sempre dos prefixos do fornecedor para que opere no Chrome, Firefox e Safari. (IE e Opera não suportam para já este API).


Lançar o modo fullscreen

Primeiro vamos precisar saber qual o método reconhecido pelo navegador. Vamos criar uma função para este efeito e chamá-la:

//helper function
function fullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.webkitRequestFullScreen ) {
    element.webkitRequestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  }
}

Como poderá constatar este método verifica se o requestFullScreen tem alguma resposta e obtém a função correta para o navegador em questão, utilizando o seu prefixo.

Após esta operação basta de seguida chamar a função fullScreen da seguinte forma:

//for the whole page
var html = document.documentElement;
fullScreen(html);

 // For a specific element on the page
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);

Será enviado um pedido para o utilizador, para permitir a utilização do fullscreen, no caso de ser aceite, todas as barras de navegação e ferramentas irão desaparecer ficando apenas as páginas e elemento pretendidos.


Cancelar o modo fullscreen

Este método também exige prefixos do fornecedor, por isso utilizamos a mesma ideia anterior, criando uma função que irá determinar qual o prefixo que devemos utilizar de acordo com o navegador do utilizador.

Irá verificar que utilizando este método não será necessário fazer a passagem de elementos, porque ao contrário do requestFullScreen, aplica-se sempre a todo o documento.

// the helper function
function fullScreenCancel() {
  if(document.requestFullScreen) {
    document.requestFullScreen();
  } else if(document .webkitRequestFullScreen ) {
    document.webkitRequestFullScreen();
  } else if(document .mozRequestFullScreen) {
    document.mozRequestFullScreen();
  }
}

//cancel full-screen
fullScreenCancel();


A pseudo-classe CSS

Neste pacote JavaScript API vem uma pseudo-classe CSS chamada :full-screen, podendo ser utilizada para estilizar qualquer elemento na página quando se encontra em modo fullscreen. Poderá ser útil porque o tamanho do navegador aumenta ligeiramente no modo fullscreen.

/* Changing something in the body */
:-webkit-full-screen {
  font-size: 16px;
}
:-moz-full-screen {
  font-size: 16px;
}
/*Only one element*/
:-webkit-full-screen img {
  width: 100%;
  height: 100%;
}
:-moz-full-screen img {
  width: 100%;
  height: 100%;
}


Atenção que não pode separar os prefixos do fornecedor com virgulas porque o navegador não irá lê-las.

/* This will not work */
:-webkit-full-screen img,:-moz-full-screen img {
  width: 100%;
  height: 100%;
}

Para que os estilos funcionem corretamente terá de colocar todos os prefixos dos fornecedores no seu próprio bloco.


Conclusão

Este Javascript API é um dos menos conhecidos que veio com o HTML5, mas na minha opinião é bastante simples e funcional. A experiência melhorada  que se consegue pelo foco num único elemento por parte do utilizador, especialmente vídeo, imagens e jogos, vale bem a pena algumas linhas de programação. 

Tem mais dúvidas? Submeter um pedido

0 Comentários

Por favor, entrar para comentar.