Existe uma maneira de fazer HTML5 fullscreen video?

https://stackoverflow.com/questions/1055214

20-08-2019
|

Pergunta

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

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

Solução

HTML 5 não fornece nenhuma maneira de fazer uma tela cheia de vídeo, mas o paralelo Fullscreen especificação suprimentos o método requestFullScreen que permite que os elementos arbitrários (incluindo elementos <video>) para ser feito maior.

Tem suporte experimental em vários navegadores .

resposta Original:

A partir da HTML5 especificação (pelo o tempo da escrita: junho '09):

Os agentes de usuário não deve fornecer uma API pública para causar vídeos para ser mostrado tela cheia. Um script, combinado com um cuidadosamente elaborado arquivo de vídeo, poderia enganar o usuário a pensar um sistema-modal de diálogo tinha sido mostrado, e solicitar ao usuário uma senha. Há também o perigo de "mera" aborrecimento, com páginas lançamento vídeos em tela cheia quando as ligações são clicado ou páginas navegadas. Em vez de, recursos de interface específico user-agent pode ser fornecido para permitir facilmente a utilizador para obter uma reprodução em tela cheia mode.

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

Note que o aviso acima já foi removido da especificação.

Outras dicas

A maioria das respostas aqui estão desatualizados.

Agora é possível trazer qualquer elemento em tela cheia usando o Fullscreen API , embora ele ainda é bastante uma confusão, porque você não pode simplesmente chamar div.requestFullScreen() em todos os navegadores, mas tem que usar métodos prefixados específicas browser.

Eu criei um simples invólucro screenfull.js que o torna mais fácil de usar a tela cheia API.

suporte ao navegador atual é:

Chrome 15 +
Firefox 10 +
Safari 5.1 +

Note que muitos navegadores móveis não parecem suportar uma opção de tela completo ainda .

Safari suporta através webkitEnterFullscreen.

Chrome deve apoiá-lo desde a sua também WebKit, mas erros fora.

Chris Blizzard of Firefox disse que eles estão saindo com sua própria versão de tela cheia que permitirá que qualquer elemento para ir para tela cheia. por exemplo. Canvas

Philip Jägenstedt de Opera diz que vai apoiá-lo em uma versão posterior.

Sim, o vídeo especificação HTML5 não diz para fullscreen apoio, mas desde que os usuários querem, e cada navegador vai apoiá-lo, a especificação vai mudar.

webkitEnterFullScreen();

Isso precisa ser chamado no elemento tag de vídeo, por exemplo, para tela cheia a primeira tag de vídeo sobre o uso página:

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

Aviso:. Esta é a resposta desatualizada e não mais relevantes

Eu acho que se nós queremos ter um caminho aberto para ver vídeos em nossos navegadores sem plugins de código fechado (e todas as violações de segurança que vem com a história do plugin flash ...). A tag tem que encontrar uma maneira de ativar a tela cheia .. Nós poderíamos lidar com isso como o flash faz: fazer tela cheia, tem que ser ativado por um clique esquerdo com o mouse e mais nada, quero dizer que não é possível por ActionScript para lançamento tela cheia no 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:)

See Ya!

Muitos navegadores modernos têm implementado uma API FullScreen que lhe permite dar foco em tela cheia a certos elementos HTML. Este é realmente grande para a exibição de mídia interativa, como vídeos em um ambiente totalmente imersiva.

Para obter o botão de tela cheia de trabalho que você precisa para configurar outro ouvinte de evento que irá chamar a função requestFullScreen() quando o botão é clicado. Para garantir que este trabalho em todos os navegadores suportados você também vai precisar de verificar para ver se o requestFullScreen() está disponível e fallback para as versões de fornecedores prefixado (mozRequestFullScreen e webkitRequestFullscreen) se não é.

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 / Guia / API / DOM / Using_full_screen_mode Referência: - http://blog.teamtreehouse.com/building-custom- controles-para-HTML5 vídeos

Uma maneira programável para fazer fullscreen está trabalhando agora no Firefox e Chrome (em suas versões mais recentes). A boa notícia é que uma especificação tem sido projecto aqui:

http://dvcs.w3.org/hg/ fullscreen / raw-file / dica / overview.html

Você ainda terá que lidar com prefixos de fornecedor para agora, mas todos os detalhes de implementação estão sendo acompanhados no site do MDN:

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

De 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;
}

Você pode alterar a largura e altura para ser 100%, mas não vai cobrir o cromo navegador ou o shell OS.

Projeto decisão é porque HTML vive dentro da janela do browser. plugins flash não estão dentro da janela, para que eles possam ir para tela cheia.

Isso faz sentido, caso contrário, você poderia fazer tags img que cobriam o shell, ou fazer h1 tags para a tela inteira foi uma carta.

Não, não é possível ter vídeo em tela cheia em html 5. Se você quer saber razões, você tem sorte, porque a batalha argumento para fullscreen é travada agora. Consulte WHATWG mailing list e olhar para o palavra "vídeo". Eu, pessoalmente, espero que eles fornecem API fullscreen em HTML 5.

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

Os últimos nightlies Webkit também suportam vídeo HTML5 tela cheia, tentar o Sublime jogador com a mais recente nightly e segure Cmd / Ctrl ao selecionar a opção de tela cheia.

Eu acho que Chrome / Opera também vai apoiar algo como isto. Esperemos IE9 também suporta vídeo HTML5 tela cheia.

Este é suportado no WebKit via webkitEnterFullscreen .

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

Nesse meio tempo uma solução alternativa seria simplesmente para maximizar a janela (Javascript pode fornecer dimensões da tela) e, em seguida, maximizar o vídeo dentro dele. Dê-lhe um ir e depois simplesmente ver se os resultados são aceitáveis ??para os usuários.

HTML 5 vídeo faz fullscreen ir na última nightly build do Safari, embora eu não tenho certeza de como é 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();
                    }
            }
    }

Sim. Bem, o que acontece com o vídeo HTML5 é que você acabou de colocar a tag <video> eo navegador vai dar a sua própria interface do usuário, e, portanto, a capacidade para a visualização de tela cheia. É realmente torna a vida muito melhor sobre nós usuários para não ter de ver a "arte" algum desenvolvedor de jogo com o Flash pode fazer :) Ele também adiciona consistência para a plataforma, que é bom.

É simples, todos os problemas podem ser resolvidos como este,

1) temos escapar sempre levá-lo para fora da tela cheia modo (Isto não se aplica para inserir manualmente fullscreen através f11)

2) exibir temporariamente uma pequena bandeira que diz modo de vídeo em tela cheia é inserido (pelo navegador)

3) Bloco de tela cheia ação 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 qualquer problema com o seu design. Alguém acha que eu perdi alguma coisa?

A partir do Chrome 11.0.686.0 canal dev Chrome agora tem vídeo em tela cheia.

Você pode fazer isso se você contar com o usuário para pressionar F11 (tela cheia para muitos navegadores), e você colocar o vídeo em todo o corpo da página.

Se nenhuma dessas respostas não funcionam (como eles não deixaram para mim) você pode configurar dois vídeos. Uma para o tamanho regular e outro para fullscreen tamanho. Quando você quiser mudar para fullscreen

Use JavaScript para definir o atributo do vídeo fullscreen 'src' para 'src' os vídeos menores atributo
Defina o video.currentTime no vídeo fullscreen para ser o mesmo que o pequeno vídeo.
Use css 'display: none' para esconder o pequeno vídeo e exibir o grande com a via 'position: absolute' e 'z-index: 1000'. Ou algo realmente alto

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow