Forneça vídeo perfeitamente para desktops e dispositivos móveis

Contente

• O que é HTML5?
• O que é vídeo HTML5?
• Recipientes
• MPEG-4
• Ogg
• WebM
• Vídeo Flash
• Codecs: vídeo
• H.264
• Theora
• VP8
• VP6
• Codecs: áudio
• AAC
• Vorbis
• MP3
• Compatibilidade do navegador de contêiner / codec
• Marcação HTML5 aprimorada
• Problemas potenciais
• Integração de Flash Video
• Voltar para o Flash
• Voltar para HTML5
• Qual é o próximo?

Com a introdução do HTML5, os desenvolvedores adquiriram uma nova ferramenta para entregar vídeos a seus públicos. Junto com o Flash Player gigante - instalado em 99% dos computadores pessoais habilitados para internet - o HTML5 está prestes a ser um grande player no mundo do vídeo.

No entanto, para o bem ou para o mal, a especificação HTML5 não define rigidamente todos os aspectos da entrega de vídeo, e as guerras de formatos inevitáveis ​​que surgem nesses casos estão dificultando um pouco a vida dos desenvolvedores e criadores de conteúdo em todos os lugares. Esta série de várias partes mostra como navegar nessas águas em constante mudança. Esta primeira parte discutirá como usar o HTML5 em conjunto com o Flash Player para atingir o maior público possível e como criar ativos de vídeo em todas as formas necessárias para atingir esse objetivo.

As próximas parcelas demonstrarão como fornecer uma breve visão geral das opções de software de codificação, como usar JavaScript para avaliar e responder às várias configurações do navegador do usuário que podem estar visitando suas páginas e uma olhada em alguns dos reprodutores de vídeo JavaScript mais populares que irão faça o trabalho pesado para você.

O que é HTML5?

A primeira coisa que realmente precisa ser dita é que HTML5 não é um padrão. Ainda está em evolução e isso pode ter um grande impacto nos primeiros usuários. O rascunho da especificação do HTML5 foi iniciado em 2004 pelo Grupo de Trabalho de Tecnologia de Aplicativos de Hipertexto da Web (WHATWG), uma coleção de participantes da indústria fundada por indivíduos da Apple, Mozilla Foundation e Opera Software. O Wide Web Consortium (W3C) então o adotou como um rascunho de trabalho em 2007. A Última Chamada da especificação (buscando uma revisão pública e de pares da especificação em sua forma quase final) foi emitida em maio de 2011, mas, embora nenhum novo recurso importante seja esperado, não é nem completo em recursos. Os especialistas não esperam que a especificação seja ratificada pelo W3C até de 2014 a 2022, dependendo de quem você está ouvindo e de quando foi feita.

Curiosidade: embora o W3C ainda esteja usando HTML5 como o apelido da especificação, o WHATWG - considerado por muitos como a principal força por trás da evolução do HTML - diminuiu a numeração de esforços futuros. Ele planeja ficar com "HTML" e classificá-lo como um "padrão de vida".

O que tudo isso significa? Neste ponto, isso realmente significa apenas que os primeiros usuários precisam estar preparados para as mudanças conforme a especificação passa por sua fase final, embora plurianual. Muitos recursos do HTML5 estão disponíveis hoje, e a maioria dos especialistas concorda que mudanças radicais nas especificações não são prováveis.

O problema é que até agora só falamos sobre o padrão oficial que será em breve. A implementação desse padrão é outra questão. Cada navegador, e cada versão de cada navegador, implementa recursos HTML5 em um grau variável e com sucesso variável. Isso torna as coisas mais difíceis para os desenvolvedores, e estamos apenas começando. Aqui está um rápido resumo da compatibilidade do navegador e do sistema operacional (SO) móvel quando se trata de recursos básicos de vídeo HTML5:

O que é vídeo HTML5?

Essencialmente, o vídeo HTML5 é um punhado de tags de marcação e adições ao modelo de objeto de documento JavaScript. Em sua implementação mais simples, o vídeo HTML5 tem a seguinte aparência:

