A tag de vídeo HTML5 facilita a adição de vídeos a suas páginas da Web. Mas, embora pareça fácil na superfície, há muitas coisas que você precisa fazer para colocar seu vídeo em funcionamento. Este tutorial guiará você pelas etapas para criar uma página em HTML5 que executará o vídeo em todos os navegadores modernos.
- Hospedando seu próprio vídeo em HTML5 versus o YouTube
- Visão geral rápida do suporte de vídeo na Web
- Crie e edite seu vídeo
- Converter o vídeo para Ogg para o Firefox
- Converter o vídeo para MP4 para o Safari
- Converter o vídeo para FLV para o Internet Explorer
- Adicione o elemento de vídeo à sua página da Web
- Adicione o JavaScript e o Flash Player para obter o Internet Explorer para funcionar
- Teste em quantos navegadores você puder
Hospedando seu próprio vídeo HTML 5 vs.
O YouTube é um ótimo site. Isso facilita a incorporação rápida de vídeos a páginas da Web e, com algumas exceções, é bastante simples 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 alguns inconvenientes
A maioria dos problemas com o YouTube está do lado do consumidor, e não do lado do designer, coisas como:
- Pesquisa lenta e indexação
- Interrupções do servidor
- Conteúdo sendo removido (aparentemente) arbitrariamente
- Muito conteúdo ruim
Mas há alguns motivos pelos quais o YouTube é ruim para os desenvolvedores de conteúdo, incluindo:
- Duração máxima de 10 minutos para vídeos (para contas gratuitas)
- Desempenho insatisfatório de upload
- O YouTube ganha direitos de uso ilimitados para seu vídeo
- Qualquer usuário do YouTube ganha direitos de uso ilimitados para seu vídeo
Vídeo em HTML5 oferece algumas vantagens sobre o YouTube
O uso de HTML5 para vídeo permite controlar todos os aspectos de seu vídeo, de quem pode visualizá-lo, quanto tempo ele é, o conteúdo, onde é hospedado e como o servidor funciona. Além disso, o vídeo em HTML5 oferece a oportunidade de codificar seu vídeo em tantos formatos quantos forem necessários para garantir que o número máximo de pessoas possa visualizá-lo. Seus clientes não precisam de um plug-in ou aguardar até o YouTube lançar uma versão mais recente.
Claro, o vídeo HTML5 oferece alguns inconvenientes
Esses incluem:
- Você tem que codificar seu vídeo em pelo menos três codecs diferentes
- Você precisa incluir um pouco de JavaScript para garantir que os navegadores que não suportam HTML5 funcionem
- Seu servidor tem que ser capaz de lidar com os requisitos de largura de banda de hospedagem de vídeos
Continue lendo abaixo
02 de 10Visão geral rápida do suporte de vídeo na Web
Adicionar vídeo a páginas da Web há muito tempo é 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 suportaram bem de qualquer maneira.
- Então você muda para o mas os navegadores mais antigos não são compatíveis e os navegadores mais recentes são incompletos em seu suporte.
- Então você acha que o Flash! E codifique seu vídeo como um arquivo FLV. Mas o Flash não é suportado em muitos dispositivos móveis e muitas pessoas detestam o Flash não importa como ele é usado (25% dos entrevistados na minha pesquisa perguntando como você se sente sobre o Flash afirmou que eles não suportam o Flash de forma alguma).
- Então você decide enviar seu vídeo para um site de incorporação de vídeos 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 o suporta (não até o Internet Explorer 9). E mesmo se você fizer isso, existem dois padrões de codec de vídeo que são suportados e apenas um navegador que pode usar ambos. Suporte a navegadores para codecs de vídeo e contêineres
Então, o que você deveria 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 o vídeo.
As páginas seguintes deste artigo mostrarão como adicionar vídeos à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, Flash e Internet Explorer 7 e 8. Você também tem as chaves necessárias para adicionar suporte a outros navegadores mais antigos, se necessário.
Continue lendo abaixo
03 de 10Crie e edite seu vídeo
A primeira coisa que você precisa quando vai colocar um vídeo em uma página da Web é o vídeo real. Você pode filmar continuamente e editar depois para criar um recurso, ou pode roteirizá-lo e planejá-lo antes do tempo. De qualquer maneira funciona bem, é apenas o que você está confortável com. Se você não sabe que tipo de vídeo você deve fazer, confira essas ideias no Guia de Vídeo da Área de Trabalho:
- Projetos de vídeo familiar
- Vídeos promocionais e de marketing
- Passeios Virtuais em Vídeo
- Como Vídeos
- Vídeos de casamento
Aprenda como gravar vídeo de alta qualidade
Certifique-se de que sabe gravar em interiores e exteriores, bem como gravar áudio. A iluminação também é muito importante - tiros que são muito brilhantes machucam os olhos, e muito escuros apenas parecem enlameados e pouco profissionais. Mesmo que você planeje ter apenas um vídeo de 30 segundos em seu site, quanto mais alta a qualidade, melhor será refletida no seu website.
Lembre-se também de que os direitos autorais se aplicam a qualquer som ou música (bem como imagens 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ê, precisará encontrar músicas livres de royalties para tocar em segundo plano. Há também lugares onde você pode armazenar vídeos 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 efetivamente. Gretchen, o Guia de Vídeo da Área de Trabalho, tem algumas dicas de edição de vídeo profissionais que podem ajudar você a editar seus vídeos para que eles pareçam ótimos.
Salve seu vídeo em um MOV ou AVI (ou MPG, CD, DV)
Para o restante deste tutorial, vamos supor que você tenha seu vídeo salvo em algum tipo de formato de alta qualidade (não-comprimido) 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 explicarão como converter seu arquivo em três tipos para que ele seja visível pelo maior número de navegadores.
04 de 10Converter o vídeo para Ogg para o Firefox
O primeiro formato para o qual vamos converter é o Ogg (às vezes chamado de Ogg-Theora). Este formato é aquele que o Firefox 3.5, o Opera 10.5 e o Chrome 3 podem visualizar.
Infelizmente, embora o Ogg tenha suporte ao 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. Então, 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 pretende 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 que ele funcionasse no meu Mac. Mas você pode ter mais 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 é open source.
- Koyote Video Converter (Windows)
- Free Video Converter Nós achamos que isso tem uma versão do Windows e uma versão para Macintosh, mas era difícil dizer a partir do site deles
- Theora Encoder simples (Macintosh) - este é o que nós tendemos a usar.
Depois de salvar seu vídeo no formato Ogg, salve-o em um local em seu site e vá para a próxima página para convertê-lo em outros formatos para outros navegadores.
Continue lendo abaixo
05 de 10Converter o vídeo para MP4 para o Safari
O próximo formato em que você deve converter seu vídeo é o MP4 (vídeo H.264) para que ele possa ser reproduzido no Safari 3 e 4 e no iPhone e Android. Além disso, vídeos H.264 podem ser facilmente convertidos em arquivos FLV para assistir no Flash.
Este formato está mais prontamente disponível em produtos comerciais, e você provavelmente já tem um programa que irá converter para MP4 se você tiver um editor de vídeo. Se você tiver o Adobe Premiere, poderá usar o Adobe Video Encoder ou o QuickTime Pro, que também funcionará. Muitos dos conversores que discutimos na página anterior também convertem vídeos para MP4.
- MediaConvert - Uma ferramenta on-line da AWS.
- Miro Video Converter (Windows Macintosh) - Este programa tem a vantagem de converter para Ogg e MP4 (H.264) e é open source.
- SUPER (Windows) - irá converter muitos tipos de arquivos diferentes para MP4 e FLV
- Free Video Converter Nós achamos que isso tem uma versão do Windows e uma versão para Macintosh, mas era difícil dizer a partir do site deles.
Salve seu arquivo MP4 no seu site e, em seguida, você precisará convertê-lo para o Flash para uso do Internet Explorer.
06 de 10Converter o vídeo para FLV para o Internet Explorer
A maneira mais fácil de converter vídeos em FLV é usar o próprio Flash. É assim que convertemos meus vídeos para o Flash. Mas se você não tem Flash, aqui estão duas ferramentas populares para converter arquivos para FLV:
- SUPER (Windows) - irá converter muitos tipos de arquivos diferentes para MP4 e FLV
- ffmpegX (Macintosh) - converterá muitos tipos diferentes de arquivos para Mp4 e FLV.
Salve seu arquivo FLV em seu site e a próxima página mostrará como gravar o HTML para que você possa reproduzir seus vídeos.
Continue lendo abaixo
07 de 10Adicione o elemento de vídeo à sua página da Web
É muito fácil usar o HTML 5 para adicionar vídeo a páginas da Web. A maioria dos navegadores modernos suporta vídeo HTML 5, embora eles não suportem todos da mesma maneira. Mas o que isso significa é que, se você salvar seu vídeo como formato Ogg e MP4, poderá gravar apenas quatro ou cinco linhas de HTML para exibi-lo na maioria dos navegadores modernos (exceto o Internet Explorer 8). Veja como:
Escreva o marcador de doctype HTML 5 para que os navegadores saibam esperar HTML 5:
- Crie sua página da Web como você normalmente criaria:
- Dentro do corpo, coloque o
- 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 seu vídeo não tiver uma boa primeira cena.
- autoplay - para começar assim que é transferido
- controles - permite que seus leitores controlem o vídeo (pausa, retrocesso, avanço rápido)
- loop - inicia o vídeo desde o início quando termina
- pré-carregamento - faça um pré-download do vídeo para que fique pronto mais rapidamente quando o cliente clicar nele
- cartaz - defina a imagem que você deseja usar quando o vídeo for interrompido
- Em seguida, adicione os arquivos de origem para as duas versões do seu vídeo (MP4 e OGG) dentro do
- 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 em pelo menos o Firefox 3.5 e o Safari 4 - já que cada um usa um codec diferente.
É isso aí. Depois de ter este código, você terá um vídeo que funciona no Firefox 3.5, Safari 4, Opera 10 e Chrome 1. Mas e o Internet Explorer?
O Internet Explorer não gosta do HTML 5 ou do
Na próxima seção, falaremos sobre o que você pode fazer para que o IE 8 funcione bem com suas tags de vídeo HTML 5 e exiba um vídeo. Você tem que usar o Flash.A boa notícia é que o IE 9 deve suportar o HTML 5 e a tag de vídeo.
08 de 10Adicione o JavaScript e o Flash Player para obter o Internet Explorer para funcionar
Você deve ter notado que no HTML da página anterior, não havia linha de origem para o arquivo FLV. E se você testou essa página no Internet Explorer, não funcionaria. Isso porque o Internet Explorer não reconhece o HTML 5 e não pode reproduzir vídeos OGG ou MP4 de forma nativa. Para que o Internet Explorer 7 e 8 funcionem, é necessário que ele seja reproduzido como Flash. Mas há mais etapas para fazê-lo funcionar do que apenas adicionar o arquivo FLV.
Etapa 1: obtenha um player de vídeo em Flash para o seu site
Recomendamos o uso do FlowPlayer, pois ele é um player de vídeo em Flash de software livre que você pode instalar no seu servidor da Web e usá-lo sempre que tiver vídeos em Flash para reproduzir. A versão gratuita do FlowPlayer insere publicidade em seus vídeos, mas você também pode comprar licenças comerciais se precisar delas.
Siga as instruções no site FlowPlayer para instalar o FlowPlayer em seu site. Em poucas palavras, você instalará dois arquivos SWF e um arquivo JavaScript em seu site. Na parte inferior do seu HTML, (antes do tag) você adicionará uma linha:
Mas o Internet Explorer ainda não vai reproduzir o vídeo, você tem que ensiná-lo a reconhecer tags HTML 5.
Etapa 2: Convencer o Internet Explorer a ler tags HTML 5
Há um script útil no Google Code chamado "HTML Shiv" que ajudará o IE a reconhecer elementos HTML 5. Então no
do seu documento HTML que você deseja referenciá-lo. É melhor incluí-lo nos comentários condicionais do IE para que outros navegadores não fiquem confusos:
Ok, agora o IE reconhecerá o
