Este artigo foi traduzido por máquina.

HTML5

Trabalhando com mídia em HTML5

Jason Beres

 

A menos que você tenha vivido em uma ilha remota para o ano passado, deve ter ouvido a agitação e atenção ao redor do HTML5. Não, HTML5 será remediar a maioria das doenças importantes, nem terminará contra a fome do mundo, mas ele está pronta para remodelar o cenário de aplicativo rich Internet. Com todo o anúncio sobre o novo padrão HTML, é importante trazer a discussão de volta para baixo earth. Aqui estão os fatos importantes que você precisa saber sobre essa nova especificação de HTML:

• HTML5 é a primeira e a nova versão da especificação desde 1999 — a Web mudou muito desde então.
• HTML5 será o novo padrão para HTML, XHTML e o DOM do HTML.
• HTML5 fornece uma maneira padrão de reprodução de mídia — uma chave se beneficiam porque não havia nenhum padrão para reprodução de mídia em uma página da Web sem um plug-in de navegador e não há garantia de que todos os navegadores daria suporte ao plug-in.
• HTML5 ainda é um trabalho em andamento, mas a maioria dos navegadores atuais possuem algum suporte de marca HTML5.

Quando o Silverlight 1.0 ser fornecido em 2007, o Microsoft citado a reprodução de áudio e vídeo como principais recursos e a principal razão para ver o Silverlight como uma alternativa ao Flash — que é suportado na versão de um ou outro em 95% dos navegadores em todo o mundo. Este artigo, o Silverlight é suportado em torno de 75% dos navegadores em todo o mundo, ou cerca de três de cada quatro computadores. Mas se você estiver procurando para reproduzir mídia e você não quiser o incômodo ou a dependência de um plug-in, HTML5 é a resposta.

Para ver a diferença entre usar a marca de vídeo HTML5 e o objeto tradicional reproduzir mídia, considere o exemplo na a Figura 1.

Figura 1 O vs de marca de vídeo do HTML. a marca de objeto para reproduzir mídia

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

O que é a grande importância? Ambos os exemplos são simples e fácil de implementar. Mas o ponto importante aqui é que, porque o <video> marca é um padrão, não há dúvida de que ele deve ser usado para reproduzir mídia. Você não precisa se um navegador tem uma determinada versão de um determinado plug-in instalada para reproduzir a mídia de adivinhar. A parte padrão é o que tem sido ausente do HTML.

Formatos de mídia aceitos no HTML5

Para usar a mídia no seu próximo aplicativo HTML5, você precisará saber a quais formatos há suporte. HTML5 suporta AAC, MP3 e Ogg Vorbis para áudio e Ogg Theora, WebM e MPEG-4 para vídeo.

Entretanto, mesmo que o HTML5 oferece suporte a esses formatos de mídia, não todos os navegadores suportam cada formato. Figura 2 mostra os navegadores atuais e os formatos de mídia que oferecem suporte a eles.

Figura 2 suporte a mídia nos navegadores atuais

Usando a marca de vídeo

Para reproduzir um vídeo em uma página de HTML5, basta usar o <video> marca, conforme mostrado aqui:

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