vídeo src = "vid.mp4" largura = "320" altura = controles "240"> / vídeo>

Mas antes que possamos chegar a um uso muito melhor da marcação, precisamos reconhecer que esta é apenas uma pequena parte da imagem. Indiscutivelmente mais importante (e certamente mais complexo) do que a marcação, é o formato do próprio conteúdo. Embora o termo formato seja usado de forma bastante livre, na maioria das vezes representa coletivamente não apenas os algoritmos para compactar e descompactar dados de vídeo e áudio, mas também o contêiner que fornece esses dados de uma forma coesa e utilizável. Simplificando, um contêiner é um invólucro para vídeo, áudio e conteúdo relacionado.

Um dos maiores desafios enfrentados pelos desenvolvedores de HTML5 é que a especificação de rascunho atual do HTML5 não recomenda nenhum formato de vídeo compatível com os navegadores. As equipes por trás de cada navegador são responsáveis ​​por determinar qual formato de vídeo é mais adequado para a tarefa. Isso resultou em uma implementação fragmentada de recursos de vídeo e representa um obstáculo significativo que os criadores de conteúdo devem superar. Na verdade, para oferecer suporte à entrega de vídeo HTML5 em todos os navegadores mais usados, um desenvolvedor deve criar três arquivos separados para cada vídeo ou contar com uma solução de servidor que transcodifica (converte de um formato para outro) em tempo real.

Recipientes

Para este artigo, limitaremos nossa discussão a contêineres compatíveis com HTML5 e Flash e, na maior parte, as partes de vídeo e áudio neles. No entanto, esses wrappers também podem oferecer suporte a recursos adicionais, como legendas, informações do capítulo e metadados, bem como a forma como todos esses tipos de dados são sincronizados. Em alguns casos, os contêineres oferecem suporte a outras opções, como gerenciamento de direitos digitais (DRM), opções básicas de renderização 3D e suporte de renderização de hardware.

Existem quatro contêineres principais compatíveis com HTML5 e / ou Flash. Os prós e contras de cada formato são em grande parte devido aos recursos de vídeo e áudio que eles incluem (sobre os quais falarei em um momento), mas alguns recursos específicos do contêiner também merecem ser mencionados aqui.

MPEG-4

MPEG-4 (mais precisamente MPEG-4, Parte 14) é um contêiner proprietário controlado pelo Moving Picture Experts Group. Usando a extensão de arquivo familiar .mp4 (Apesar .m4v às vezes também é usado), o contêiner MPEG-4 é indiscutivelmente o mais reconhecido. Ele tem suas raízes no contêiner QuickTime da Apple (que normalmente usa o .mov extensão) e é atualmente a escolha mais comum para computadores e dispositivos móveis para reprodução de vídeo. É, por exemplo, o contêiner usado pelo ecossistema iTunes Mac / Windows / iPhone / iPad / iTouch. No entanto, devido a problemas de patente e licenciamento, isso está mudando lentamente e a iniciativa HTML5 está acelerando essa mudança. Como um contêiner, o MPEG-4 é notável porque oferece suporte ao gerenciamento de direitos digitais - um recurso essencial para alguns criadores de conteúdo, e também é atraente porque aceleraçao do hardware (codificação e / ou decodificação baseada em chip ou assistida em tempo de execução) está amplamente disponível para o formato. Além de sua inclusão na especificação HTML5, o Flash Player também oferece suporte ao contêiner MPEG-4.

Ogg

Ogg é um formato de contêiner aberto e gratuito mantido pela Fundação Xiph.Org. Embora a Fundação Xiph.Org recomende o uso do .ogv extensão de arquivo, é bastante comum ver arquivos de vídeo Ogg com o .ogg extensão. Ogg é nativo no sistema operacional Linux e é compatível com os sistemas operacionais Mac e Windows por componentes QuickTime. O sistema operacional Windows também pode usar uma extensão do Windows Media Player ou filtros DirectShow para exibir o conteúdo Ogg.

