Você preparou um arquivo de vídeo corretamente para a Web. Você forneceu as dimensões corretas e a resolução correta. Você até criou arquivos WebM e MP4 separados para navegadores diferentes.
Para que qualquer pessoa possa assistir seu vídeo, você ainda precisa adicioná-lo a uma página da Web. Para fazer isso
corretamente, é necessário adicionar dois elementos HTML: o elemento <video> e o
<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, você pode usar o elemento de vídeo sozinho. Sempre
use o atributo type, conforme mostrado abaixo. O navegador usa isso para determinar se
ele 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
Como vimos em Noções básicas sobre arquivos de mídia, nem todos os navegadores oferecem suporte aos mesmos formatos
de vídeo. 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 mais adiante 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 ele seja opcional. Isso garante que o navegador só faça o download do arquivo que ele
é capaz de reproduzir.
Essa abordagem apresenta diversas vantagens em relação à apresentação de diferentes scripts HTML ou no lado do servidor, especialmente para dispositivos móveis:
- Você pode listar 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 de cada fonte de 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 identificar 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 escassas e a paciência do usuário provavelmente é limitada. Omitir
o atributo type pode afetar o desempenho quando há várias fontes
com tipos não compatíveis.
Há algumas maneiras de analisar os detalhes. Confira A Digital Media Primer for Geeks para saber mais sobre como arquivos de vídeo e áudio funcionam na Web. Também é possível usar a depuração remota nas Ferramentas do desenvolvedor para comparar a atividade de rede com atributos type e sem atributos type.
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 de término ao elemento video.
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 de 5 a 10 segundos, 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 apresentar várias visualizações no mesmo vídeo, como pontos de sinalização em um DVD, sem precisar codificar e enviar vários arquivos.
Para que esse recurso funcione, seu 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, é possível fazer isso nas ferramentas para desenvolvedores do navegador. No Chrome, por
exemplo, ele fica no painel de rede. Procure o cabeçalho Accept-Ranges e
verifique se ele diz bytes. Na imagem, desenhei uma caixa vermelha em volta do
cabeçalho. Se o valor não for bytes, entre em contato com seu provedor de hospedagem.
Inclua uma imagem de pôster
Adicione um atributo poster 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 plano B se o vídeo src estiver corrompido ou se nenhum dos
formatos de vídeo fornecidos for compatível. A única desvantagem de imagens de pôster é uma
solicitação de arquivo adicional, que consome mais largura de banda e exige renderização.
Para mais informações, consulte Codificar imagens de forma eficiente.
Garanta que os vídeos não ultrapassem os contêineres
Quando elementos de vídeo são grandes demais para a janela de visualização, eles podem ultrapassar o contêiner, impossibilitando que os usuários vejam o conteúdo ou usem os controles.
Você pode 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 o FitVids, podem ajudar, mesmo para vídeos do YouTube e de outras fontes. Infelizmente, esses recursos podem aumentar os tamanhos de payload de rede com consequências negativas para suas receitas e 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), experimente 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 que não responde 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 desktop ou laptops, mas é extremamente importante ao considerar o design de uma página da Web para dispositivos móveis e tablets.
O Safari do iPhone troca entre as orientações de retrato e paisagem de forma adequada:
A orientação do dispositivo pode ser problemática em um iPad ou no Chrome do Android. Por exemplo, sem qualquer personalização, um vídeo reproduzido em um iPad na orientação paisagem tem a seguinte aparência:
Definir width: 100% ou max-width: 100% para o vídeo com CSS pode resolver
muitos problemas de layout relacionados à 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 forma exata de funcionamento depende da plataforma e do navegador.
Chrome: depende de vários fatores, incluindo, mas não se limitando a se a visualização é em um computador e se o usuário de dispositivos móveis adicionou seu site ou app à tela inicial. Para mais detalhes, consulte as práticas recomendadas para reprodução automática.
Firefox: bloqueia todos os vídeos e sons, mas permite que os usuários afrouxem 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, exigia uma ação do usuário, mas tem relaxado essa exigência nas versões recentes. Para mais detalhes, consulte Novas políticas de <vídeo> para iOS.
Mesmo em plataformas nas quais a reprodução automática é possível, você precisa considerar se é uma boa ideia ativar esse recurso:
- O uso de dados pode ser caro.
- A reprodução de mídia antes que o usuário queira pode ocupar a largura de banda e a CPU e, assim, atrasar a renderização da página.
- Os usuários podem estar em um contexto no qual a reprodução de vídeo ou áudio seja intrusiva.
Pré-carregar
O atributo preload indica ao navegador a quantidade
de informações ou conteúdo a ser pré-carregado.
| Valor | Descrição |
|---|---|
none |
O usuário pode escolher não assistir o vídeo. Portanto, não faça o pré-carregamento de nada. |
metadata |
Os metadados (duração, dimensões, faixas de texto) precisam ser pré-carregados, mas com quantidade mínima de vídeo. |
auto |
Fazer 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 diferentes plataformas.
Por exemplo, o Chrome tem um buffer de 25 segundos de vídeo em computadores, mas nenhum no iOS ou
no Android. Isso significa que, em dispositivos móveis, pode haver atrasos no início da reprodução
que não estão presentes em computadores. 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 a acessibilidade de mídia, em que você vai adicionar legendas ao seu vídeo para pessoas com deficiência auditiva ou quando a reprodução do áudio não for uma opção viável.