Usando HTML5 para exibir vídeo nos navegadores atuais

Hospedando Seu Próprio Vídeo HTML 5 vs. Usando o YouTube

O YouTube é um ótimo site. Isso torna mais fácil incorporar vídeo em paginas web rapidamente, e com algumas pequenas exceções, é bastante uniforme na execução desses vídeos. Se você postar um vídeo no YouTube, pode ter certeza de que qualquer pessoa poderá assisti-lo.

Mas usar o YouTube para incorporar seus vídeos tem algumas desvantagens

A maioria dos problemas com YouTube estão do lado do consumidor, e não do lado do designer, coisas como:

• Pesquisa e indexação lentas
• Interrupções de servidor
• Conteúdo sendo removido (aparentemente) arbitrariamente
• Muito conteúdo ruim

Mas existem alguns motivos pelos quais o YouTube também é ruim para desenvolvedores de conteúdo, incluindo:

• Duração máxima de 10 minutos para vídeos (para contas gratuitas)
• Baixo desempenho de upload
• O YouTube ganha direitos de uso ilimitados para o seu vídeo
• Qualquer usuário do YouTube ganha direitos de uso ilimitados para o seu vídeo

O vídeo HTML5 oferece algumas vantagens em relação ao YouTube

Usando HTML5 para vídeo permite controlar todos os aspectos de seu vídeo, desde quem pode vê-lo, por quanto tempo, o que o conteúdo contém, onde está hospedado e como o servidor funciona. E HTML5 oferece a oportunidade de codificar seu vídeo em quantos formatos você precisar para garantir que o número máximo de pessoas possa assisti-lo. Seus clientes não precisam de um plugin nem de esperar até que o YouTube lance uma versão mais recente.

Obviamente, o vídeo HTML5 oferece algumas desvantagens

Esses incluem:

• Você deve codificar seu vídeo em pelo menos três codecs diferentes.
• Você deve incluir algum JavaScript para garantir que navegadores não suportem HTML5 vai funcionar.
• Seu servidor deve ser capaz de lidar com os requisitos de largura de banda para hospedar vídeos.

Visão geral rápida do suporte de vídeo na web

Adicionar vídeo a páginas da Web sempre foi um processo difícil. Havia tantas coisas que poderiam dar errado:

• Primeiro, você usa o tag para incorporar seu vídeo em sua página. MAS essa tag está obsoleta em favor de outra tag. E alguns navegadores nunca o suportaram bem de qualquer maneira.
• Então você muda para o tag, mas os navegadores mais antigos não a suportam e os navegadores mais recentes têm suporte incompleto.
• Então você pensa Instantâneo! E codifique seu vídeo como um arquivo FLV. Mas Instantâneo não é mais compatível com dispositivos Windows.
• Então você decide enviar seu vídeo para um site de incorporação de vídeo como o YouTube, mas você tem os problemas com o YouTube que discutimos.
• Finalmente, você decide usar o HTML5, mas o Internet Explorer não oferece suporte a ele (não até o Internet Explorer 9). E mesmo se você fizer isso, há dois padrões de codec de vídeo compatíveis e apenas um navegador que pode usar os dois.

Então, o que você deve fazer? Desistir do vídeo não é mais uma opção para a maioria dos sites, pois o vídeo está se tornando cada vez mais importante. E muitos sites mudaram com sucesso para vídeo.

As páginas a seguir deste artigo mostrarão como adicionar um vídeo às suas páginas da Web que funcionam no Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 e 4, iPhone e Android e Internet Explorer 7 e 8. Você também terá as chaves necessárias para adicionar suporte para outros navegadores mais antigos, se necessário.

Crie e edite o seu vídeo

A primeira coisa de que você precisa quando vai colocar um vídeo em uma página da Web é o vídeo real. Você pode gravar continuamente e editar depois para criar um recurso ou pode fazer um script e planejá-lo com antecedência. Qualquer uma das formas funciona bem, é tudo com o que você se sente confortável. Se você não sabe que tipo de vídeo deve fazer, verifique estas ideias no Guia de vídeos para desktop:

• Projetos de vídeo familiar
• Vídeos de marketing e promocionais
• Visitas Virtuais de Vídeo
• Como fazer vídeos
• Vídeos de casamento

Aprenda a gravar vídeos de alta qualidade

