Vídeos HTML5 10 designers de coisas precisam saber

A revolução do HTML5 é empolgante para web designers de todas as áreas do globo. As novas especificações suportam dezenas de elementos e atributos para construir sites semânticos. Esses novos recursos incluem tags de multimídia para formatos de áudio e vídeo.

Nos últimos anos, um player de mídia baseado em Flash, mais do que suficiente para o streaming na Web e essa tecnologia, ainda é necessário para oferecer suporte a navegadores legados. Mas, felizmente, os padrões modernos avançaram e a inclusão do vídeo HTML5 abre portas para dezenas de novas oportunidades.

Neste guia, gostaria de oferecer uma introdução ao vídeo em HTML5 para a Web. Será preciso alguma prática para entender o player nativo do navegador e todas as suas funcionalidades. E a melhor maneira de se familiarizar é mergulhar de cabeça!

1. Tipos de Mídia

Quando você está trabalhando com um player de vídeo em flash, é muito comum associar todos os formatos de vídeo em .flv. Embora isso funcione, a maioria dos arquivos flv não pode manter a qualidade em nenhum lugar próximo dos formatos / codecs de arquivo mais avançados. Existem 3 tipos de vídeo importantes que são suportados pelo HTML5: MP4, WebM e Ogg / Ogv. O tipo de arquivo MPEG-4 é geralmente codificado em H.264, o que permite a reprodução em players Flash de terceiros. Isso significa que você não precisa manter uma cópia de vídeo .flv para suportar um método de fallback! WebM e Ogg são dois tipos de arquivos muito mais recentes relacionados ao vídeo HTML5. O Ogg usa a codificação Theora que é baseada no formato de arquivo de áudio padrão de código aberto. Estes podem ser salvos com uma extensão .ogg ou .ogv.

O WebM é um projeto desenvolvido pelo Google sobre o qual você pode ler mais no site do Projeto WebM. O formato já é suportado pelo Opera, pelo Google Chrome, pelo Firefox 4+ e, mais recentemente, pelo Internet Explorer 9. Ele ainda é desconhecido pela maioria dos profissionais da Web, mas o WebM é o formato de mídia de vídeo líder no futuro dos vídeos da Web..

2. Suporte ao Navegador

Então, quais destes tipos de arquivo você precisa para o seu site? Bem idealmente todos os 3 seria ótimo, pois fornecem o espectro completo de suporte. No entanto, isso não é realista e, de fato, você pode cobrir todas as bases com apenas duas delas. Aqui está um resumo do que funciona para cada navegador:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - sem HTML5, somente Flash!

Se você se lembra, eu mencionei anteriormente que a maioria dos players de vídeo em flash suportará arquivos MP4, contanto que estejam codificados em H.264. Assim, cada um desses navegadores incorporará o MP4 + Flash como um recurso final. Isso significa que você só precisa criar dois formatos de vídeo diferentes para suportar todos os navegadores. MP4 para Safari / IE9 e uma escolha entre WebM ou Ogg para o resto.

Na minha opinião, eu recomendo ficar com o formato WebM. Ele tem alguns grandes nomes por trás do projeto (o Google) e ganhou muita força na comunidade HTML5. O Ogg / Ogv será suportado, mas provavelmente perderá popularidade no tamanho de arquivo menor do WebM. Você pode ler uma matéria relacionada sobre o futuro do vídeo na web escrito por Sean Golliher.

3. Incorporando Vídeos Simples em HTML5

Vamos agora dar uma olhada na sintaxe necessária para incorporar algum código de amostra. Tudo o que precisamos é da tag de vídeo HTML5 para fazer referência a cada URL do filme.

Observe o controles e Reprodução automática os atributos não precisam ser definidos com nenhum valor. Eu também incluí um poster atributo que pré-carrega uma imagem sobre o player de vídeo antes da transmissão. Esta é uma pré-visualização comum com muitos leitores da Web.

Oferecemos formatos MP4 e WebM internos ao elemento de vídeo. Se nenhum deles puder ser carregado, exibiremos um erro para o usuário atualizar o navegador.

4. Oferecendo um retorno de Flash

O exemplo acima é perfeito para todos os navegadores da Web compatíveis com os padrões. No entanto, também precisamos considerar que o mundo nem sempre está na ponta da tecnologia. Precisamos dar suporte a usuários em versões mais antigas do Safari, Mozilla Firefox e especialmente do Internet Explorer.

A melhor maneira de conseguir isso é através de um player de fallback Flash. Estes podem ser adicionados usando o Embutir ou objeto tags para fazer referência a um arquivo .swf de terceiros. O JW Player e o Flowplayer são duas soluções gratuitas de código aberto que você pode considerar. Mas também confira players de vídeo premium no ActiveDen, que custam menos de US $ 15 a US $ 20..

Agora vamos ajustar o código acima para incluir um Flashback substituto para suportar praticamente todos os navegadores existentes.

5. Suporte a dispositivos móveis

Este tópico ainda é altamente debatido, já que o setor de telefonia móvel é muito jovem. A Apple saiu com suporte para MP4 em dispositivos Mac e iOS. Isso significa que você pode transmitir nativamente arquivos de vídeo .mp4 no seu iPad, iPhone ou iPod Touch na interface de vídeo padrão. Isso cobre muito da participação de mercado.

Recentemente, os dispositivos Android estavam tendo dificuldades em obter esse mesmo nível de suporte. No entanto, o Google finalmente adotou o streaming da web .mp4, que agora aproveita quase todos os usuários móveis. E como o Flash não é uma opção, o MP4 é a melhor solução disponível. É por isso que você deseja incorporar o código .mp4 primeiro para que os dispositivos iOS reconheçam o arquivo imediatamente.

6. Agente do Usuário Safari

Um bug que deve ser mencionado é aquele existente entre os Flash players e o streaming HTML5 .mp4 nativo no Safari. Como o navegador pode suportar os dois arquivos, você pode ter problemas para obter o fluxo de vídeo HTML5 no lugar do Flash. No entanto, graças a este ótimo post no TUAW, é fácil mudar o seu agente de navegação.

Isso forçará sua página da Web a reconhecer o navegador como sendo executado em outro dispositivo. Muito provavelmente você escolheria o iPad, que não suporta nenhuma reprodução em Flash. Este é o único grande problema que você pode encontrar ao testar os métodos de reprodução MP4 nativos e em flash.

7. Gerenciar controles do player

Acredite ou não, também existem métodos que você pode usar para manipular os controles do player de vídeo HTML5. Tudo pode ser feito em JavaScript, puxando de um conjunto de métodos abertos. Há muitos para listar aqui, mas tente passar os documentos do elemento de mídia do W3C para obter mais detalhes.

Para lhe dar uma idéia geral, o blog de desenvolvimento do Opera postou alguns tutoriais curtos que são ótimos para iniciantes. Mesmo que você nunca tenha pego o JavaScript ou o jQuery antes, ainda é fácil começar a trabalhar com esse. Você pode chamar atributos específicos da mídia de vídeo, como mudo ou hora atual. Em seguida, você pode executar ações (escurecer o plano de fundo, exibir anúncios) com base nesses critérios, manipulando o DOM no jQuery.

O mesmo desenvolvedor no artigo do Opera fornece uma demonstração de trabalho de seu player de vídeo com script. A oportunidade de personalizar seus próprios controles de interface do usuário é excelente. Isso mostra como o poderoso vídeo HTML5 está se tornando.

8. Conversão de Formato de Vídeo

Esse é outro grande problema que provavelmente confundirá indivíduos menos experientes em tecnologia. Você só quer ter seu site e streaming e agora você tem que lidar com a conversão de vídeos? Bem, na verdade não é tão difícil.

Para lidar com o MP4, que é sua maior prioridade, você pode usar o HandBrake, que é uma solução livre e de código aberto que funciona em todos os três sistemas operacionais principais. Ele vai suportar H.264 junto com alguns outros codecs, o que torna esta a melhor opção para usuários de brindes. Se você tem dinheiro para desembolsar, devo recomendar o conversor Xilisoft que está na Mac App Store por apenas US $ 40 de licença vitalícia..

Parece que a rota WebM facilita muito a vida. O Miro Video Converter é uma ferramenta gratuita para Windows e OS X que produz arquivos WebM de alta qualidade. Ele também pode fazer a codificação Ogg Theora que sai com ótima qualidade também.

9. Construindo um Web Player

Formatos de vídeo com especificações HTML5 ainda são novos para os desenvolvedores. Há protocolos abertos apenas esperando para serem usados ​​para permitir controles personalizados, controles deslizantes, ícones de reprodução / pausa, etc. Se você estiver se sentindo em negrito, confira este tutorial sobre como criar seu próprio player HTML5 (publicado no Splashnology).

O código é um pouco intenso para os recém-chegados, pois requer um direcionamento CSS avançado e um pouco de jQuery formal. Existem outras estruturas que você pode construir e que já oferecem um design de player personalizado. Da mesma forma, essa apresentação de slides é uma ótima introdução à criação de um player de vídeo HTML5.

Construindo um player de vídeo em HTML5

10. Biblioteca VideoJS

VideoJS é provavelmente minha solução favorita para players de vídeo HTML5. Tudo o que você precisa é que a folha de estilo JavaScript e CSS auto-hospedada esteja incluída em algum lugar do documento. Em seguida, você escreve o código de vídeo HTML5 padrão com algumas classes adicionais para esfolar. Eu adicionei o código de amostra abaixo:

Se acontecer de você executar um blog WordPress, você também pode tentar o seu plugin WP personalizado. Ele incluirá automaticamente a biblioteca js / css nas páginas em que você exibir o vídeo em HTML5. E você pode fazer isso de qualquer editor de postagem ou página usando códigos de acesso (veja aqui).

Conclusão

Espero que este guia introdutório possa despertar seu interesse no futuro do vídeo na web. Com mais usuários recorrendo ao celular, é importante que os padrões HTML5 sejam adotados para esses tipos de mídia. A Web deve ser simplificada para que os desenvolvedores possam produzir soluções totalmente suportadas muito mais rapidamente. Gostaríamos muito de ouvir suas ideias e sugestões sobre o futuro do vídeo em HTML5. Se você gostaria de compartilhar, por favor, fique à vontade para deixar um comentário na área de pós-discussão abaixo.