WebM

O Google recentemente introduziu o contêiner WebM como um veículo para conteúdo aberto e gratuito de vídeo e áudio. Usa o .webm extensão de arquivo e é baseado no contêiner Matroska.

A aceleração de hardware já está disponível para arquivos WebM e a Adobe anunciou que versões futuras do Flash Player suportariam o contêiner WebM.

Vídeo Flash

O contêiner Flash Video usa dois contêineres. FLV é um formato proprietário mais antigo que oferece suporte a versões do Flash Player que remontam à versão 7, introduzida em 2003. O Flash Player versão 9 atualização 3 introduziu suporte para o formato F4V, que é baseado no MPEG-4. (Mencionado anteriormente, os contêineres MPEG-4 válidos são suportados pelo Flash Player, ao usar a versão 9, atualização 3 e posterior.)

O Flash Player não depende de extensões de arquivo para reproduzir arquivos de vídeo compatíveis, mas as extensões comumente usadas para cada contêiner são .flv e .f4v, respectivamente. (O formato F4V também inclui o .f4p extensão para vídeo protegido.) O Flash Player 10.2 e posterior oferece suporte à aceleração de hardware para Flash Video.

A principal tarefa de um contêiner é reunir o conteúdo de vídeo e áudio. Manipular esses ativos é responsabilidade de codecs.

Codecs: vídeo

Codecs são algoritmos usados ​​para codificar ativos em tempo de autenticação e decodificá-los para reprodução em tempo de execução. (O termo codec é um portmanteau derivado de “codificador” / “decodificador”.). Os fabricantes de software e hardware (como as empresas por trás de navegadores e dispositivos móveis) devem decidir quais contêineres e codecs dar suporte com tecnologias como HTML5 e Flash Video. Fatores como qualidade, tamanho do arquivo, largura de banda e problemas semelhantes desempenham um papel nesta decisão.

Um dos maiores desses fatores é o impacto das patentes e custos de licenciamento, e um impulso para codecs gratuitos e abertos é muito do motivo para a fragmentação do formato de vídeo atualmente enfrentada pelos desenvolvedores de vídeo na web. Existem muitos codecs, mas, para esta discussão, vamos nos concentrar nos quatro codecs principais para HTML5 e entrega de Flash. Os primeiros são os codecs de vídeo: H.264, Theora, VP8 e VP6. H.264 e VP6 são patentes restritas e cobram taxas de licenciamento, enquanto Theora e VP8 são gratuitos e não são onerados por patentes ou mantidos sob um mandato para não fazer cumprir essas patentes.

H.264

Também conhecido como MPEG-4 Parte 10 ou Codificação de Vídeo Avançada (AVC), O H.264 foi desenvolvido pela MPEG e se tornou um padrão em 2003. É um codec de alta qualidade otimizado para e dispositivos de alta largura de banda / CPU, de telefones a leitores de Blu-ray. Sua especificação inclui "perfis", variando de Linha de base para Alto, que ditam vários graus de qualidade e recursos opcionais. Também inclui perfis escalonáveis ​​que permitem que um único arquivo ajuste a qualidade com base nos recursos de reprodução. É compatível com aceleração de software e hardware e é amplamente usado em tudo, desde dispositivos móveis a vídeo de alta definição em transmissão, DVD e ambientes semelhantes. O H.264 faz parte do contêiner MPEG-4 e também é amplamente usado em Flash Video, diretamente ou como parte do contêiner F4V.

Theora

Theora é um codec de vídeo aberto e gratuito. Enquanto outros contêineres podem usar o Theora como um codec de vídeo, ele é mais frequentemente associado ao formato Ogg. On2 Technologies desenvolveu originalmente o que se tornaria Theora, como VP3. Theora foi derivado de VP3 depois que On2 lançou VP3 para o domínio público. A Fundação Xiph.Org agora mantém o codec. Ele exige acordos de licenciamento e não é onerado por patentes conhecidas diferentes das patentes VP3 originais, que foram licenciadas sem royalties. Theora é nativo no Linux e compatível com os sistemas operacionais Mac e Windows por meio de codificadores / decodificadores de código aberto.

