Formatos de mídia suportados por elementos HTML de áudio e vídeo

Os elementos <audio> e <video> fornecem suporte para reprodução de mídias de áudio e vídeo sem necessitar de plug-ins. Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos,  no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, ambora apenas alguns são relevantes para na internet.

Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers releveantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.

Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos  WebM e MPEG H.264 AAC, usando o elemento <source> desta forma:

<video controls>
  <source src="somevideo.webm" type="video/webm">
  <source src="somevideo.mp4" type="video/mp4">
  Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264.   
  <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
</video>

WebM

O formato WebM é baseado em uma versão restrita do container Matroska. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.

Declaração da Microsoft sobre o porquê o IE9 não possue suporte nativo  para o WebM.

O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.

Gecko reconhece o seguintes tipos de de arquivos WebM:

video/webm

Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).

audio/webm

Um arquivo de mídia WebM contendo apenas áudio.

Ogg Theora Vorbis

O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possue suporte para esse formato.

WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disposnível, por que ele possue uma melhor qualidade de compressão e tem suporte na a maioria dos navegadores. O formato Ogg contudo, pode ser usado para navagadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).

A situção de patente do Theora é similar com a da WebM.

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

audio/ogg

Um arquivo Ogg que contem apensa áudio

video/ogg

Um arquivo Ogg que contem vídeo (e possivelmento áudio)

application/ogg

Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.

Ogg Opus

O container Ogg  pode também conter um áudio codificado usando o codec Opus. Suporte para ele é disponível no Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) e versões superiores, em navegadores no desktop e dispositivos móveis.

MP4 H.264 (AAC ou MP3)

O formato MP4 com o codec de vídeo H.264 e codec de áudio  AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possue suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4.

O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

MP3

O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacinal fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.

WAVE PCM

O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

• audio/wave (preferido; não funciona no Chrome)
• audio/wav
• audio/x-wav
• audio/x-pn-wav

Media Source Extensions (MSE)

Origem da extesão de mídia é um projeto de trabalho da W3C que planeja ampliar HTMLMediaElement para permiitr que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.

Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

Compatibilidade de navegadores

Notas:

• AAC é suportado apenas em containers MP4.
• Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositvio  executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.
• Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
• No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.
• Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construidas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:

• Video codecs in Opera
• Video codecs in Internet Explorer
• Audio codecs in Internet Explorer
• Audio & Video codecs in Chrome

Veja também

• Using audio and video in Firefox
• HTML media support in Firefox
• Media elements (HTML 5 specification)
• video
• audio