HTML5 e a tag video - Parte 5: tocando uma `playlist'
Autor: Gustavo Franco | Publicado: 2010-07-13T15:50:00-07:00

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.
&nbsp;&nbsp; var videos = [ "http://video-js.zencoder.com/oceans-clip.ogg",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "http://upload.wikimedia.org/wikipedia/commons/b/b5/I-15bis.ogg"&nbsp;];
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.

&nbsp;&nbsp; window.onload = onLoadDocument;&nbsp;&nbsp; function onLoadDocument(){ player(); }
Código para fazer com que no momento em que a página é carregada, a função player seja chamada.

&nbsp;&nbsp; function player() {&nbsp;&nbsp; &nbsp; &nbsp;var containerVideo = document.getElementById("player");&nbsp;&nbsp; &nbsp; &nbsp;var videoIndex = 0;&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.poster = "http://wiki.debian.org/FrontPage?action=AttachFile&amp;do=get&amp;target=lennybanner.png";&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.controls = "controls";&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.src = videos[videoIndex];&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.load();&nbsp;&nbsp; &nbsp; &nbsp;addEventListener("ended", function onEnded(){ nextVideo(containerVideo, videoIndex); }, false);&nbsp;&nbsp; }
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).&nbsp;
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.&nbsp;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).

&nbsp;&nbsp; function nextVideo(containerVideo, videoIndex) {&nbsp;&nbsp; &nbsp; &nbsp;console.info("nextVideo was called - videoIndex is %s", videoIndex);&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.src = videos[videoIndex + 1];&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.load();&nbsp;&nbsp; &nbsp; &nbsp;containerVideo.play();&nbsp;&nbsp; }
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).&nbsp;
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.

&nbsp;&nbsp; &lt;video id="player" style="background:#000; width:480px; height:360px;"&gt;&lt;/video&gt;
É basicamente o HTML que você precisa para tocar os vídeos na `playlist' acima.&nbsp;
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 &lt;video&gt; e &lt;source&gt; 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.