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="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 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 tem várias vantagens em relação à veiculaçã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 alternância do lado do cliente reduz a latência. Apenas uma solicitação é feita para receber o conteúdo.
- Deixar o navegador escolher 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 prioritárias e a paciência do usuário é limitada. Omitir
o atributo type pode afetar a performance quando há várias fontes
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. Também é possível usar a depuração remota nas Ferramentas do desenvolvedor 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 torne 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 de 5 a 10 segundos, 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 exibir várias visualizações no mesmo vídeo, como pontos de acesso em um DVD, sem precisar codificar e exibir 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.
Incluir uma imagem do pôster
Adicione um atributo de imagem de capa 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 das imagens de cartaz é uma
solicitação de arquivo adicional, que consome alguma largura de banda e requer renderização.
Para mais informações, consulte Codificar imagens de forma eficiente.
Os vídeos não podem transbordar os contêineres
Quando os elementos de vídeo são muito grandes para a viewport, 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 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 de acordo com as 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 a amostra responsiva 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 computador ou laptops, mas é extremamente importante ao considerar o design de páginas da Web para dispositivos móveis e tablets.
O Safari no iPhone alterna bem entre as orientações retrato e paisagem:
A orientação do dispositivo em um iPad e o Chrome no Android podem ser problemáticos. Por exemplo, sem nenhuma personalização, um vídeo reproduzido em um iPad na orientação paisagem fica assim:
Definir o width: 100% ou max-width: 100% do vídeo 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 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 relaxem 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 um gesto 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 em que a reprodução automática é possível, é preciso 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 ocupar a largura de banda e a 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 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 carregados previamente, mas com um vídeo mínimo. |
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 plataformas diferentes.
Por exemplo, o Chrome armazena em buffer 25 segundos de vídeo no computador, mas nenhum no iOS ou
no Android. Isso significa que, em dispositivos móveis, pode haver atrasos na inicialização da reprodução
que não acontecem 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.