Você preparou corretamente um arquivo de vídeo para a Web. Você deu a ele as dimensões e a resolução corretas. Você até criou arquivos WebM e MP4 separados para diferentes navegadores.
Para que qualquer pessoa possa assistir seu vídeo, ainda é necessário adicioná-lo a uma página da Web. Para fazer isso
corretamente, adicione dois elementos HTML: o <video> elemento e o
<source> elemento. Além dos conceitos básicos sobre essas tags, este artigo explica os atributos que você precisa adicionar a elas para criar uma boa experiência do usuário.
Especificar um único arquivo
Embora não seja recomendado, você pode usar o elemento de vídeo sozinho. Sempre use o atributo type, conforme mostrado abaixo. O navegador usa isso para determinar se pode reproduzir o arquivo de vídeo fornecido. Se não for possível, o texto incluído será exibido.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Especificar vários formatos de arquivo
Lembre-se dos conceitos básicos de arquivos de mídia que nem todos os navegadores oferecem suporte aos mesmos formatos de vídeo. O elemento <source> permite especificar vários formatos como um substituto
caso o navegador do usuário não ofereça suporte a um deles.
O exemplo abaixo produz o vídeo incorporado que é usado como exemplo mais adiante neste artigo.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Sempre adicione um atributo type às tags <source>, mesmo que
seja opcional. Isso garante que o navegador só faça o download do arquivo que ele pode reproduzir.
Essa abordagem tem várias vantagens em relação à veiculação de scripts HTML ou do lado do servidor diferentes, especialmente em dispositivos móveis:
- É possível listar formatos em ordem de preferência.
- A troca do lado do cliente reduz a latência. Apenas uma solicitação é feita para receber conteúdo.
- Permitir que o navegador escolha um formato é mais simples, rápido e potencialmente mais confiável do que usar um banco de dados de suporte do lado do servidor com detecção de user-agent.
- Especificar o tipo de cada origem de arquivo melhora a performance da rede. O navegador pode selecionar uma origem de vídeo sem precisar fazer o download de parte do vídeo para "detectar" o formato.
Esses problemas são especialmente importantes em contextos móveis, em que a largura de banda e a latência são importantes, e a paciência do usuário provavelmente é limitada. Omitir o atributo type pode afetar a performance quando há várias origens com tipos não compatíveis.
Há algumas maneiras de analisar os detalhes. Confira um guia de mídia digital para geeks para saber mais sobre como o vídeo e o áudio funcionam na Web. Você também pode usar a depuração remota no DevTools para comparar a atividade de rede com atributos de tipo e sem atributos de tipo.
Especificar os horários de início e término
Economize largura de banda e deixe seu site mais responsivo: use fragmentos de mídia para adicionar horários de início e término ao elemento de vídeo.
Para usar um fragmento de mídia, adicione #t=[start_time][,end_time] ao URL da mídia. Por exemplo, para reproduzir o vídeo dos segundos 5 a 10, especifique:
<source src="chrome.webm#t=5,10" type="video/webm">
Também é possível especificar os horários em <hours>:<minutes>:<seconds>. Por exemplo, #t=00:01:05 inicia o vídeo em um minuto e cinco segundos. Para reproduzir apenas o primeiro minuto do vídeo, especifique #t=,00:01:00.
Você pode usar esse recurso para oferecer várias visualizações no mesmo vídeo, como pontos de inserção em um DVD, sem precisar codificar e disponibilizar vários arquivos.
Para que esse recurso funcione, o servidor precisa oferecer suporte a solicitações de intervalo, e essa capacidade precisa estar ativada. A maioria dos servidores ativa as solicitações de intervalo por padrão. Como alguns serviços de hospedagem os desativam, confirme se as solicitações de intervalo estão disponíveis para usar fragmentos no seu site.
Felizmente, você pode fazer isso nas ferramentas de desenvolvedor do navegador. No Chrome, por
exemplo, ele está no painel Network. Procure o cabeçalho Accept-Ranges e verifique se ele diz bytes. Na imagem, desenhei uma caixa vermelha ao redor desse cabeçalho. Se você não vir bytes como o valor, entre em contato com seu provedor de hospedagem.
Incluir uma imagem do pôster
Adicione um atributo de pôster ao elemento video para que os espectadores tenham uma ideia do conteúdo assim que o elemento for carregado, sem precisar fazer o download do vídeo ou iniciar a reprodução.
<video poster="poster.jpg" ...>
…
</video>
Um pôster também pode ser um substituto se o src do vídeo estiver corrompido ou se nenhum dos formatos de vídeo fornecidos for compatível. A única desvantagem de uma imagem de pôster é uma solicitação de arquivo adicional, que consome alguma largura de banda e exige renderização.
Para mais informações, consulte Codificar imagens com eficiência.
Garantir que os vídeos não transbordem os contêineres
Quando os elementos de vídeo são muito grandes para a janela de visualização, eles podem transbordar o contêiner, impossibilitando que o usuário veja o conteúdo ou use os controles.
É possível controlar as dimensões do vídeo usando CSS. Se o CSS não atender a todas as suas necessidades, bibliotecas e plug-ins JavaScript, como FitVids podem ajudar, mesmo para vídeos do YouTube e de outras fontes. Infelizmente, esses recursos podem aumentar os tamanhos de payload da rede com consequências negativas para suas receitas e para as carteiras dos usuários.
Para usos simples como os que estou descrevendo aqui, use consultas de mídia CSS para
especificar o tamanho dos elementos dependendo das dimensões da janela de visualização. max-width:
100% é seu amigo.
Para conteúdo de mídia em iframes (como vídeos do YouTube), tente uma abordagem responsiva (como a proposta por John Surdakowski).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
Compare o exemplo responsivo com a versão não responsiva. Como você pode ver, a versão não responsiva não é uma ótima experiência do usuário.
Orientação do dispositivo
A orientação do dispositivo não é um problema para monitores de computadores ou laptops, mas é muito importante ao considerar o design de páginas da Web para dispositivos móveis e tablets.
O Safari no iPhone faz um bom trabalho de alternância entre a orientação retrato e paisagem:
A orientação do dispositivo em um iPad e no Chrome no Android pode ser problemática. Por exemplo, sem nenhuma personalização, um vídeo reproduzido em um iPad na orientação paisagem fica assim:
Definir o vídeo width: 100% ou max-width: 100% com CSS pode resolver
muitos problemas de layout de orientação do dispositivo.
Reprodução automática
O atributo autoplay controla se o navegador faz o download e reproduz um vídeo imediatamente. A maneira exata como ele funciona depende da plataforma e do navegador.
Chrome: depende de vários fatores, incluindo, entre outros, se a visualização está no computador e se o usuário de dispositivos móveis adicionou seu site ou app à tela inicial. Para mais detalhes, consulte Práticas recomendadas de reprodução automática.
Firefox: bloqueia todos os vídeos e sons, mas oferece aos usuários a capacidade de relaxar essas restrições para todos os sites ou sites específicos. Para mais detalhes, consulte Permitir ou bloquear a reprodução automática de mídia no Firefox.
Safari: historicamente exigiu um gesto do usuário, mas tem relaxado esse requisito em versões recentes. Para mais detalhes, consulte Novas políticas de <video> para iOS.
Mesmo em plataformas em que a reprodução automática é possível, é necessário considerar se é uma boa ideia ativá-la:
- O uso de dados pode ser caro.
- A reprodução de mídia antes que o usuário queira pode consumir largura de banda e CPU, atrasando a renderização da página.
- Os usuários podem estar em um contexto em que a reprodução de vídeo ou áudio é intrusiva.
Pré-carregar
O atributo preload fornece uma dica ao navegador sobre a quantidade de informações ou conteúdo a ser pré-carregado.
| Valor | Descrição |
|---|---|
none |
O usuário pode optar por não assistir o vídeo, então não preload nada. |
metadata |
Os metadados (duração, dimensões, faixas de texto) precisam ser pré-carregados, mas com vídeo mínimo. |
auto |
O download de todo o vídeo imediatamente é considerado desejável. Uma string vazia produz o mesmo resultado. |
O atributo preload tem efeitos diferentes em plataformas diferentes.
Por exemplo, o Chrome armazena 25 segundos de vídeo em buffer no computador, mas nenhum no iOS ou Android. Isso significa que, em dispositivos móveis, pode haver atrasos na inicialização da reprodução que não acontecem no computador. Consulte Reprodução rápida com pré-carregamento de áudio e vídeo ou
o blog de Steve Souders para mais detalhes.
Agora que você sabe como adicionar mídia à sua página da Web, é hora de aprender sobre acessibilidade de mídia, em que você vai adicionar legendas ao vídeo para pessoas com deficiência auditiva ou quando a reprodução de áudio não for uma opção viável.