A cópia do código é a seguinte:
// julga vários navegadores e encontre o método correto
Função LaunchfullScreen (Element) {
if (element.requestfullscreen) {
element.RequestfullScreen ();
} else if (element.mozRequestfullScreen) {
element.mozRequestfullScreen ();
} else if (element.webkitRequestfullcreen) {
element.webkitRequestfullScreen ();
} else if (element.msRequestfullScreen) {
element.msRequestfullScreen ();
}
}
// Inicie a tela cheia!
LaunchfullScreen (document.documentElement);
LaunchfullScreen (Document.getElementById ("VideoElement"));
Ligue para o método de tela inteira nos elementos da página que você deseja exibir na tela cheia e a janela do navegador se tornará uma tela cheia, mas o usuário solicitará primeiro que o usuário permita o modo de tela inteira. Esteja ciente de que os usuários provavelmente rejeitarão o modo de tela inteira. Se o usuário executar o modo de tela inteira, a barra de ferramentas do navegador e outros menus de botão estarão ocultos e sua página cobrirá toda a tela.
Saia do modo de tela cheia
Esse método de saída de saída (que também requer um prefixo do navegador) fará com que o navegador saia do modo de tela inteira e se torne o modo normal.
A cópia do código é a seguinte:
// determinar o tipo de navegador
função exitfullScreen () {
if (document.exitfullscreen) {
document.exitfullscreen ();
} else if (document.mozcancelfullscreen) {
document.mozcancelfullscreen ();
} else if (document.webkitexitfullcreen) {
document.webkitexitfullscreen ();
}
}
// Sair do modo de tela cheia!
exitfullScreen ();
Deve -se notar que o ExitfullScreen só pode ser chamado pelo objeto do documento, em vez do objeto passado ao iniciar a tela cheia.
Propriedades e eventos de tela cheia
Infelizmente, as propriedades de tela cheia e os métodos relacionados para eventos também exigem o prefixo do navegador, mas acredito que isso não será necessário em breve.
1.document.fullScreenElement: elemento da página da web de tela cheia.
2.document.fullScreenEnabled: determina se está atualmente em tela cheia.
O evento completo de verificação será acionado quando a tela cheia for iniciada ou saiu:
A cópia do código é a seguinte:
VARSCLEAGEM FULLEMELEMENTE = Document.FullScreenElement ||
Var FullScreenEnabled = Document.FullScreenEnabled || Document.mozfullScreenEnabled ||.
Você ainda pode prefixar este evento usando o método acima de julgar o tipo de navegador.
CSS de estilo de tela cheia
Vários navegadores fornecem uma regra de estilo CSS muito útil no modo de tela inteira:
Copie o código da seguinte forma ::-webkit-full-screen {
/ * Propriedades */
}
: -Moz-Full-Screen {
/ * Propriedades */
}
: -ms-FullScreen {
/ * Propriedades */
}
: tela cheia { / *pré-especificação * /
/ * Propriedades */
}
: tela cheia { / * spec * /
/ * Propriedades */
}
/ * elementos mais profundos */
: -Webkit-Full-Screen Vídeo {
largura: 100%;
Altura: 100%;
}
/* estilizando o cenário*/
:: cenário {
/ * Propriedades */
}
::-MS-BACKDROP {
/ * Propriedades */
}
Em alguns casos, existem alguns problemas com os estilos de webkit e é melhor você manter esses estilos simples.
Essas APIs em tela cheia são super simples e super úteis. A primeira vez que vi essa API na demonstração do Bananabread da MDN, foi um jogo de filmagem que estava em tela cheia, que usou o evento ouvindo para detectar o estado de tela cheia. Lembre -se dessas APIs úteis, você pode buscá -las quando precisar delas.