HTML5: tag video com alternativa em Flash

Com a tag <video> do HTML5 torna-se possível inserir vídeos em
páginas web de uma forma muito simples, semelhante à inserção de imagens
em documentos HTML, onde o próprio browser fornece as funções de
reprodução sem a necessidade de plugins como Flash ou Quicktime.

A marcação HTML para isso é muito simples, e você pode ver um exemplo
abaixo:

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

Safari (versão atual e posteriores), Google Chrome e Firefox 3.1b2 (e
versões posteriores) possuem suporte a HTML5. O Opera no atual momento
possui um experimento onde dá suporte superficial a tag
video. O Safari reproduz arquivos do tipo MPEG4 (e, pelo menos no Mac, é coisa
que o QuickTime pode reproduzir). O Firefox atualmente só suporta
arquivos Ogg Theora.

Essa falta de suporte aos codecs pode ser superada através da
inserção de dois formatos de arquivo na mesma tag <video>:

<video controls><br /> <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari --><br /> <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox --><br /></video>

Já nos browsers antigos, que não suportam a tag <video>, temos
que usar uma alternativa em Flash. Uma alternativa muito simples é
utilizar o SWFObject.

Observem o HTML:

<div id="demo-video-flash"><br />   <video id="demo-video" poster="snapshot.jpg" controls><br />    <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari --><br />    <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox --><br />   </video><br /></div>

Nós colocamos a tag <video> dentro de uma div que é para
anexá-la ao SWFObject. Observem abaixo o JavaScript com o auxílio da
biblioteca jQuery:

<script type="text/javascript"><br />  $(document).ready(function() {<br />    var v = document.createElement("video"); // Para browsers que suportam a tag <video><br />    if ( !v.play ) { // Caso contrário, utilize Flash.<br />      var params = {<br />        allowfullscreen: "true",<br />        allowscriptaccess: "always"<br />      };<br />      var flashvars = {<br />        file: "video.f4v",<br />        image: "snapshot.jpg"<br />      };<br />      swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);<br />    }<br />  });<br /></video></script>

A detecção de suporte do browser é feita através da criação de uma
tag <video>. Caso o elemento não possa ser criado, então entra em
ação o flash que usa o SWFObject para montar o player no HTML.

Vejam um exemplo
em funcionamento. Caso seja de seu interesse, você pode baixar
aqui os arquivos utilizados nesse tutorial para estudo.

A desvantagem para essa solução, já que nem todos os browsers possuem
suporte nativo e a utilização de codecs ainda não é padronizada, é que
você tem que fornecer 3 opções do mesmo arquivo (MPEG4, Ogg e FLV)

Até a próxima!

*

Esse tutorial foi escrito com base no original do site de Henrik Sjökvist. Todo o
material aqui utilizado compete ao autor original do post.