O Firefox 3.5 introduz suporte para os elementos audio e video do HTML 5, oferecendo a capacidade de facilmente embutir mídia em documentos HTML. Atualmente são suportados os formatos de mídia Ogg Theora, Ogg Vorbis e WAV.
Embutindo mídia
Embutir mídia no seu documento HTML é simples:
<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay> Your browser does not support the <code>video</code> element. </video>
Este exemplo roda um video de amostra do web site Theora, por exemplo.
Múltiplos arquivos fonte podem ser especificados usando o elemento source (en) a fim de proporcionar vídeo/áudio codificados em diferentes formatos para diferentes navegadores. Por exemplo:
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the <code>video</code> element. </video>
tocará um arquivo Ogg em navegadores que suportem o formato Ogg. Se o navegador não suportar Ogg, ele tentará usar o arquivo MPEG-4.
Você pode também especificar quais codecs de mídia o arquivo requere; isto permite ao navegador, tomar decisões cada vez mais inteligentes:
<video controls> <source src="foo.ogg" type="video/ogg; codecs="dirac, speex""> Your browser does not support the <code>video</code> element. </video>
Aqui nós especificamos que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não os codecs especificados, o vídeo não será carregado.
Se o atributo type não for especificado, o tipo da mídia é obtido pelo servidor e checado para ver se o Gecko pode lidar com ele; se ele não puder ser renderizado, a próxima fonte é checada. Se nenhum dos elementos source especificados puder ser usado, um evento error é expedido para o elemento video. Se o atributo type é especificado, ele é comparado com os tipos que o Gecko pode tocar, e se não for reconhecido, o servidor não é nem mesmo requisitado; ao invés disso, a próxima fonte é checada uma vez.
Controlando a reprodução de mídia
Uma vez que você tenha adicionado mídia no seu documento HTML, usando os novos elementos, você pode controlá-la programaticamente através do seu código JavaScript. Por exemplo, para começar (ou recomeçar) uma reprodução, você pode fazer isto:
var v = document.getElementsByTagName("video")[0];
v.play();
A primeira linha busca o elemento video no documento e a segundo chama o método play() do elemento, como definido na interface nsIDOMHTMLMediaElement que é usada para implementar elementos de mídia.
Eventos de mídia
Diversos eventos são enviados durante o manuseio de mídia:
| Nome do evento | Descrição |
abort | Enviado quando a reprodução é abortada; por exemplo, se a mídia estiver tocando e for reiniciada, este evento é enviado. |
canplay | Enviado quando há dados suficientes disponíveis para que a mídia seja tocada, ao menos por alguns quadros. Corresponde ao CAN_PLAY readyState. |
canplaythrough | Enviado quando o estado pronto muda para CAN_PLAY_THROUGH, indicando que a mídia inteira pode ser tocada sem interrupção, assumindo que a taxa de download permaneça ao menos no nível atual. |
canshowcurrentframe | O quadro atual carregou e pode ser apresentado. Isto corresponde ao CAN_SHOW_CURRENT_FRAME readyState. |
dataunavailable | Enviado quando o estado pronto muda para DATA_UNAVAILABLE. |
durationchange | Os metadados foram carregados ou modificados, indicando uma mudança na duração da mídia. Isto é enviado, por exemplo, quando a mídia carregou o suficiente para se saber a sua duração. |
emptied | A mídia torna-se vazia; por exemplo, este evento é enviado se a mídia já foi carregada (ou parcialmente carregada), e o método load() é chamado para recarregar isto. |
empty | Enviado quando um erro ocorre e a mídia está vazia. |
ended | Enviado quando a reprodução termina. |
error | Enviado quando um erro ocorre. O atributo error do elemento contém mais informações. |
load | A mídia foi completamente obtida. |
loadedfirstframe | O primeiro quadro de mídia terminou de carregar. |
loadedmetadata | Os metadados da mídia terminaram seu carregamento; todos os atributos agora contém toda a informação que poderiam ter. |
loadstart | Enviado quando o carregamento da mídia inicia. |
pause | Enviado quando a reprodução é pausada. |
play | Enviado quando a reprodução começa ou continua. |
ratechange | Enviado quando a velocidade da reprodução muda. |
seeked | Enviado quando uma operação solicitada se completa. |
seeking | Enviado quando uma operação solicitada começa. |
timeupdate | O tempo indicado pelo atributo currentTime do elemento mudou. |
volumechange | Enviado quando o volume do áudio muda (tanto quando o volume é configurado, quando o atributo muted é mudado). |
waiting | Enviado quando a operação requisitada (como a reprodução) é adiada até que se complete outra operação (como uma solicitação). |
Você pode facilmente assistir a estes eventos usando o seguinte código:
var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
Este exemplo busca o primeiro elemento video no documento e anexa um evento listener a ele, olhando para o evento solicitado, que é enviado sempre que uma operação solicitada é completada. O listener simplesmente pede ao método play() do elemento, que inicia a reprodução.
Então, na linha 4, o exemplo configura o atributo currentTime do elemento para 10.0, o que inicia uma operação de solicitação até a marca de 10 segundos na mídia. Isto causa o envio de um evento seeking quando a operação começa, então um evento seeked é expedido quando a solicitação é completada.
Em outras palavras, este exemplo solicita até os 10 segundos da marca na mídia, e então começa a reprodução assim que a solicitação é finalizada.
Opções de fallback
O código HTML incluído entre, por exemplo, as tagas <video> e </video> é processado por navegadores que não suportam o elemento media do HTML 5. Você pode tirar vantagem deste fato para proporcionar um fallback de mídia alternativa para estes navegadores.
Esta seção proporciona duas possíveis opções de fallback para vídeo. Em cada caso, se o navegador suportar o elemento video do HTML 5, este será usado; caso contrário, a opção fallback será usada.
Usando Flash
Você pode usar o Flash para tocar um filme em formato Flash se o elemento video não for suportado:
<video src="video.ogv" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
Note que você não inclui class ou id na tag object para que seja compatível com outros navegadores além do Internet Explorer.
Tocando vídeos Ogg usando um miniaplicativo Java
Aqui está um miniaplicativo Java chamado Cortado que você pode usar como fallback para tocar vídeos Ogg em navegadores que tenham suporte a Java, mas não ao elemento video do HTML 5:
<video src="my_ogg_video.ogg" controls width="320" height="240">
<object type="application/x-java-applet"
width="320" height="240">
<param name="archive" value="cortado.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="my_ogg_video.ogg">
</object>
</video>
Veja também
audiovideosource(EN)- Manipulating video using canvas (EN)
nsIDOMHTMLMediaElement- Media formats supported by the audio and video elements (EN)