Certifique-se de saber como gravar em ambientes internos e externos, bem como gravar áudio. A iluminação também é muito importante - fotos muito brilhantes prejudicam os olhos e muito escuras parecem turvas e pouco profissionais. Mesmo que você planeje ter apenas um vídeo de 30 segundos em seu site, quanto maior a qualidade, melhor será refletido em seu site.

Lembre-se também de que os direitos autorais se aplicam a qualquer som ou música (bem como a filmagens de arquivo) que você queira usar em seu vídeo. Se você não tiver acesso a um amigo que possa escrever e tocar uma música para você, você precisará encontrar música livre de Direito para jogar em segundo plano. Existem também locais onde pode armazenar filmagens para adicionar aos seus vídeos.

Editando Seu Vídeo

Não importa qual software de edição você usa, contanto que você esteja familiarizado com ele e possa usá-lo de maneira eficaz. Gretchen, o Desktop Video Guide, tem algumas dicas profissionais de edição de vídeo que podem ajudá-lo a editar seus vídeos para que tenham uma ótima aparência.

Salve seu vídeo em um MOV ou AVI (ou MPG, CD, DV)

Para o restante deste tutorial, vamos presumir que você salvou seu vídeo em algum tipo de formato de alta qualidade (não compactado) como AVI ou MOV. Embora você possa usar esses arquivos como estão, você se depara com todos os problemas com o vídeo que já discutimos. As páginas a seguir explicam como converter seu arquivo em três tipos para que seja visualizado pelo maior número de navegadores.

Converta o vídeo em Ogg para Firefox

O primeiro formato para o qual converteremos é Ogg (às vezes chamado de Ogg-Theora). Este formato pode ser visualizado pelo Firefox 3.5, Opera 10.5 e Chrome 3.

Infelizmente, embora Ogg tenha suporte para navegador, muitos dos programas de vídeo conhecidos que você pode comprar (Adobe Media Encoder, QuickTime, etc.) não oferecem uma opção de conversão Ogg. Portanto, a única maneira de converter seu vídeo para Ogg é encontrar um programa de conversão na web.

Opções de conversão

Existe uma ferramenta online chamada Media-Convert que afirma converter vários formatos de vídeo (e áudio) em outros formatos de vídeo (e áudio). Quando tentamos com meu vídeo de teste de 3 segundos, não conseguimos fazê-lo funcionar no meu Mac. Mas você pode ter melhor sorte. Este site tem a vantagem de ser gratuito.

Algumas outras ferramentas que encontramos incluem:

• Miro Video Converter (Windows Macintosh): Este programa tem a vantagem de converter para Ogg e MP4 (H.264) e é de código aberto.
• Conversor de Vídeo Grátis: Achamos que ele tem uma versão para Windows e uma versão para Macintosh, mas era difícil dizer pelo site
• Simple Theora Encoder (Macintosh): Este é o que tendemos a usar.

Depois de salvar seu vídeo no formato Ogg, salve-o em um local do seu site e vá para a próxima página para convertê-lo em outros formatos para outros navegadores.

Converta o vídeo para MP4 para Safari e Internet Explorer

O próximo formato para o qual você deve converter seu vídeo é MP4 (vídeo H.264) para que possa ser reproduzido no Internet Explorer 9 e superior, Safari 3 e 4, e no iPhone e Android.

Este formato está mais disponível em produtos comerciais e provavelmente você já tem um programa que converte para MP4 se tiver um editor de vídeo. Se você tem Adobe Premiere você pode usar o Adobe Video Encoder ou, se tiver o QuickTime Pro, que também funciona. Muitos dos conversores que discutimos na página anterior também convertem vídeos para MP4.

• MediaConvert: Uma ferramenta online da AWS.
• Miro Video Converter (Windows Macintosh): Este programa tem a vantagem de converter para Ogg e MP4 (H.264) e é de código aberto.
• SUPER (Windows): irá converter muitos tipos de arquivos diferentes para MP4
• Conversor de Vídeo Grátis: Achamos que ele tem uma versão para Windows e uma versão para Macintosh, mas era difícil dizer pelo site.

Adicione o elemento de vídeo à sua página da web

1. Crie sua página da web como faria normalmente:

2. Dentro do corpo, coloque o
3. Decida quais atributos você deseja que seu vídeo tenha: Recomendamos o uso de controles e pré-carregamento. Use a opção de pôster se o seu vídeo não tiver uma boa primeira cena.
   autoplay - para iniciar assim que for baixado
