Áudio e vídeo HTML5 para vários navegadores

John Dyer

Baixar o exemplo de código

Quando introduzidas pela primeira vez as tags de áudio e vídeo de HTML5, codec e navegador incompatibilidades fizeram-nos irrealista a implantação em grande escala Web sites e difícil de usar. As marcas eram grandes empresas escrevendo código fonte experimental ou fazendo desenvolvimento cross-browser media, mas a HTML5 mídia API foi muito confiável para uso geral.

Hoje, as coisas são diferentes. Navegadores e bibliotecas JavaScript tem amadurecido ao ponto onde você pode — e deve — usar HTML5 mídia como padrão para quaisquer projetos que irão exibir o conteúdo de áudio e vídeo. Reequipamento ainda existente do Flash e do Silverlight tornou-se bastante simples a conteúdos de vídeo para reprodução de HTML5. Neste artigo, eu vou explorar os benefícios de usar HTML5 para reprodução de mídia, mostrar algum código de amostra, abordar algumas questões importantes que os desenvolvedores enfrentam e apresentam soluções para esses problemas.

Benefícios do HTML5 Media

A vantagem de usando HTML5 para mídia é que você pode aproveitar as suas habilidades de HTML, CSS e JavaScript, em vez de aprender Flash ou Silverlight. Se você pode criar botões em HTML e controlá-los com JavaScript, você já sabe tudo que você precisa para desenvolver meios de HTML5. HTML5 mídia possui suporte interno para subtítulos e legendas usando o novo elemento de pista e as propostas de recursos adicionais — tais como acesso de byte para manipulação de vídeo direto — já estão sendo consideradas.

Além disso, a mídia que usa audio e vídeo HTML5 executa melhor do que mídia jogada através de plug-ins como Flash ou Silverlight, resultando em maior duração da bateria e reprodução suave.Além disso, dispositivos móveis que executam Windows Phone 7.5, Apple iOS e Android (bem como o navegador de Metro-estilo em Windows 8) suporte a reprodução de mídia apenas através do HTML5 áudio e vídeo. Alguns dispositivos Android incluir Flash, mas Adobe descontinuou recentemente seus esforços Flash móveis, o que significa que HTML5 será a única forma de reproduzir mídia em dispositivos móveis no futuro.

Controles e simples reprodução de HTML5

Nos dias de usar Flash ou Silverlight para reprodução de vídeo, a mais simples possível marcação para exibir um vídeo (Video. mp4, neste caso) teria olhado algo parecido com isto:

1.  


2.           <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">


3.   <param name="src" value="player.swf?file=video.mp4">


4.   <embed src="player.swf?file=video.mp4" width="640"


5.     height="360"></embed>


6. </object>


7.         

Comparar esses objeto aninhado, param e incorporar marcas com esta marca de vídeo HTML5 usada para reproduzir o mesmo vídeo codificado em h. 264:

1.  


2.           <video src="video.mp4" controls></video>


3.         

É muito mais simples — simplesmente HTML que precisa explicação muito pouco. Quando o navegador tem baixado bastante de um vídeo para determinar sua largura e altura nativa, redimensiona o vídeo nesse sentido. Mas, assim como com tags img, é sempre melhor especificar os atributos height e width para que a página não precisa para refluxo. Você também pode usar o atributo de estilo para especificar valores de largura e altura px ou % (vou usar ambos os exemplos que se seguem).

Um atributo que acrescentei é controles. Isso diz ao navegador para exibir sua própria barra de controle de reprodução interna, que normalmente inclui uma alternância de reprodução/pausa, um indicador de progresso e controles de volume. Controles é um atributo booleano, que significa que ele não precisa ter um valor atribuído a ele. Para uma sintaxe mais XHTML-como você poderia gravar controles = "controles", mas o navegador sempre considera controles a ser false se ele não estiver presente e verdadeiro se ele estiver presente ou atribuído um valor.

HTML5 Atributos de mídia e criança fonte Tags

Os elementos de áudio e vídeo introduzem vários novos atributos que determinam como o navegador irá apresentar o conteúdo de mídia para o usuário final.

