MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

Os elementos <audio> e <video> fornecem suporte para a 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, embora apenas alguns são relevantes para a 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 relevantes 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 possui 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 os seguintes tipos 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 possui suporte para esse formato.

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

A situaçã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 possivelmente á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 está 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.

Ogg FLAC

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) e versões superiores, somente no desktop.

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 possui 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.

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

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 operacional 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".

Nota: Veja RFC 2361 para ver registros do codec WAVE

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 permitir 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.

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

Compatibilidade de navegadores

Características Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 3.0 3.5 (1.9.1) 9.0 10.50 3.1
<audio>: PCM em WAVE (Yes) 3.5 (1.9.1) Não suportado 10.50 3.1
<audio>: Vorbis em WebM (Yes) 4.0 (2.0) Não suportado 10.60 3.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia ? 36.0 (36.0) na edição  Nightly/Dev apenas ? ? ?
<audio>: Vorbis em Ogg (Yes) 3.5 (1.9.1) Não suportado 10.50 3.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3 (Yes) (Não em Chromium) Partial (Veja abaixo) 9.0 (Yes) 3.1
<audio>: MP3 em MP4

?

? ? ? (Yes)
<audio>: AAC em MP4

(Yes) (Main only) (Não em  Chromium)

Partial (Veja abaixo)

9.0 (Yes) 3.1
<audio>: Opus em Ogg 27.0 15.0 (15.0) ? ? ?
<video>: VP8 e Vorbis em WebM 6.0 4.0 (2.0) 9.0 (deve ser instalado separadamente, e.g. WebM MF) 10.60 3.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM 29.0 28.0 (28.0) ? (Yes) ?
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia ? 36.0 (36.0) na edição  Nightly/Dev apenas ? ? ?
<video>:  Theora e Vorbis em Ogg (Yes) 3.5 (1.9.1) Não suportado 10.50 3.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4

(Yes) (Not in Chromium)

Partial (Veja abaixo) 9.0 (Yes) (Yes)
<video>: H.264 e AAC em MP4

(Yes) (Not in Chromium)

Partial (Veja abaixo) 9.0 (Yes) 3.1
outro formato Não suportado Não suportado Não suportado Não suportado 3.1 (executa todos os formatos via QuickTime)
Características Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile Chrome for Android
Suporte básico 2.3 24.0 1.0.1 10.0 11.0 Partial (Veja abaixo) 3.2 29.0
<audio>: PCM em WAVE ? 24.0 1.0.1 Não suportado Não suportado Partial (Veja abaixo) 3.2 ?
<audio>: Vorbis em WebM ? 24.0 1.0.1 Não suportado 11.0 Partial (Veja abaixo) Não suportado ?
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia ? ? ? ? ? ? ? ?
<audio>: Vorbis em Ogg ? 24.0 1.0.1 Não suportado 11.0 Partial (Veja abaixo) Não suportado ?
<audio>: MP3 ? Partial (Veja abaixo) Partial (Veja abaixo) 10.0 ? Partial (Veja abaixo) 3.2 ?
<audio>: MP3 em MP4 ? ? ? ? ? ? (Yes) ?
<audio>: AAC em MP4 ? Partial (Veja abaixo) Partial (Veja abaixo) 10.0 ? Partial (Veja abaixo) (Yes) ?
<audio>: Opus em Ogg Não suportado 24.0 Não suportado Não suportado Não suportado Partial (Veja abaixo) Não suportado Não suportado
<video>:  VP8 e Vorbis em WebM 2.3 24.0 1.0.1 Não suportado 16.0 Partial (Veja abaixo) Não suportado 29.0
<video>: VP9 and Opus em WebM ? ? ? ? ? ? ? ?
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia ? ? ? ? ? ? ? ?
<video>: Theora e Vorbis em Ogg Não suportado 24.0 1.0.1 Não suportado Não suportado Partial (Veja abaixo) Não suportado Não suportado
<video>:  H.264 e MP3 em MP4 Partial (Veja abaixo) 24.0 Partial (Veja abaixo) 10.0 Partial since 11.0, full since 16.0 Partial (Veja abaixo) (Yes) 29.0
<video>: H.264 e AAC em MP4 Partial (Veja abaixo) 24.0 Partial (Veja abaixo) 10.0 Partial since 11.0, full since 16.0 Partial (Veja abaixo) 3.2 29.0
qualquer outro formato ? ? ? ? ? ? ? ?

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 dispositivo  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 construídas 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:
Plataforma Versão Firefox
Windows Vista+ 22.0+
Android 20.0+
Firefox OS 15.0+
Linux

26.0+ (depende do codec GStreamer)

OS X 10.7+ 35.0+

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: MarceloBonifazio, yuriploc, brunoeduardo
 Última atualização por: MarceloBonifazio,