4. controles - permite que seus leitores controlem o vídeo (pausar, retroceder, avançar rapidamente)
5. loop - inicia o vídeo do início quando termina
6. pré-carregamento - pré-download do vídeo para que esteja pronto mais rápido quando o cliente clicar nele
7. poster - defina a imagem que deseja usar quando o vídeo for interrompido
8. Em seguida, adicione os arquivos de origem para as duas versões do seu vídeo (MP4 e OGG) dentro do
9. Abra a página no Chrome 1, Firefox 3.5, Opera 10 e / ou Safari 4 e verifique se ela é exibida corretamente. Você deve testá-lo pelo menos no Firefox 3.5 e Safari 4 - já que cada um usa um codec diferente.

É isso. Depois de instalar esse código, você terá um vídeo que funciona no Firefox 3.5, Safari 4, Opera 10 e Chrome 1. Mas e quanto ao Internet Explorer?

É muito fácil usar HTML 5 para adicionar um vídeo a páginas da web. A maioria dos navegadores modernos suporta vídeo HTML 5, embora nem todos o suportem da mesma forma. Mas o que isso significa é que se você salvar seu vídeo nos formatos Ogg e MP4, poderá escrever apenas quatro ou cinco linhas de HTML para exibi-lo na maioria dos navegadores modernos (exceto Internet Explorer 8). Veja como:

Escreva o marcador de tipo de documento HTML 5 para que os navegadores saibam esperar o HTML 5:

1. Crie sua página da web como faria normalmente:

2. Dentro do corpo, coloque o
3. Decida quais atributos você deseja que seu vídeo tenha: Recomendamos o uso de controles e pré-carregamento. Use a opção de pôster se o seu vídeo não tiver uma boa primeira cena.
   autoplay - para iniciar assim que for baixado
4. controles - permite que seus leitores controlem o vídeo (pausar, retroceder, avançar rapidamente)
5. loop - inicia o vídeo do início quando termina
6. pré-carregamento - pré-download do vídeo para que esteja pronto mais rápido quando o cliente clicar nele
7. poster - defina a imagem que deseja usar quando o vídeo for interrompido
8. Em seguida, adicione os arquivos de origem para as duas versões do seu vídeo (MP4 e OGG) dentro do
9. Abra a página no Chrome 1, Firefox 3.5, Opera 10 e / ou Safari 4 e verifique se ela é exibida corretamente. Você deve testá-lo pelo menos no Firefox 3.5 e Safari 4, pois cada um usa um codec diferente.

É isso. Depois de instalar esse código, você terá um vídeo que funciona no Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ e Chrome 1.

Teste em quantos navegadores você puder

Para sua tranquilidade, você também deve testar em navegadores mais antigos para ver o que eles fazem, especialmente se muitos dos seus leitores usam navegadores mais antigos.

Testar páginas de vídeo é fundamental se você deseja ter um lançamento bem-sucedido. Certifique-se de testar sua página nos navegadores e versões mais populares de seu site.

Descobrimos que, embora seja possível usar ferramentas como BrowserLab e AnyBrowser para testar vídeo, não é tão confiável quanto abrir a página em um navegador você mesmo. Ao fazer isso, você pode realmente ver se está funcionando ou não.

Como você teve todo o trabalho de codificar seu vídeo em vários formatos, deve testá-lo para ter certeza de que será exibido em vários navegadores. Isso significa que, no mínimo, você deve testá-lo no Firefox, Safari e IE.

Para sua tranquilidade, você também deve testar em navegadores mais antigos para ver o que eles fazem, especialmente se muitos dos seus leitores usam navegadores mais antigos.

Fazendo o vídeo funcionar em navegadores mais antigos

Como acontece com qualquer página da Web, você deve primeiro considerar como é importante fazer com que esses navegadores funcionem. Se 90% de seus clientes usam o Netscape, então você deve ter um plano alternativo para eles. Mas se menos de 1% o fizer, pode não importar tanto.

Depois de decidir quais navegadores você vai tentar oferecer suporte, a maneira mais fácil é simplesmente criar uma página alternativa para eles verem o vídeo. Nessa página alternativa, você incorporaria um vídeo usando HTML 4. Em seguida, use alguma forma de detecção de navegador para redirecioná-los para lá ou apenas adicione um link para essa página neste aqui.