Blog Post

HTML5 - Elementos Audio e Video e Codecs

Description

Generic Episode Image

ELEMENTOS AUDIO E VIDEO E CODECS

Áudio

Para inserir áudio em uma página web, basta usar o elemento audio:

<audio src=”mus.oga” controls=”true” autoplay=”true” />

O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela. Se for setado como "false", será preciso controlar o player via javascript, com métodos como play()e pause(). O valor de autoplay define se o áudio vai começar a tocar assim que a página carregar.

Origens alternativas de áudio

Todo agente de usuário deveria suportar o codec livre OggVorbis, mas, infelizmente, pode acontecer de seu arquivo oga não tocar no computador ou celular de alguém. Quem sabe do seu chefe ou seu cliente. Então é preciso saber como oferecer um formato alternativo de áudio. Fazemos assim:

<audio controls=”true” autoplay=”true”>
<source src=”mus.oga” />
<source src=”mus.mp3” />
<source src=”mus.wma” />
</audio>

Claro, o agente de usuário pode ainda não saber tocar nenhum desses formatos, ou sequer ter suporte a áudio. Para esses casos, ofereça um conteúdo alternativo:

<audio controls=”true” autoplay=”true”>
<source src=”mus.oga” />
<source src=”mus.mp3” />
<source src=”mus.wma” />
<p>Faça o <a href=”mus.mp3”>download da música</a>.</p>
</audio>

Vídeo

O uso de vídeo é muito semelhante ao de áudio:

<video src=”u.ogv” width=”400” height=”300” />

E com vários elementos source:

<video controls=”true” autoplay=”true” width=”400” height=”300”>
<source src=”u.ogv” />
<source src=”u.mp4” />
<source src=”u.wmv” />
<p>Faça o <a href=”u.mp4”>download do vídeo</a>.</p>
</video>

Codecs

É muito importante que você inclua, nos seus elementos source de áudio e vídeo, informação a respeito do container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de mídia para, depois, descobrir que não consegue tocá-lo. É importante lembrar que a extensão do arquivo não é informação relevante para isso, pelo contrário, não significa nada. Uma URL pode não ter extensão de arquivo e pode levar a um redirecionamento. Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type, no formato:

type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'

Por exemplo, um vídeo em Ogg, usando os codecs Theora e Vorbis, terá seu source assim:

<source src=’video.ogv’ type=’video/ogg; codecs=”theora, 
vorbis”’>

Com MPEG-4 a coisa é um pouco mais complicada, por que é preciso indicar ao navegador também o profile do codec de vídeo utilizado. Veja um exemplo:

<source src=’video.mp4’ type=’video/mp4; codecs=”mp4v.20.240, 
mp4a.40.2”’>

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

The Discussion

  • User profile image
    Fernando Cardoso Ribeiro

    Excelente!

  • User profile image
    Pablo

    Não consegui mostrar o link para download, acho que eu tinha que coloca-lo fora da tag <audio> e <video> mais em uma mesma <div>. =S Vamos seguindo.

  • User profile image
    Ademilson

    Muito bom

  • User profile image
    Alexandre

    Show mesmo!

  • User profile image
    dheyfesson

    bacana.

  • User profile image
    Johan

    De fato o link para download esta errado, deve ser colocado fora da tag audio/video

  • User profile image
    Johnny Suzuki

    Era uma necessidade, agora fica mais fácil, apesar que os videos em conteúdos dinâmicos a grande maioria prefere o youtube...

  • User profile image
    Claudinei de Camargo

    Muito bom.

  • User profile image
    J Neto

    Creio que o link para download só aparecerá caso o navegador não suporte a mídia inclusa no site.

    No exemplo da música, o browser tentará executar o arquivo 'mus.oga'. Se a execução do arquivo for bem sucedida, o browser não tentará executar os arquivos 'mus.mp3' e 'mus.wma', tampouco exibirá o link para download da música.

    O link para download da mídia só aparecerá em último caso, caso tenha falhado as tentativas de execução dos arquivos 'mus.oga', 'mus.mp3' e 'mus.wma'.

  • User profile image
    alexsandro

    o uso alternativo para download do arquivo ou sugerir novos formatos é muito bom e conhecer os codecs a serem inseridos é muito importante.

  • User profile image
    Fabricio 01 FDG

    é dimais para aplicar videos e audios fica muito bom

  • User profile image
    c33k

    Muito útil! Este curso está todo muito bom!

  • User profile image
    Gilson

    Gostei muito e muito bem explicado.

  • User profile image
    PauloVictor

    Ótimo!

    Mas não consegui entender muito bem a especificação do codec do MPEG-4

     

    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240,
    mp4a.40.2"'>

    Neste caso os números indicariam a taxa de bits ? ou está especificando o tpo de conversão de mp4, ou mlehor a versão do formato de vídeo? como saber quais números especificados acima eu devo utilizar em meu vídeo?

  • User profile image
    Wilson Ney

    Temos um macete uma explicação que posso dizer que era uma lacuna para desenvolvedores que este post acabou de explicar, parabéns mais uma novidade. Obrigado!

  • User profile image
    lucas

    pessoal eu nao to entendendo nada, alguem me explica o que é isso?

  • User profile image
    pedro

    muito bom

  • User profile image
    Adriano

    Muito bom o conteúdo!

  • User profile image
    Daniel

    Muito Prático!

  • User profile image
    samuelsilva

    Prático e direto. show!

  • User profile image
    pernoli

    Boas opções!

  • User profile image
    wallax

    o.O interessante!!!

  • User profile image
    Leandro maia

    Muito bom show...

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.