O atributo src (http://www.w3.org/TR/html5/video.html#the-source-element) define o nome ou nomes do vídeo para reproduzir e Boolean switch and Accountability do controle, se a reprodução de padrão controla exibe. Você também pode usar outras duas propriedades booleanas — reprodução automática e loop — ao configurar a tag video. Figura 3 lista cada atributo de propriedade e seu valor.

Figura 3 Propriedades da marca de vídeo

Atributo	Valor	Descrição
Áudio	Sem som	Define o estado padrão do áudio. Atualmente, somente o som é permitido.
Reprodução automática	Reprodução automática	Se estiver presente, o vídeo começa a tocar assim que ele está pronto.
Controles	Controles	Adiciona os controles de reproduzir, pausar e Volume.
Altura	Pixels	Define a altura do player de vídeo.
Loop	Loop	Se estiver presente, o vídeo será iniciado novamente sempre que ela seja concluída.
Cartaz	URL	Especifica a URL de uma imagem que representa o vídeo.
Pré-carregar	Pré-carregar	Se estiver presente, o vídeo é carregado no carregamento da página e está pronto para executar. Ela será ignorada se a reprodução automática está presente.
Src	URL	A URL do vídeo para jogar.
Largura	Pixels	Define a largura do player de vídeo.

O seguinte código mostra algumas das principais propriedades no player de vídeo em um cenário comum que inclui definir a altura e largura, propriedades de reprodução automática, o loop e controles, que exibirão a reproduzir, pausar e controles de volume, bem como uma mensagem de erro de fallback.

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

Você também pode definir o typeusing MIME específico o atributo de tipo e o codec no elemento de origem. Esses exemplos usam o atributo type para definir o tipo de MIME e a codificação da mídia:

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

Você pode definir propriedades em HTML ou JavaScript. O código a seguir mostra como definir a propriedade de controles booleanos no HTML e JavaScript.

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

Quando você não souber se um navegador processará a página, você precisa de um mecanismo de fallback para reproduzir mídia. Tudo que você faz é listar os formatos de vídeo que você tiver processado o vídeo no e o navegador joga aquela primeira que oferece suporte a ele. Você também pode adicionar texto como um último recurso para informar o usuário que o navegador que está sendo usado não dá suporte a reprodução de HTML5 nativa de vídeo. O código a seguir inclui várias fontes de vídeo, além de uma mensagem de retorno indicando que não há suporte para HTML5.

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

Se você quiser se certificar de que o vídeo será reproduzido, você pode incluir a marca de objeto para executar uma versão de Flash da mesma forma, da seguinte forma:

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

Você também pode usar JavaScript para verificar se há suporte para um formato de vídeo, verificando a propriedade canPlayType, da seguinte maneira:

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

Se você deseja fazer algo mais expressivo que o texto simple de fallback, você pode usar o ouvinte de eventos onerror para passar o erro:

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

Usando a propriedade de pôster, você pode especificar a URL de uma imagem para mostrar no lugar do vídeo no formulário. Geralmente você está mostrando uma lista de vídeos ou um único vídeo em um formulário, portanto, ter uma maneira fácil de mostrar uma visualização do vídeo na forma de uma imagem oferece uma melhor experiência do usuário. Esta é a propriedade de cartaz em ação:

<video src="video1.mp4" poster="preview.jpg" </video>

Finalmente, usando um pouco de JavaScript e HTML básico, você pode criar um player de vídeo mais interativo. Figura 4 mostra como adicionar um player de vídeo a um formulário com JavaScript e como responder a entrada do usuário para o controle.

Figura 4 Interagindo com vídeo em JavaScript

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Para obter uma lista completa de eventos e recursos para reprodução de vídeo, confira esta seção da especificação em http://www.w3.org/TR/html5/video.html#playing-the-media-resource.

Usando a Tag de áudio

Usando a tag de áudio é muito parecido com usando a tag video: você passa um ou mais arquivos de áudio para o controle e o primeiro o suporta o navegador é reproduzido.

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

Figura 5 lista as propriedades disponíveis na marca de áudio. O controle não precisa exibir como um player de vídeo, de forma que propriedades como altura, largura e cartaz não estão incluídas.

Figura 5 propriedades da marca de áudio

Atributo	Valor	Descrição
Reprodução automática	reprodução automática	Se estiver presente, o áudio começa a tocar assim que ele está pronto.
Controles	controles	Controles, como, por exemplo, um botão de reprodução são exibidos.
Loop	loop	Se estiver presente, o áudio inicia reproduzir novamente (loop) quando ele atinge o final.
Pré-carregar	pré-carregar	Se estiver presente, o áudio é carregado no carregamento da página e está pronto para executar. Ela será ignorada se a reprodução automática está presente.
Src	URL	A URL do áudio para reproduzir.

Assim como acontece com a marca de vídeo, você pode passar vários arquivos para a marca de áudio e tocará primeiro aquele que é suportado. Você também pode usar uma mensagem de fallback quando o navegador não dá suporte a marca de áudio, como este:

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Resumo

HTML5 é o próximo padrão para a Web e acordo com os navegadores que você objetiva, você pode começar a usar algumas das novas marcas, como áudio e vídeo, agora mesmo. Tome cuidado ao usar o HTML5, no entanto, porque nem todo navegador oferece suporte para as novas marcas, e mesmo se houver, talvez não haja suporte cada formato de mídia. Se você estiver usando um navegador moderno que oferece suporte a HTML5, você ainda precisará fazer o trabalho extra para processar a sua mídia em todos os formatos para garantir o sucesso do usuário. Aqui estão alguns ótimos recursos da Web que fornecem informações de suporte do navegador, além de todas as outras informações que você precisa para garantir o sucesso da mídia de HTML5:

• http://www.w3.org/TR/html5/Video.HTML
• http://dev.w3.org/html5/Spec/Overview.HTML
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• http://caniuse.com/

Jason Beres é Vice-presidente de gerenciamento de produtos, comunidade e divulgação em Infragistics e spearheads e orientado ao cliente e inovadores recursos e funcionalidades ao longo de todos os produtos Infragistics. Jason é um Microsoft.NET MVP e é um membro ativo da.NET comunidade. Ele palestras em dezenas de eventos e conferências em todo o mundo todo ano. Ele é autor de oito livros sobre tópicos que vão desde Visual Basic e C# para SQL Server e o Silverlight. suas mais recentes é Professional Silverlight 4 (Wrox, 2010). Você pode alcançar Jason em jasonb@infragistics.com ou em twitter @ jasonberes.