HTML5 e a tag video - Parte 5: tocando uma `playlist'

No post anterior dessa série sobre HTML5 e a tag vídeo falei sobre `markup'. Agora vou explicar como tocar uma `playlist' usando JavaScript. Com um exemplo simples e comentado.

   var videos = [ "http://video-js.zencoder.com/oceans-clip.ogg",

                           "http://upload.wikimedia.org/wikipedia/commons/b/b5/I-15bis.ogg" ];

Primeiro declaro uma lista de videos contendo dois elementos que apontam para vídeos em ogg. Dessa forma, esse exemplo só é funcional em Firefox 3.5+. Para torná-lo compatível com outros navegadores, mude as URLs abaixo para apontar para vídeos em webm ou ainda mp4. Refira-se ao post sobre compatibilidade dos navegadores se estiver na dúvida.

   window.onload = onLoadDocument;

   function onLoadDocument(){ player(); }

Código para fazer com que no momento em que a página é carregada, a função player seja chamada.

   function player() {

      var containerVideo = document.getElementById("player");

      var videoIndex = 0;

      containerVideo.poster = "http://wiki.debian.org/FrontPage?action=AttachFile&do=get&target=lennybanner.png";

      containerVideo.controls = "controls";

      containerVideo.src = videos[videoIndex];

      containerVideo.load();

      addEventListener("ended", function onEnded(){ nextVideo(containerVideo, videoIndex); }, false);

   }

A função player é a primeira a ser executada, o que acontece logo após a página ser carregada. Aqui é definido que containerVideo nada mais é do que qualquer elemento que tiver a id player. No HTML é necessário definir uma tag video com id player (ver abaixo). 

O videoIndex é definido como 0 e o poster (thumbnail) para todos os vídeos é definido como um PNG. Normalmente esse poster é uma imagem com um `frame' do vídeo. Tente redefini-lo em nextVideo como exercício. O próximo atributo a ser definido é controls, para os controles do tocador de vídeos do navegador aparecerem - aqui eu o defino como controls mesmo por estilo, qualquer coisa pode ser utilizada.

O próximo passo é definir o atributo src da tag vídeo como sendo o primeiro (videoIndex é zero) da lista videos e invocar o método load para garantir o carregamento. A última linha do código é a mais importante para garantir que o próximo vídeo pode ser tocado. Com addEventListener passo a ouvir pelo evento `ended' que é disparado pelo navegador ao fim de cada vídeo. Quando isto ocorre, prontamente a função nextVideo é chamada com o containerVideo (referência a tag video) e videoIndex que indica a posição atual na lista videos, para que nextVideo possa saber qual vídeo tocar (videoIndex+1).

   function nextVideo(containerVideo, videoIndex) {

      console.info("nextVideo was called - videoIndex is %s", videoIndex);

      containerVideo.src = videos[videoIndex + 1];

      containerVideo.load();

      containerVideo.play();

   }

Função nextVideo que é chamada ao final de cada vídeo recebendo um containerVideo e o videoIndex atual. Nela existe uma chamada a console.info para `debug' - útil se você tiver o Firebug instalado no Firefox (note que navegadores que usam Webkit também entendem console.info e etc). 

Em nextVideo redefine-se o atributo src do containerVideo que nada mais é do que a tag video para o próximo da lista - videos[videoIndex + 1]. Após isto chama-se o método load do video para carregá-lo e logo depois play para tocar.

   <video id="player" style="background:#000; width:480px; height:360px;"></video>

É basicamente o HTML que você precisa para tocar os vídeos na `playlist' acima. 

Exemplo completo do player HTML5 para tocar uma `playlist' utilizando javascript. Faça o que quiser com ele, é idontgiveafuckware. É tão básico que chega a ser vergonhoso limitar a sua liberdade com qualquer coisa além disso. :-)

Eu comecei a escrever um exemplo para tocar `playlist' com `fallback' para múltiplos videos utilizando <video> e <source> e ainda um exemplo com JSON. Parei, pois, achei que seria bastante complicado explicar todos os três em um post. Adiciono um link a esse post se chegar a terminá-los posteriormente, já que não devo me extender mais na parte de tocar `playlists' nessa série. Se caiu aqui precisando muito desse código, deixe um comentário.

Agradecimentos ao Max! Em conjunto iniciamos o trabalho no primeiro tocador de vídeos em HTML5 desse tipo. É bem incomum ter longos vídeos separados em blocos da forma que temos na Globo.com, logo, o evento "ended" foi mais que um achado. Lembro que teorizamos sobre isto quando o projeto estava em estágio inicial. De uma idéia até uma demo foi tudo bem rápido, questão de um dia ou dois. O que levou e ainda toma bastante tempo são todas as centenas de detalhes de regras de negócio que precisam ser implementadas.

Ah, e olha que grata coincidência: Na madrugada de hoje subimos uma versão de um tocador de vídeos HTML5/JS que usa a técnica descrita acima para tocar blocos de íntegras de vídeos da Globo.com. Infelizmente esse tocador não está disponível para todos os usuários. A maioria dos vídeos ainda é servido utilizando Flash (cof! cof!). No próximo post e último dessa série, você vai saber o motivo e entender quais os desafios para migrar tudo para HTML5.