VP8

Também desenvolvido pela On2 Technologies, o VP8 é conhecido pela qualidade semelhante ao perfil H.264 High, mas com uma baixa complexidade de decodificação semelhante ao perfil H.264 Baseline. O Google adquiriu o VP8 da On2 para se tornar o codec de vídeo de seu contêiner WebM. O Google fez uma promessa irrevogável de não fazer cumprir suas patentes relacionadas, tornando o VP8 livre de royalties, tornando-o uma alternativa atraente ao H.264. Normalmente é suportado por codificação e decodificação de software, mas a aceleração de hardware já está em uso e crescendo.

VP6

VP6 é o codec mais comumente usado no formato FLV Flash Video. É um codec de qualidade razoavelmente alta que também inclui recursos atraentes, como suporte a canal alfa.

Contribuindo para um tema de corrida impressionante neste artigo, a On2 Technologies também desenvolveu o VP6. Licenciado para a Macromedia (e depois para a Adobe), o VP6 é restrito por patentes e questões de licenciamento. Isso, e o fato de o Flash Player ser necessário para reprodução, torna o formato de vídeo FLV Flash uma solução menos atraente de longo prazo para muitos desenvolvedores, mas ainda atende a uma necessidade caso a caso - particularmente quando se trata do uso de alfa canais.

Codecs: áudio

Tal como acontece com o vídeo, existem muitos codecs de áudio, mas aqui nos concentraremos em AAC, Vorbis e MP3, pois eles são mais comumente usados ​​com recursos de vídeo HTML5 e Flash

AAC

O Advanced Audio Coding (AAC) foi desenvolvido como um possível sucessor do formato MP3. É conhecido por ter melhor qualidade do que MP3, mas com a mesma taxa de bits. Também é possível codificar o arquivo AAC usando qualquer taxa de bits, enquanto a codificação de MP3 requer uma das várias taxas de bits predeterminadas. AAC é um dos codecs usados ​​no contêiner MPEG-4 e o codec de áudio mais comumente usado para esse contêiner para compatibilidade com HTML5. O formato oferece suporte ao gerenciamento de direitos digitais, mas está sobrecarregado por patentes e questões de licenciamento. Normalmente é decodificado com software, mas existem algumas implementações de decodificação de hardware.

Vorbis

Vorbis é mais comumente associado ao contêiner Ogg, mas pode ser usado em MP4, WebM e outros formatos. É o único codec aberto e gratuito entre aqueles amplamente usados ​​em Flash e HTML5, e livre de patentes. Na verdade, o desenvolvimento do Vorbis foi iniciado quando as taxas de licenciamento do formato MP3 foram anunciadas. É conhecido por ter qualidade de áudio comparável ou superior do que MP3 ou AAC, mas com tamanhos de arquivo menores e é popular na indústria de jogos. O formato é nativo no Linux e Android e é compatível com os sistemas operacionais Mac e Windows por meio de componentes QuickTime e filtros DirectShow, bem como reprodutores de software dedicados.

MP3

Você sabe o que é MP3, certo? É praticamente o padrão para dispositivos de áudio digital portáteis e também é usado pelo formato FLV Flash Video. É patenteado, requer taxas de licenciamento e deve ser codificado em uma das várias taxas de bits pré-determinadas.

Compatibilidade do navegador de contêiner / codec

Como você pode ver, mesmo uma visão geral de um parágrafo dos codecs de vídeo, codecs de áudio e contêineres disponíveis para vídeo HTML5 e Flash ainda requer um pouco de tempo e atenção para digerir. Ainda assim, é um tempo bem gasto, pois este material é importante se você deseja entregar recursos de vídeo ao maior público possível. Por quê? Porque, como mencionado brevemente antes, entre os principais navegadores e sistemas operacionais móveis, nenhum formato é universalmente suportado.

