Você preparou um arquivo de vídeo corretamente para a Web. Você forneceu as dimensões e a resolução corretas. Você até criou arquivos WebM e MP4 separados para navegadores diferentes.
Para que qualquer pessoa possa ver seu vídeo, você ainda precisa adicioná-lo a uma página da Web. Para fazer isso
corretamente, é necessário adicionar dois elementos HTML: <video> e
<source>. 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, é possível 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 fechado 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 de que nem todos os navegadores oferecem suporte aos mesmos formatos de
vídeo em Noções básicas sobre arquivos de mídia. O elemento <source> permite especificar vários formatos como substituto,
caso o navegador do usuário não ofereça suporte a um deles.
O exemplo abaixo produz o vídeo incorporado que será usado como exemplo posteriormente neste artigo.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Sempre adicione um atributo type ao evento de tags <source>, mesmo que isso seja opcional. Isso garante que o navegador faça o download apenas do arquivo
capaz de reproduzir.
Essa abordagem tem várias vantagens em relação à exibição de diferentes scripts HTML ou do lado do servidor, especialmente em dispositivos móveis:
- Você pode listar os formatos em ordem de preferência.
- A troca do lado do cliente reduz a latência. Apenas uma solicitação é feita para receber o 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 no lado do servidor com detecção de user agent.
- Especificar o tipo da fonte de cada arquivo melhora o desempenho da rede. O navegador pode selecionar uma fonte 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 de dispositivos móveis, em que a largura de banda e
a latência são limitadas, e a paciência do usuário provavelmente é limitada. A omissão
do atributo type pode afetar o desempenho quando houver várias origens
com tipos não compatíveis.
Existem algumas maneiras de se aprofundar nos detalhes. Confira A Digital Media Primer for Geeks (em inglês) para saber mais sobre como vídeos e áudios funcionam na Web. Também é possível usar a depuração remota (link em inglês) no DevTools para comparar a atividade da 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="video/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 exibir várias visualizações no mesmo vídeo, como pontos de inserção em um DVD, sem ter que codificar e disponibilizar vários arquivos.
Para que esse recurso funcione, seu servidor precisa oferecer suporte a solicitações de intervalo, e esse recurso precisa estar ativado. A maioria dos servidores ativa solicitações de intervalo por padrão. Como alguns serviços de hospedagem as desativam, confirme se as solicitações de intervalo estão disponíveis para o uso de fragmentos no site.
Felizmente, é possível fazer isso nas ferramentas para desenvolvedores do navegador. No Chrome, por
exemplo, ela 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 valor, entre em contato com o 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 a src do vídeo estiver corrompida ou se nenhum dos
formatos de vídeo fornecidos tiver suporte. A única desvantagem de imagens de pôster é uma
solicitação de arquivo extra, que consome mais largura de banda e exige renderização.
Para saber mais, consulte Codificar imagens com eficiência.
Garantir que os vídeos não ultrapassem os contêineres
Quando os elementos de vídeo são muito grandes para a janela de visualização, eles podem ultrapassar o contêiner, impedindo que o usuário veja o conteúdo ou use os controles.
Você pode controlar as dimensões do vídeo usando CSS. Se o CSS não atender a todas as suas necessidades, as bibliotecas e os plug-ins JavaScript, como o FitVids, podem ajudar, mesmo para vídeos do YouTube e de outras fontes. Infelizmente, esses recursos podem aumentar o tamanho do payload da rede com consequências negativas para suas receitas e nas carteiras dos usuários.
Para usos simples, como os que estou descrevendo aqui, use as 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 computador ou laptops, mas é extremamente importante ao considerar o design de uma página da Web para dispositivos móveis e tablets.
O Safari no iPhone faz um bom trabalho ao alternar entre as orientações de retrato e paisagem:
A orientação do dispositivo pode ser problemática em um iPad e no Chrome no Android. Por exemplo, sem qualquer personalização, um vídeo reproduzido em um iPad na orientação paisagem tem a seguinte aparência:
Definir o vídeo width: 100% ou max-width: 100% com CSS pode resolver
vários problemas de layout na 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, mas não se limitando a, se a visualização é realizada em um computador e se o usuário de dispositivo móvel 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 dá aos usuários a possibilidade de relaxar essas restrições para todos os sites ou sites específicos. Para 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 nas versões recentes. Para mais detalhes, consulte Novas políticas de <vídeo> para iOS.
Mesmo em plataformas em que a reprodução automática é possível, considere se é uma boa ideia ativá-la:
- O uso de dados pode ser caro.
- A reprodução de mídia antes da solicitação do usuário pode sobrecarregar a largura de banda e a CPU e, assim, atrasar a renderização da página.
- Os usuários podem estar em um contexto em que a reprodução de vídeo ou áudio é invasiva.
Pré-carregar
O atributo preload indica ao navegador a quantidade de
informações ou conteúdo que precisa ser pré-carregada.
| Valor | Descrição |
|---|---|
none |
O usuário pode optar por não assistir o vídeo. Por isso, não pré-carregue nada. |
metadata |
Os metadados (duração, dimensões, faixas de texto) precisam ser pré-carregados, mas com o mínimo de vídeo. |
auto |
Fazer o download do vídeo inteiro imediatamente é desejável. Uma string vazia produz o mesmo resultado. |
O atributo preload tem efeitos diferentes em cada plataforma.
Por exemplo, o Chrome armazena em buffer 25 segundos de vídeo 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 ocorrem em computadores. Consulte Reprodução rápida com pré-carregamento de áudio e vídeo ou o
blog de Steve Souders (links em inglês) para mais detalhes.
Agora que você sabe como adicionar mídia à sua página da Web, é hora de aprender sobre acessibilidade de mídia, onde é possível adicionar legendas ao seu vídeo para deficientes auditivos ou quando a reprodução do áudio não é uma opção viável.