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>
 <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari -->
 <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox -->
</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">
   <video id="demo-video" poster="snapshot.jpg" controls>
    <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari -->
    <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox -->
   </video>
</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">
  $(document).ready(function() {
    var v = document.createElement("video"); // Para browsers que suportam a tag <video>
    if ( !v.play ) { // Caso contrário, utilize Flash.
      var params = {
        allowfullscreen: "true",
        allowscriptaccess: "always"
      };
      var flashvars = {
        file: "video.f4v",
        image: "snapshot.jpg"
      };
      swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
    }
  });
</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.