• src especifica um único arquivo de mídia para reprodução (para várias fontes com diferentes codecs, por favor, consulte a discussão abaixo).


• cartaz é uma URL para uma imagem a ser exibida antes de um usuário pressionar Play (apenas vídeo).


• pré-carga determina como e quando o navegador irá carregar o arquivo de mídia usando três valores possíveis: Nenhum significa que o vídeo não irá baixar até que o usuário inicia a reprodução; metadados diz ao navegador para baixar dados apenas suficientes para determinar a altura, a largura e a duração da mídia; auto permite que o browser decida quanto do vídeo para iniciar o download antes do usuário inicia a reprodução.


• reprodução automática é um atributo booleano usado para iniciar um vídeo assim que a página for carregada (dispositivos móveis muitas vezes ignoram isso para preservar a largura de banda).


• loop de é um atributo booleano que faz com que um vídeo começar de novo quando ele atinge o final.


• silenciado é um atributo booleano especificando se o vídeo deve começar silenciado.


• controles de é um atributo booleano indicando se o navegador deve exibir seus próprios controles.


• largura e altura dizer um vídeo para exibir em um determinado tamanho (vídeo só; não pode ser uma porcentagem).

Controles de texto cronometrado

Navegadores também estão começando a implementar o elemento track, que fornece legendas, fechado legendas, traduções e comentários a vídeos. Aqui está um vídeo elemento com um elemento de faixa de criança:

1.  


2.           <video id="video1" width="640" height="360" preload="none" controls>


3.   <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">


4. </video>


5.         

Neste exemplo, eu usei quatro dos cinco atributos possíveis do elemento de faixa:

• src é um link para um arquivo da Web Video Timed Text (WebVTT) ou um arquivo Timed Text Markup Language (TTML).


• srclang é o idioma do arquivo TTML (tais como PT, es ou ar).


• tipo indica o tipo de conteúdo de texto: legendas, legendas, descrições, capítulos ou metadados.


• rótulo contém o texto exibido para um usuário escolhendo uma pista.


• padrão é um atributo booleano que determina o elemento de faixa de inicialização.

WebVTT é um formato baseado em texto simple que começa com uma declaração de linha única (arquivo WEBVTT) e, em seguida, listas de iniciar e término vezes separados por--> caracteres, seguido pelo texto a ser exibido entre as duas vezes. Aqui é um simple arquivo de WebVTT que irá exibir duas linhas de texto em dois intervalos de tempo diferentes:

WEBVTT FILE

00:00:02.5 --> 00:00:05.1

This is the first line of text to display.

00:00:09.1 --> 00:00:12.7

This line will appear later in the video.

Como do presente escrito, apenas Internet Explorer 10 Platform Preview e Chrome 19 suportam o elemento track, mas espera-se que outros navegadores fazê-lo em breve. Algumas das bibliotecas JavaScript abordarei mais tarde adicionam suporte para o elemento de faixa para navegadores que ainda não a implementaram, mas há também uma biblioteca de faixa autônomo chamada captionator.js (captionatorjs.com) que analisa rastrear marcas, lê WebVTT e TTML (como SRT e YouTube SBV) arquivos e fornece um interface do usuário para navegadores que ainda não têm suporte nativo.

Script HTML5 Media

Anteriormente, eu usei o atributo de controles para informar o navegador para exibir seus controles nativos sobre as tags de áudio ou vídeo. O problema com isto é que cada navegador tem um conjunto diferente de controles que não são susceptíveis de coincidir com o design do seu site da Web. Para criar uma experiência consistente, você pode remover controles do navegador e, em seguida, adicione botões personalizados para a página que você controla com JavaScript. Também é possível adicionar ouvintes de evento para controlar o estado de reprodução de áudio ou vídeo. No exemplo a seguir, eu removi o atributo de controles e adicionar marcação embaixo do vídeo para servir como uma barra de controle básico:

1.  


2.           <video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 


3. <div>


4.   <input type="button" id="video1-play" value="Play" />


5.   <input type="button" id="video1-mute" value="Mute" />


