A API de tela cheia adiciona métodos para mostrar um elemento específico (e seus descendentes) no modo de tela cheia e para sair do modo de tela cheia quando não for mais necessário. Isso significa que o usuário usa a API HTML5 em tela cheia como um jogo online. Quando você alterna para o modo de tela inteira, a página da Web ocupa o máximo de espaço possível.
Isso nem sempre é o que você quer, no entanto. Na maioria das vezes, você deseja tornar uma determinada parte da página em tela cheia, como um vídeo ou um jogo. Este é um bom momento para usar a API de tela cheia. Até que o modo de tela cheia seja desativado, todos os elementos da interface do usuário do navegador e outros aplicativos são removidos da tela.
Como usar a API HTML5 de tela cheia
Prefixos irritantes do fornecedor
Não se preocupe em tentar usar esses nomes de API. Você precisará de prefixos de fornecedor para AMBOS as propriedades CSS e JavaScript. Ainda não há suporte no Internet Explorer ou no Opera, mas sugiro que você use os prefixos’ms’e’o’para testes futuros. Desenvolvi uma função na página de demonstração que lida com as travessuras do prefixo para você:
O CSS
Depois que o navegador entrar no modo de tela inteira, você quase certamente desejará para alterar os estilos do elemento e seus filhos. Por exemplo, se o seu elemento normalmente tem uma largura de 500px, você vai querer mudar para 100% para que ele use todo o espaço disponível, por exemplo. Mas você não pode usar uma lista de seletores com um prefixo de fornecedor.
O que é HTML5?
HTML5 é a versão mais recente da Hypertext Markup Language, que é o código que descreve as páginas da web. Na verdade, existem três tipos de código: HTML, que fornece a estrutura, Cascading Style Sheets (CSS), que cuida da aparência das coisas, e JavaScript, que faz as coisas acontecerem.
Ainda mais. O HTML5 não pertence a ninguém, então você não precisa pagar para usá-lo. Também funciona em qualquer plataforma, como tablet, smartphone, netbook, notebook, ultrabook ou Smart TV, desde que seu navegador suporte HTML5. É sempre mais complicado do que isso, no entanto. Falaremos mais sobre isso em breve.
FAQ
Como ativar a tela cheia em JavaScript?
Podemos usar o método requestFullscreen() em qualquer elemento para tornar um elemento em tela cheia. Este método faz uma solicitação assíncrona para que o elemento seja exibido no modo de tela cheia.
Como usar a API de tela cheia em Javascript?
Ao chamar Element, você pode alternar para tela cheia modo. use o método requestFullscreen() do elemento video>. Se o modo de tela cheia já estiver ativado (fullscreenElement não é nulo), chamamos o método exitFullscreen() do documento para desativá-lo.
A API de tela cheia requer permissão do usuário?
Para habilitar uma visualização em tela cheia no navegador de um usuário, primeiro você precisa pedir permissão para fazê-lo com o elemento. função requestFullScreen.
Como exibir apenas 100 caracteres javascript?
Podemos usar o método substring(): O método substring(a, b) extrai caracteres, entre dois índices (posições a e b respectivamente), de uma string e retorna a substring. Exemplo: let text=“Eu amo javascript”; <%=texto. … Também podemos usar o método slice(): Exemplo: <%=text. dividir("").
Como faço para forçar um div a ocupar toda a largura?
O que você pode fazer é definir seu div como position: absolute para que seu div seja independente do restante do layout. Em seguida, diga largura: 100% para preencher a largura da tela. Agora é só usar margin-left: 30px (ou qualquer px que você precise) e pronto.