Então, isso nos deixa com uma viagem de máquina do tempo de volta aos dias inebriantes de 1997, quando a maior parte de nosso trabalho como desenvolvedores estava lidando com inconsistências entre navegadores e sistemas operacionais. A tabela a seguir é um instantâneo da compatibilidade entre os formatos de vídeo (contêineres, codecs de vídeo e codecs de áudio) e os principais navegadores de desktop e sistemas operacionais móveis.

A tabela mostra algumas coisas dignas de nota. Primeiro, uma célula vazia indica nenhum suporte, enquanto uma célula preenchida mostra a versão na qual o suporte para um formato de vídeo foi adicionado. (Asteriscos são usados ​​para indicar que o suporte está disponível por meio de software de terceiros, como plug-ins.)

Em segundo lugar, embora o Chrome suportasse todos os três formatos de vídeo no momento em que este livro foi escrito, isso pode mudar no futuro. † O Google anunciou que o Chrome abandonaria o suporte para o codec de vídeo H.264 com o lançamento da versão 11.0 - um ótimo exemplo da mudança do cenário do HTML5 mencionado anteriormente - embora pareça que a decisão foi adiada.

E, finalmente, nenhum formato é compatível com todos os navegadores. Ao lidar com navegadores modernos, é possível alcançar todos os usuários HTML5 com uma combinação de recursos MPEG-4 e WebM. No entanto, se (por exemplo) um usuário tiver a versão 3.6 do Firefox, apenas um vídeo Ogg será adequado.

Além disso, se um usuário não atualizou para uma versão compatível com HTML5 de seu navegador preferido, usar o Flash Player para reprodução de vídeo é provavelmente a melhor solução para esse usuário. Como resultado, acabamos com três ou mais versões de cada vídeo para atingir o maior público possível.

Mas a diversão não para por aí. Além das decisões de política, como a queda do suporte a H.264 pelo Google, bugs, idiossincrasias e a falta de paridade em todas as plataformas significam que mesmo um único navegador ou sistema operacional nem sempre lida com vídeos da mesma maneira. Alguns desses problemas serão discutidos posteriormente neste artigo, mas, em poucas palavras, entregar vídeo com sucesso para várias plataformas requer algum planejamento e soluções alternativas. O que nos leva a examinar uma versão aprimorada da marcação HTML5 apresentada brevemente no início deste artigo. Ao introduzir a tag HTML5 video source> à mistura e ficar de olho nos problemas potenciais conhecidos, pode-se efetivamente lidar com a maioria das peculiaridades.

Marcação HTML5 aprimorada

A primeira versão da marcação de vídeo HTML5 discutida tinha a seguinte aparência:

vídeo src = "vid.mp4" largura = "320" altura = controles "240"> / vídeo>

O principal problema aqui é que a fonte de vídeo é identificada usando o atributo src da tag video>. Isso permite apenas uma fonte para o elemento video>. Essa abordagem não é recomendada devido à falta de suporte universal para um formato de vídeo.

Se, no entanto, você omitir o atributo src e, em vez disso, adicionar tags HTML5 source> conforme visto abaixo, um navegador iniciará com a primeira fonte e, se não houver suporte, seguirá para a próxima fonte e assim por diante.

video width = "320" height = "240" poster = "vid.png" controls> source src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> source src =" vid.mp4 "type =’ video / mp4; codecs = "avc1.42E01E, mp4a.40.2" ’> source src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" ’> / video>

Esta segunda versão da marcação é bem simples. Ele começa definindo um elemento de vídeo HTML5 com dimensões de 320 x 240 pixels, adiciona um atributo poster opcional para mostrar uma imagem estática até que o vídeo seja reproduzido (ou, em alguns navegadores, até que o vídeo carregue) e exibe controles de reprodução nativos fornecidos por o navegador. Se o último atributo for omitido, nenhum controle será mostrado, permitindo ao desenvolvedor criar seus próprios controles personalizados usando JavaScript. Vamos dar uma olhada nesse processo na próxima parte desta série.