6.   <span id="video1-current">00:00</span>


7.   <span id="video1-duration">00:00</span>


8. </div>


9.         

O JavaScript simple em Figura 1 irá controlar reprodução de vídeo e mostrar o atual tempo no vídeo e irá criar o jogador completo trabalho retratado na Figura 2(processado no Internet Explorer 9). (Note que em HTML5, o tipo = "text/javascript" atributo não é necessária no código de script.)

Figura 1 controle de reprodução de vídeo

1.  


2.           <script>


3. // Wrap the code in a function to protect the namespace


4. (function() {


5. // Find the DOM objects


6. var  video = document.getElementById("video1"),


7.   playBtn = document.getElementById("video1-play"),


8.   muteBtn = document.getElementById("video1-mute"),


9.   current = document.getElementById("video1-current"),


10. duration = document.getElementById("video1-duration");


11.  


12. // Toggle the play/pause state


13. playBtn.addEventListener("click", function() {


14.   if (video.paused || video.ended) {


15.     video.play();


16.     playBtn.value = "Pause";


17.   } else {


18.     video.pause();


19.     playBtn.value = "Play";


20.   }


21. }, false);


22.  


23. // Toggle the mute state


24. muteBtn.addEventListener("click", function() {


25.   if (video.muted) {


26.     video.muted = false;


27.     muteBtn.value = "Mute";


28.   } else {


29.     video.muted = true;


30.     muteBtn.value = "Unmute";


31.   }


32. }, false);


33.  


34. // Show the duration when it becomes available


35. video.addEventListener("loadedmetadata", function() {


36.   duration.innerHTML = formatTime(video.duration);


37. }, false);


38.  


39. // Update the current time


40. video.addEventListener("timeupdate", function() {


41.   current.innerHTML = formatTime(video.currentTime);


42. }, false);


43.  


44. function formatTime(time) {


45.   var 


46.     minutes = Math.floor(time / 60) % 60,


47.     seconds = Math.floor(time % 60);


48.  


49.   return   (minutes < 10 ? '


50.           0' + minutes : minutes) + ':' +


51.            (seconds < 10 ? '


52.           0' + seconds : seconds);


53. }


54.  


55. })();


56.         

Figura 2 Player de vídeo que mostra o tempo de trabalho

O código no Figura 1 apresenta o jogo e pausa métodos, os eventos timeupdate e loadedmetadata e as propriedades em pausa, terminou, currentTime e duração. A completa HTML5 mídia API (w3.org/TR/html5/video.html) inclui muito mais que pode ser usado para construir um full-fledged media player. Além do HTML5 mídia marca atributos listados anteriormente, HTML5 mídia objetos têm outras propriedades acessíveis somente via JavaScript:

• currentSrc descreve o arquivo de mídia que o navegador está sendo executado quando as marcas de origem são usadas.


• videoHeight e videoWidth indicam as dimensões do vídeo nativas.


• volume especifica um valor entre 0 e 1 para indicar o volume. (Dispositivos móveis ignoram isso em favor de controles de volume de hardware.)


• currentTime indica a atual posição de reprodução em segundos.


• duração é o tempo total em segundos do arquivo de mídia.


• armazenada em buffer é uma matriz que indica quais partes do arquivo de mídia foram baixados.


• playbackRate é a velocidade em que o vídeo é reproduzido voltar (padrão: 1). Altere esse número para ir mais rápido (1.5) ou mais lenta (0,5).


• terminou indica se o vídeo chegou ao fim.


• pausado é sempre verdadeira na inicialização e, em seguida, falso, uma vez que o vídeo começou a jogar.


• buscando indica que o navegador está tentando fazer o download e mover para uma nova posição.

Objetos de mídia HTML5 também incluem os seguintes métodos para execução de scripts:

• jogar tenta carregar e reproduzir o vídeo.


• Pausar pára um vídeo está sendo reproduzido.


• canPlayType(type) detecta codecs um navegador oferece suporte. Se você enviar um tipo como vídeo/mp4, o navegador irá responder com provavelmente, talvez, não ou uma Cadeia de caracteres em branco.


• carregar é chamado para carregar o novo vídeo, se você alterar o atributo src.

A especificação de mídia HTML5 fornece 21 eventos; Aqui estão algumas das mais comuns:

• loadedmetadata é acionado quando a duração e as dimensões são conhecidos.


• loadeddata é acionado quando o navegador pode jogar na posição atual.


• jogar inicia o vídeo quando o vídeo já não está em pausa ou terminou.


• jogando é acionado quando a reprodução foi iniciada após a pausa, buffer ou buscando


• Pausar pára o vídeo.


• terminou é acionado quando o final do vídeo é alcançado.


• progresso indica mais o arquivo de mídia foi baixado.


• buscando é verdadeiro quando o navegador foi iniciado buscando.


• seeked é false quando o navegador concluiu a procura.


• timeupdate é acionado como o recurso de mídia está jogando.


• volumechange é acionado quando silenciado ou propriedades de volume foram alteradas.

Essas propriedades, métodos e eventos são ferramentas poderosas para apresentar aos usuários uma experiência de mídia avançada, todos conduzidos por HTML, CSS e JavaScript. O exemplo básico em Figura 1, eu primeiro criar variáveis para todos os elementos na página:

1.  


2.           // Find the DOM objects


3. var video = document.getElementById("video1"),


4.   playBtn = document.getElementById("video1-play"),


5.   muteBtn = document.getElementById("video1-mute"),


6.   current = document.getElementById("video1-current"),


7.   duration = document.getElementById("video1-duration");


8.         

Então eu adicionar um evento click para meus botões para controlar a reprodução de mídia. Aqui eu firmo a reproduzir e pausa estado do vídeo e alterar o rótulo no botão:

1.  


2.           // Toggle the play/pause state


3. playBtn.addEventListener("click", function() {


4.   if (video.paused || video.ended) {


5.       video.play();


6.       playBtn.value = "Pause";


7.   } else {


8.       video.pause();


9.       playBtn.value = "Play";


10.   }


11. }, false);


12.         

Finalmente, eu adicionar eventos para o objeto de mídia para controlar o seu estado atual. Aqui, eu escuto para o evento timeupdate e atualização de barra de Controlarar para o tempo atual do indicador de reprodução, formatação de segundos para um estilo de minutos: segundos:

1.  


2.           // Update the current time


3. video.addEventListener("timeupdate", function() {


4.   current.innerHTML = formatTime(media.currentTime);


5. }, false);


6.         

Problemas com HTML5 Media

Infelizmente, obtendo HTML5 mídia para trabalhar em todos os navegadores e dispositivos não é tão simples como no meu exemplo. Já mencionei que nem todos os navegadores oferecem suporte para o elemento track, e agora vou abordar três questões adicionais que você encontra ao usar as tags de áudio e vídeo, juntamente com soluções para superá-los. No final do artigo, apresentarei algumas bibliotecas JavaScript que envolvem todas essas soluções em pacotes simples, facilmente destacáveis.

HTML5 áudio e vídeo Codec suporte o primeiro problema que você enfrenta ao desenvolver com HTML5 media é o suporte inconsistente para codecs de áudio e vídeo. Meus exemplos funcionam no Internet Explorer 9 e versões posteriores, Chrome e Safari, mas eles não funcionarão no Firefox ou Opera, pois embora esses navegadores oferecem suporte à marca de vídeo HTML5, eles não suportam o codec h. 264. Devido a questões de direitos autorais, fornecedores de navegador tem dividido em dois campos de codec, e isso nos leva ao gráfico HTML5 Media familiar no Figura 3, mostrando que codecs funciona com os navegadores.

Figura 3 Codec suporte em vários navegadores

Vídeo	IE8	IE9 +	Cromado	Safari	Celular	Firefox	Ópera
MP4 (h.264/AAC)	no	Sim	Sim	Sim	Sim	no	no
WebM (VP8/Vorbis)	no	instalação	Sim	no	no	Sim	Sim

 

Internet Explorer 9++, Safari, Chrome e dispositivos móveis (iPhone, iPad, Android 2.1 + e Windows Phone 7.5 +) suportam o codec de vídeo h. 264, que normalmente é colocado em um recipiente MP4. Firefox e Opera, em contrapartida, suporte o codec de vídeo VP8, que é colocado dentro do contêiner do WebM. Chrome também suporta WebM e comprometeu-se a remover o suporte a h. 264 em algum ponto. Internet Explorer 9++ pode render WebM se o codec foi instalado pelo usuário final. Finalmente, o Firefox, Opera e Chrome também suportam o codec Theora colocado dentro de um recipiente de Ogg, mas isso tem sido amplamente desativado em favor do WebM (a menos que você precise suportar o Firefox 3. x), então eu o deixei fora do gráfico e exemplos para a simplicidade.

Para áudio, os fornecedores de navegador são novamente divididos em dois campos, com o primeiro grupo (Internet Explorer 9, Chrome e Safari) apoiando o familiar formato MP3 e o segundo grupo (Firefox e Opera) apoiando o codec Vorbis dentro de um recipiente de Ogg.Muitos navegadores também podem reproduzir o formato de arquivo WAV. Veja a Figura 4.

Figura 4 áudio suporte em vários navegadores

Áudio	IE8	IE9 +	Cromado	Safari	Celular	Firefox	Ópera
MP3	no	Sim	Sim	Sim	Sim	no	no
Ogg Theora	no	instalação	Sim	no	no	Sim	Sim
WAV	no	no	Talvez	Sim	Sim	Sim	Sim

 

Para lidar com essas diferenças, as tags de áudio e vídeo oferecer suporte a várias marcas de origem de criança, que permite que navegadores escolha um arquivo de mídia que podem desempenhar. Cada elemento de origem possui dois atributos:

• src especifica um URL para um arquivo de mídia.


• tipo especifica o tipo de MIME e, opcionalmente, o codec específico do vídeo.

Para oferecer o h. 264 e codecs de vídeo VP8, você usaria a seguinte marcação:

1.  


2.           <video id="video1" width="640" height="360">


3.   <source src="video.mp4" type="video/mp4">


4.   <source src="video.webm" type="video/webm">


5. </video>


6.         

Observe que versões anteriores do iOS e Android precisam o arquivo MP4 para ser listadas primeiro.

Esta marcação irá funcionar em todos os navegadores modernos. O código JavaScript irá controlar qualquer que seja o vídeo o navegador decide que ele pode jogar. Para áudio, a marcação tem esta aparência:

1.  


2.           <audio id="audio1">


3.   <source src="audio.mp3" type="audio/mp3">


4.   <source src="audio.oga" type="audio/oga">


5. </audio>


6.         

Se você estiver hospedando o conteúdo de áudio ou vídeo em seu próprio servidor, você deve ter o tipo MIME correto para cada arquivo de mídia ou muitos navegadores pronto para HTML5 (como o Internet Explorer e Firefox) não vão jogar a mídia. Para adicionar tipos de MIME no IIS 7.0, vá para a exibição de recursos, clique duas vezes em tipos de MIME, clique no botão Adicionar no painel de ações, adicionar a extensão (mp4) e o tipo de MIME (vídeo/mp4) e, em seguida, prima OK. Em seguida, faça o mesmo para os outros tipos (webm e video/webm) você planeja usar.

Suporte a navegadores mais antigos incluindo dois arquivos de mídia (como MP4 e WebM para vídeo) faz HTML5 mídia funciona em todos os navegadores modernos. Mas quando navegadores mais antigos (como o Internet Explorer 8) encontram a tag vídeo, eles não podem exibir o vídeo.Eles processará, no entanto, o HTML colocar entre a abertura <video> e fechamento </video> marcas de formatação. O exemplo a seguir inclui uma mensagem convidando os usuários para obter um navegador mais recente:

1.  


2.           <video id="video1" width="640" height="360" >


3.   <source src="video.mp4" type="video/mp4">


4.   <source src="video.webm" type="video/webm">


5.   <p>Please update your browser</p>


6. </video>


7.         

Para permitir que os visitantes com navegadores não-HTML5-pronto reproduzir o vídeo, você pode fornecer uma alternativa com Flash embutido que reproduz o mesmo MP4 que você fornecer para o Internet Explorer 9, Safari e Chrome, conforme mostrado na Figura 5.

Figura 5 reprodução de vídeo com o Flash

 

1.  


2.           <video id="video1" width="640" height="360" >


3.   <source src="video.mp4" type="video/mp4">


4.   <source src="video.webm" type="video/webm">


5.   <object width="640" height="360" classid


6. ="clsid:


7.     d27cdb6e-ae6d-11cf-96b8-444553540000"

 codebase=

8.       "http://fpdownload.macromedia.com/pub/


9.       shockwave/cabs/flash/swflash.cab#version=8,0,0,0"


10. >


11.         <param name="SRC" value="player.swf?file=video.mp4">


12.         <embed src="player.swf?file=video.mp4" width="640"


13.           height="360"></embed> 


14.         <p>Please update your browser or install Flash</p>


15.   </object>


16. </video>


17.         

Esta marcação apresenta todos os navegadores com alguma maneira de reproduzir vídeo.Navegadores com HTML5, nem Flash serão exibida uma mensagem pedindo para atualizar. Para obter mais informações sobre como e por que essa marcação aninhada funciona, consulte "Video para todos" Kroc Camen (camendesign.com/code/video_for_everybody).

Esta abordagem tem alguns inconvenientes, entretanto. Em primeiro lugar, há um monte de marcação para manter. Em segundo lugar, você deve codificar e armazenar arquivos de mídia, pelo menos, dois. E em terceiro lugar, quaisquer controles HTML/JavaScript que você adiciona à página não funcionará com o player Flash embutido. Mais tarde, eu vou sugerir várias bibliotecas JavaScript que podem ajudá-lo a superar esses problemas, mas primeiro, vamos abordar uma questão final.

Suporte de tela cheia Flash e Silverlight incluem um modo de tela cheia que permite aos usuários assistir vídeo e outros tipos de conteúdo em sua tela. Você pode implementar esse recurso Criando um simples botão e amarrando-lo para um ActionScript (para o Flash) ou c# (para Silverlight) comando tela inteira.

Navegadores atuais têm um modo de tela cheia semelhante que usuários podem disparar com um comando de menu ou teclado (frequentemente F11 ou Ctrl + F). Mas até recentemente, nenhuma API JavaScript equivalente permitiu que os desenvolvedores iniciar o modo de tela inteira de um botão em uma página. Isso significava que HTML5 vídeo poderia ser exibido somente em uma "janela completa" que encheu a janela do navegador, mas não a tela inteira.

No final de 2011, Safari, Chrome e Firefox adicionou suporte para o W3C proposta FullScreen API, que oferece recursos semelhantes no Flash e do Silverlight. A equipe do Opera está atualmente trabalhando em implementá-lo, mas a equipe do Internet Explorer, como do presente escrito, ainda não decidiu se procederá a API. O navegador de Metro-estilo em Windows 8 será tela inteira por padrão, mas usuários de Internet Explorer desktop serão necessário entrar no modo de tela cheia manualmente usando o menu de opções ou a tecla F11.

Para entrar no modo de tela cheia em navegadores que oferecem suporte a ele, você chamar o requestFullscreen Método sobre o elemento a ser exibido em tela cheia. O comando para sair do ecrã inteiro é chamado no objeto do documento: Método de Document.exitFullscreen. A proposta da W3C é ainda um trabalho em andamento, então não entrarei em mais detalhes aqui, mas sou de controle o estado da API no meu blog: bit.ly/zlgxUA.

HTML5 Vídeo e áudio bibliotecas de JavaScript

Um número de desenvolvedores criaram bibliotecas JavaScript que fazem HTML5 áudio e vídeo mais fácil, integrando todos os códigos relevantes em um único pacote. Algumas das bibliotecas de melhor fonte aberta são MediaElement.js, jPlayer, VideoJS, Projekktor, Playr e LeanBack. Você encontrará uma lista completa com comparação de recursos na praegnanz.de/html5video.

Tudo que você precisa fazer é fornecer uma marca de áudio ou vídeo e a biblioteca irá automaticamente criar um conjunto de controles personalizados, bem como inserir um Flash player para browsers que não suportam HTML5 Media. O único problema é que os jogadores Flash que muitas bibliotecas inserir sempre não olhar ou funcionam como o jogador do HTML5.Isto significa que quaisquer eventos de HTML5 que você adiciona não vai trabalhar com o Flash player e qualquer personalizado CSS que você usar não será visível, tampouco.

Em meu próprio trabalho, me pediram para criar um player de vídeo HTML5 com slides sincronizados e transcrições (ver online.dts.edu/player para uma demo). Nós tínhamos uma biblioteca existente de mais de 3.000 arquivos de vídeo h. 264 e ele foi considerado inviável para transcodificá-los para WebM para Firefox e Opera. Também precisávamos dar suporte a navegadores antigos como o Internet Explorer 8, mas um Flash separado alternativa não iria funcionar porque ele não iria responder a eventos de slides e transcrições.

Para superar essas dificuldades, eu criei um dos jogadores mencionados anteriormente chamado MediaElement.js (mediaelementjs.com). É uma biblioteca JavaScript de código aberto (MIT/GLPv2) que inclui jogadores especiais de Flash e do Silverlight que imitam a API do HTML5. Em vez de um Flash player totalmente separado, MediaElement.js usa Flash apenas para processar vídeo e, em seguida, ajusta o vídeo com um objeto JavaScript que se parece com a API do HTML5. Isso efetivamente atualiza todos os navegadores para que possam usar a etiqueta de vídeo e codecs adicionais suportados não nativamente. Para iniciar o player com um arquivo de h. 264 único usando jQuery, você precisa apenas o seguinte código:

1.  


2.           <video id="video1" width="640" height="360" src="video.mp4" controls></video>


3. <script>


4. jQuery(document).ready(function() {


5.   $("video1").mediaelementplayer();


6. });


7. </script>


8.         

Para navegadores que não suportam a tag vídeo (como o Internet Explorer 8) ou aqueles que não oferecem suporte h. 264 (Firefox e Opera), MediaElement.js irá inserir o Flash (ou Silverlight, dependendo o que o usuário tenha instalado) correção para "upgrade" desses navegadores assim que eles ganham o HTML5 mídia propriedades e eventos, eu tratei.

Para suporte de áudio, você pode usar um único arquivo MP3:

1.  


2.           <audio id="audio1" src="audio.mp3" controls></audio>


3.         

Como alternativa, você pode incluir um único arquivo Ogg/Vorbis:

1.  


2.           <audio id="audio1" src="audio.oga" controls></audio>


3.         

Novamente, para navegadores que não suportam a tag áudio (Internet Explorer 8) ou para aqueles que não oferecem suporte a Ogg/Vorbis (9++ do Internet Explorer e Safari), MediaElement.js irá inserir uma correção para "upgrade" desses navegadores assim que todos eles funcionam como se eles suporte o codec nativo. (Nota: Ogg/Vorbis não serão reproduzidos em dispositivos móveis.)

MediaElement.js também inclui suporte para o elemento track, como modo de tela cheia nativo para browsers que implementaram a API para JavaScript. Você pode adicionar seus próprios eventos HTML5 ou controlar propriedades e ele vai trabalhar em cada navegador e dispositivo móvel.

Espero que eu tenho mostrado que apesar de algumas peculiaridades, os elementos de vídeo e áudio HTML5, especialmente quando combinados com as excelentes bibliotecas que eu sugeri, são fáceis de adicionar a sites existentes e deve ser o padrão para todos os novos projetos.

John Dyer é o diretor de desenvolvimento Web para o seminário teológico de Dallas (dts.edu). Ele blogs em j.hn.

Graças aos seguintes especialistas técnicos para revisão deste artigo: John Hrvatin e Satrom de Brandon