Existe uma maneira de criar vídeo em HTML5 em tela cheia?

Existe uma maneira de reproduzir um vídeo em tela cheia usando a <video>tag HTML5 ?

E se isso não for possível, alguém sabe se existe uma razão para esta decisão?

O HTML 5 não oferece uma maneira de criar um vídeo em tela cheia, mas a especificação paralela de Tela cheia fornece o requestFullScreenmétodo que permite que elementos arbitrários (incluindo <video>elementos) sejam criados em tela cheia.

Possui suporte experimental em vários navegadores .

Resposta original:

A partir da especificação HTML5 (no momento da redação deste documento: junho '09):

Os agentes de usuário não devem fornecer uma API pública para exibir vídeos em tela cheia. Um script, combinado com um arquivo de vídeo cuidadosamente criado, pode induzir o usuário a pensar que uma caixa de diálogo modal do sistema foi exibida e solicitar uma senha ao usuário. Também existe o risco de "mero" aborrecimento, com as páginas iniciando vídeos em tela cheia quando os links são clicados ou as páginas navegadas. Em vez disso, recursos de interface específicos do agente do usuário podem ser fornecidos para permitir facilmente que o usuário obtenha um modo de reprodução em tela cheia.

Os navegadores podem fornecer uma interface de usuário, mas não devem fornecer uma interface programável.

Observe que o aviso acima foi removido da especificação.

A maioria das respostas aqui está desatualizada.

Agora é possível trazer qualquer elemento para a tela cheia usando a API de tela cheia , embora ainda seja uma bagunça porque você não pode simplesmente chamar div.requestFullScreen()todos os navegadores, mas precisa usar métodos prefixados específicos do navegador.

Eu criei um wrapper simples screenfull.js que facilita o uso da API de tela cheia.

O suporte atual do navegador é:

• Chrome 15 ou superior
• Firefox 10 ou superior
• Safari 5.1+

Observe que muitos navegadores móveis ainda não parecem oferecer suporte a uma opção de tela cheia .

O Safari é compatível com isso webkitEnterFullscreen.

O Chrome deve suportá-lo, pois também é WebKit, mas com erros.

Chris Blizzard, do Firefox, disse que está lançando uma versão própria da tela cheia, que permitirá que qualquer elemento vá para a tela cheia. por exemplo Canvas

Philip Jagenstedt, da Opera, diz que eles o apoiarão em um lançamento posterior.

Sim, a especificação de vídeo HTML5 diz que não é compatível com tela cheia, mas como os usuários o desejam e todos os navegadores suportam, a especificação será alterada.

webkitEnterFullScreen();

Isso precisa ser chamado no elemento da tag de vídeo, por exemplo, para exibir em tela cheia a primeira tag de vídeo na página, use:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Aviso: esta é uma resposta desatualizada e não é mais relevante.

Muitos navegadores modernos implementaram uma API de tela cheia que permite que você concentre a tela inteira em certos elementos HTML. Isso é realmente ótimo para exibir mídias interativas, como vídeos, em um ambiente totalmente imersivo.

Para que o botão de tela cheia funcione, é necessário configurar outro ouvinte de evento que chamará a requestFullScreen()função quando o botão for clicado. Para garantir que isso funcione em todos os navegadores suportados, você também precisará verificar se o requestFullScreen()está disponível e o fallback para as versões prefixadas pelo fornecedor ( mozRequestFullScreene webkitRequestFullscreen) se não estiver.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Referência: - https://developer.mozilla.org/pt-BR/docs/Web/Guide/API/DOM/Using_full_screen_mode Referência: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -videos

Eu acho que se quisermos ter uma maneira aberta de ver vídeos em nossos navegadores sem plugins de código fechado (e todas as violações de segurança que acompanham o histórico do plug-in flash ...). A tag precisa encontrar uma maneira de ativar a tela cheia. Poderíamos lidar com isso como o flash: para fazer a tela cheia, ela deve ser ativada com um clique esquerdo com o mouse e nada mais, ou seja, não é possível pelo ActionScript iniciar tela cheia com o carregamento de um flash, por exemplo.

Espero ter sido claro o suficiente: afinal, sou apenas um estudante de TI francês, não um poeta inglês :)

Até mais!