Atributos adicionais para o elemento de vídeo incluem:

• pré-carga: sugere quanto do ativo de vídeo deve ser pré-carregado. As opções incluem Nenhum, metadados (para buscar coisas como dimensões, duração, primeiro quadro, etc.) e auto (para permitir que o navegador pré-carregue o máximo possível do ativo)
• Reprodução automática: um booleano que determina se o vídeo é reproduzido imediatamente após o carregamento
• audio: dita o estado de áudio inicial (atualmente, apenas mudo é suportado)
• ciclo: um booleano que determina se o vídeo retorna ao início para ser reproduzido novamente após reproduzir sua duração total

A primeira tag de origem na marcação de amostra identifica um arquivo de vídeo WebM. Se isso não for compatível, um arquivo MPEG-4 é usado. E, se MPEG-4 for incompatível, um arquivo de vídeo Ogg é usado. Em todos os casos, o atributo type indica o tipo de contêiner e os codecs necessários para a reprodução.

Problemas potenciais

Dependendo de quão abrangente você deseja ser ao direcionar seu público, você pode se deparar com alguns problemas conhecidos. Felizmente, suas soluções são muito simples.

• Em primeiro lugar, certifique-se de que seu servidor suporte os tipos MIME necessários para reproduzir cada formato de vídeo que você usar. Uma maneira simples de conseguir isso é criar um .htaccess arquivo no mesmo diretório que seu arquivo HTML e use a diretiva AddType para adicionar os tipos MIME necessários:

AddType video / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webm

• iOS 3.x não gosta do atributo pôster. Omita da tag de vídeo>
• No iPad iOS 3.x, um vídeo não será reproduzido, a menos que a fonte mp4> seja listada primeiro
• O Android 2.3 não gosta do atributo type. Omita-o da tag de origem MP4 (o único contêiner compatível com o Android atualmente)

Portanto, para contornar problemas conhecidos com a entrega de HTML5 e alcançar versões mais antigas do iOS e Android, use esta quarta versão da marcação HTML5 que desenvolvemos. Observe que o atributo pôster do elemento de vídeo foi removido, a fonte MP4 foi listada primeiro e o atributo de tipo do último foi removido.

largura do vídeo = "320" altura = "240" controles> fonte src = "vid.mp4"> fonte src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> source src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" ’> / video>

Concluímos o trabalho necessário para atingir o maior público-alvo HMTL5 possível, mas o que devemos fazer com os navegadores que não são compatíveis com HTML5?

Integração de Flash Video

Apesar da propaganda galopante, o Flash Player ainda é uma força impressionante e amplamente usada. Em muitos casos, você pode preferir ou exigir a entrega de vídeo do Flash Player para oferecer suporte a um recurso desejado. Descreverei alguns desses recursos na próxima parte deste artigo. Muito mais importante, no entanto, é o fato de que o vídeo HMTL5 nem mesmo funcionará para uma grande parte dos usuários. É muito novo para alcançar o tipo de penetração que o Flash Player desfruta.

Uma rápida olhada em NetMarketShareAs estatísticas da versão do navegador para desktop indicam que perto de 50 por cento dos navegadores em uso hoje não são compatíveis com HMTL5. Isso continuará a mudar à medida que mais usuários atualizarem seus navegadores, e o mercado móvel continuará a tornar a entrega de vídeo HTML5 cada vez mais essencial. Hoje, no entanto, ignorar o Flash Player inevitavelmente significa um público muito menor para o seu conteúdo.

Felizmente, você pode codificar suas páginas para fornecer conteúdo em Flash quando desejar - como um substituto do HTML5 ou como primeira escolha, revertendo para HTML5 quando necessário.

Voltar para o Flash

A abordagem mais simples para fornecer vídeo usando HTML5 e Flash Player é capitalizar sobre como os navegadores analisam HTML. Você deve se lembrar que, ao usar as tags video> e source>, um navegador compatível com HTML5 percorrerá as fontes fornecidas até encontrar um formato de vídeo compatível. Pode-se pensar que esse processo continuará, de certa forma, porque se um navegador não suportar o elemento HTML5 video>, essas tags serão ignoradas.

Portanto, colocar um objeto de player de vídeo Flash no final de uma lista de origem HTML5 abrangente significa que os navegadores compatíveis com HTML5 eventualmente encontrarão os ativos necessários para reproduzir o vídeo, e todos os outros navegadores reproduzirão o vídeo usando o Flash Player. (Isso pressupõe, é claro, que o Flash Player está instalado, mas discutiremos isso em um momento.) Essa abordagem foi popularizada pela técnica de Vídeo para Todos de Kroc Camen e é atraente porque não requer JavaScript ou codificação complexa.

Aqui está o exemplo final da marcação HTML5 usada neste artigo. Este exemplo muito simples usa o player Strobe Open Source Media Framework desenvolvido pela Adobe para servir como o player de vídeo Flash.

largura do vídeo = "320" altura = "240" controles> fonte src = "vid.mp4"> fonte src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> source src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" '> object width = "320" height = "240"> param name = "movie" value = "StrobeMediaPlayback.swf"> param name = "flashvars" value = "src = http: // yourdomain.com/vid.mp4 "> param name =" allowFullScreen "value =" true "> / object> / video>

Isso é tudo que há para fazer. Como você pode ver, a marcação HTML5 é responsável pela lista simples de problemas conhecidos discutidos aqui e recorre ao Flash Player quando o vídeo HTML5 não é compatível.

Voltar para HTML5

Se você preferir começar com vídeo renderizado pelo Flash Player e voltar para HTML5 - talvez porque deseja oferecer um recurso específico ou deseja controles de player mais consistentes quando possível - você pode usar JavaScript para realizar essa tarefa.

Este exemplo simples usa a biblioteca SWFObject JavaScript para fazer coisas difíceis. Ele não apenas detectará se o Flash Player está presente, mas também se uma versão mínima necessária também está em uso. Se uma versão compatível do Flash Player for encontrada, o SWFObject substituirá o conteúdo de um div> especificado pelo HTML necessário para incorporar o Flash Player. Caso contrário, nenhuma ação será executada e o código HTML5 no div> será deixado para fazer seu trabalho.

script type = "text / javascript" src = "swfobject.js"> / script> script type = "text / javascript"> var flashvars = {}; var params = {}; atributos var = {}; flashvars.src = "http://yourdomain.com/vid.mp4"; swfobject.embedSWF ("StrobeMediaPlayback.swf", "flashcontent", "320", "240", "10.0.0", false, flashvars, params, atributos); / script> body> div id = "flashcontent"> video width = "320" height = "240" controls> source src = "vid.mp4"> source src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> source src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" ’> / video> / div> / body>

Talvez a melhor vantagem dessa abordagem seja que você pode usar o conteúdo do div> para sugerir elegantemente que o usuário adquira o Flash Player se for realmente melhor para uma tarefa específica. Na verdade, o SWFObject suporta a opção de instalação expressa do Flash Player para automatizar esse processo para você, se desejar.

Qual é o próximo?

Espero que este artigo tenha fornecido os fundamentos necessários para entender como entregar ativos de vídeo para o maior público possível, mas também alguns dos conhecimentos técnicos necessários para otimizar ativos para a tarefa. Na próxima parte, colocaremos esses fundamentos para funcionar discutindo:

• Selecione pacotes de software de codificação para criar os arquivos de vídeo.
• Exemplos de quando o Flash Player é a melhor ferramenta para o trabalho e quando o HTML5 pode ser preferido.
• Amostra de código JavaScript para situações que exigem uma solução personalizada do player.
• E uma visão geral de algumas das melhores bibliotecas JavaScript para lidar com todo esse trabalho para você.

Vejo você então!