Do CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Uma maneira programável de executar a tela cheia está funcionando agora no Firefox e no Chrome (em suas versões mais recentes). A boa notícia é que uma especificação foi elaborada aqui:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Você ainda terá que lidar com prefixos de fornecedores por enquanto, mas todos os detalhes da implementação estão sendo rastreados no site MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Você pode alterar a largura e a altura para 100%, mas não cobre o cromo do navegador ou o shell do SO.

A decisão de design é porque o HTML vive dentro da janela do navegador. Os plug-ins de flash não estão dentro da janela, para que possam ser exibidos em tela cheia.

Isso faz sentido; caso contrário, você pode criar tags img que cobrem o shell ou criar tags h1 para que a tela inteira seja uma letra.

Não, não é possível ter vídeo em tela cheia no html 5. Se você quiser conhecer os motivos, terá sorte porque a batalha de argumentos pela tela cheia está travada no momento. Consulte a lista de discussão do WHATWG e procure a palavra "vídeo". Pessoalmente, espero que eles forneçam API em tela cheia no HTML 5.

O Firefox 3.6 tem uma opção de tela cheia para vídeos HTML5, clique com o botão direito do mouse no vídeo e selecione 'tela cheia'.

As últimas noites do Webkit também oferecem suporte a vídeo HTML5 em tela cheia, tente o Sublime player com as últimas noites e segure Cmd / Ctrl enquanto seleciona a opção de tela cheia.

Eu acho que o Chrome / Opera também suporta algo assim. Espero que o IE9 também suporte vídeo HTML5 em tela cheia.

Isso é suportado no WebKit via webkitEnterFullscreen .

Uma solução alternativa seria ter que o navegador simplesmente fornecer essa opção no menu contextual. Não é necessário ter Javascript para fazer isso, embora eu pudesse ver quando seria útil.

Enquanto isso, uma solução alternativa seria simplesmente maximizar a janela (o Javascript pode fornecer as dimensões da tela) e, em seguida, maximizar o vídeo dentro dela. Experimente e simplesmente veja se os resultados são aceitáveis ​​para seus usuários.

O vídeo HTML 5 fica em tela cheia na última versão noturna do Safari, embora eu não tenha certeza de como isso é tecnicamente realizado.

A solução completa:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Se você tiver a opção de definir seu site como aplicativo progressivo da web (PWA), também haverá a opção de usar display: "fullscreen"em manifest.json . Mas isso só funcionará se o usuário adicionar / instalar seu webapp na tela inicial e abrir a partir daí.

Sim. Bem, o que acontece com o vídeo HTML5 é que você acabou de colocar a <video>tag e o navegador fornecerá sua própria interface do usuário e, portanto, a capacidade de visualização em tela cheia. Realmente torna a vida muito melhor para nós, usuários, sem precisar ver a "arte" que alguns desenvolvedores que jogam com o Flash poderiam fazer :) Também adiciona consistência à plataforma, o que é bom.

é simples, todos os problemas podem ser resolvidos assim,

1) se a fuga sempre o tirar do modo de tela cheia (isso não se aplica à entrada manual em tela cheia por meio do f11)

2) exibir temporariamente um pequeno banner informando que o modo de vídeo em tela cheia está ativado (pelo navegador)

3) bloquear a ação de tela cheia por padrão, assim como foi feito para pop-ups e banco de dados local em html5 e API de localização e etc., etc.

Não vejo nenhum problema com este design. Alguém acha que eu perdi alguma coisa?

A partir do Chrome 11.0.686.0 canal de desenvolvimento, o Chrome agora possui vídeo em tela cheia.

Você pode fazer isso se pedir ao usuário para pressionar F11 (tela cheia para muitos navegadores) e colocar o vídeo no corpo inteiro da página.

Se nenhuma dessas respostas não funcionar (como não funcionou para mim), você poderá configurar dois vídeos. Um para tamanho normal e outro para tamanho de tela cheia. Quando você deseja mudar para tela cheia

1. Use javascript para definir o atributo 'src' do vídeo em tela cheia como o atributo 'src' dos vídeos menores
2. Defina o video.currentTime no vídeo em tela cheia para ser igual ao vídeo pequeno.
3. Use css 'display: none' para ocultar o vídeo pequeno e exibir o grande com a via 'position: absolute' e 'z-index: 1000' ou algo realmente alto.