Elemento <video> do HTML5

“Desde que foi mencionada a possibilidade de um elemento <video> no HTML5, por volta de 2005, passaram-se praticamente cinco anos. Entretanto, o elemento viu-se obrigado a passar pelos primeiros testes de implementação em Fevereiro de 2007, até ao primeiro browser o implementar em Novembro de 2007, e o Microsoft’s Internet Explorer se juntar ao resto dos browsers em Março de 2010“. (Freeman, 2011)

A primeira implementação do elemento <video> foi feita pelo Opera, em Fevereiro de 2007. A especificação foi inspirada no elemento <img> e foi construído à semelhança de um JavaScript API para áudio. (Freeman, 2011; Lie, 2007)

“Está na hora de tornar o vídeo num cidadão de primeira classe na web” (Lie, 2007) Infelizmente, o HTML5 herda alguns dos problemas de interoperabilidade dos browsers, conhecidos em versões anteriores do HTML. (Weston, 2013)

“Era útil para a interoperabilidade se todos os browsers suportassem o mesmo codec. Mas não é conhecido nenhum codec que satisfaça todos requisitos dos browsers: […] tem de ser um modelo de desenvolvimento open source, tem de ter qualidade suficiente […] ” de Ian hickson, dezembro 2007 (Freeman, 2011)

19

Houve esforços, como o projeto WebM da Google e várias discussões para se chegar a um acordo e satisfazer todos os browsers, mas isso não foi possível. (Freeman, 2011)

“Depois de excessivas discussões, tanto em público como em privado, em relação aos codecs do <video> e <audio> do HTML5, cheguei à conclusão de que não há nenhum codec que todos os browsers estejam dispostos a implementar. ” (Hickson, 2009)

A rivalidade entre browsers e suas ideologias resultou numa inconsistência de formatos de vídeo e seus codecs, como podemos ver na Tabela 3. (Weston, 2013) Na Tabela 4 podemos ver os formatos que grandes websites, como o Youtube e o Dailymotion, utilizam e suportam.

Tabela 1 – Implementação da tag <vídeo> e suporte inicial dos formatos de vídeo ( Freeman, 2011)

Browser Data de

lançamento

Versão Formatos

OGG MP4 WebM

Safari Março 2008 Safari 3.1

Firefox Junho 2009 Firefox 3.5

Chrome Maio 2009 Chrome 3

Opera Janeiro 2010 Opera 10.50

IE Setembro 2010 IE9 (beta)

Tabela 2 - Suporte dos formatos de vídeo em grandes websites de distribuição de vídeo (Freeman, 2011)

Website Data de anúncio Formatos

OGG MP4 WebM

Wikipedia 2009

Dailymotion Maio 2009

Youtube Janeiro 2010

Vimeo Janeiro 2010

O elemento <video> tem uma tag de início e de fim por duas razões. Por um lado, há subelementos do <video> como o <source> e o <track> e, por outro, a necessidade de um sistema de reserva, caso o browser não suporte o elemento <video>. Tudo o que tiver entre a

20

tag de início e fim do elemento <video> e não estiver dentro de um subelemento fica visível caso o browser não suporte o elemento <video>. (Freeman, 2011) Na Tabela 5 podemos observar com maior detalhe os seus atributos e subelementos.

Tabela 3 - Atributos do <video> e seus subelementos (W3C, 2012; Freeman, 2011)

Elemento Atributo Descrição

<video> autoplay Indica que o vídeo inicia assim que estiver pronto

controls Indica que os controladores, como o botão de play/pause, ficam disponíveis

height Indica a altura do vídeo

loop Indica se o vídeo inicia automaticamente sempre que acaba

muted Indica que o áudio do vídeo está desligado poster Indica uma imagem a ser mostrada enquanto o

vídeo é carregado e o utilizador não carrega no play.

preload Indica se e como o vídeo deve ser carregado quando a página é carregada

src Indica o URL para o ficheiro de vídeo width Indica a largura do vídeo

<source> media Indica para que tipo de dispositivo/ecrã o ficheiro de vídeo está otimizado

src Indica o URL para o ficheiro de vídeo type Indica o MIME type do ficheiro de vídeo <track> default Indica que essa faixa é a defenida por defeito

kind Indica que tipo de informação contém. Por exemplo: legendas

label Indica o título da faixa

src Indica o URL do ficheiro

srclang Indica o idioma da informação

Como não há apenas um codec para todos os browsers, foi preciso criar o elemento <source>. Isto permite integrar os vários ficheiros de vídeo (MP4, OGG, WebM) e o browser é que verifica qual deles pode utilizar. (Freeman, 2011) Neste exemplo é demostrado a estrutura do elemento <video> e seus subelementos.

21 <video>

<source src="exemplo.mp4" type="video/mp4"> <source src="exemplo.ogg" type="video/ogg"> <source src="exemplo.webm" type="video/webm">

<track src="legendas_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="legendas_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> O seu browser não suporta o elemento <video>

</video>

Seguindo o exemplo anterior, o sistema de reserva resultava no seguinte texto: “O seu browser não suporta o elemento <video>”

O elemento <track> permite especificar faixas de texto para o vídeo. Sozinho não representa nada. O atributo “kind” identifica que tipo de informação está na <track>. Se o atributo estiver omisso, o valor por defeito é “subtitles”. (W3C, 2012) Na Tabela 6 podemos ver as várias keywords que podem estar associadas ao atributo “kind”.

Os únicos browsers que já suportam este elemento, são: Internet Explorer 10 e Google Chrome. (Dutton, 2012)

Tabela 4 - Valores para o atributo "kind" do subelemento <track> (W3C, 2012) Keyword Descrição

subtitles _{Transcrição ou tradução de diálogo, adequado para quando o som está} disponível mas não é compreendido (p. exemplo porque o utilizador não entende a língua da faixa de áudio). Sobreposto ao vídeo.

captions _{Transcrição ou tradução de diálogo, efeitos sonoros e outras informações} áudio relevantes, adequado para quando o som não está disponível ou não é claramente audível (por exemplo, modo silêncio, pouco percetível devido a som ambiente, ou devido a deficiências auditivas por parte do utilizador). Sobreposto ao vídeo; classificado como apropriado para pessoas com dificuldades auditivas.

descriptions _{Descrições textuais da componente de vídeo do recurso de média. Destina-se} para a síntese de áudio quando a componente visual está comprometida, não disponível, ou não utilizável (por exemplo porque o utilizador está a interagir

22

com a aplicação sem um ecrã enquanto conduz, ou porque o utilizador é cego). Sintetizado como áudio.

chapters _{Títulos de capítulos, intencionados para serem usados na navegação do} recurso. Exibido como uma lista agrupada interativa na interface do browser.

metadata _{Faixas com intenção de serem usadas por scripts. Não exibido pelo browser.}

Web IDL, a web interface definition language, foi criada para permitir, ao JavaScript, melhor controlo sobre todos os atributos dos elementos HTML. O JavaScript é uma linguagem de programação ECMAScript, usada nos browsers para executar tarefas. Consegue contornar várias limitações do HTML e CSS e melhorar a experiência do utilizador.(Freeman, 2011)

Os atributos IDL do elemento <video> (ver Tabela 7), a maior parte deles só de leitura, refletem o seu estado. Apesar de muitos atributos não serem editáveis, alguns produzem eventos. Na Tabela 8 pode-se ver alguns dos eventos do elemento <video>.

Tabela 5 - Atributos IDL do <video> (Freeman, 2011; W3C, 2012)

Atributo Significado Editável?

Error Representa o último erro do vídeo Não

currentSrc Localização do vídeo Não

networkState Estado da atividade do vídeo Não

readyState Estado do vídeo em relação à sua posição de reprodução Não

currentTime Posição atual do vídeo em segundos Sim

duration Duração do vídeo Não

paused Estado do vídeo ( true = paused ) Não

ended O vídeo chegou ao fim ( true = ended ) Não

volume Valor do volume ( 0 a 1) Sim

muted Estado do áudio ( true = muted ) Sim

videoWidth Largura do vídeo Não

23 Tabela 6 - Eventos do elemento <video> (Freeman, 2011; W3C, 2012)

Evento Significado

progress O browser está a fazer download de informação

suspend O browser parou de fazer download apesar de ainda não ter o recurso completo

error Um erro ocorreu durante o download da informação play Reproduzir o vídeo após ter sido carregado

pause Parar o vídeo

loadeddata O browser pode reproduzir o vídeo

waiting A reprodução parou porque ainda não fez download da informação seguinte

playing A reprodução começou

canplay O vídeo pode ser reproduzido, mas possivelmente deve parar para fazer buffering

canplaythrough O vídeo pode ser reproduzido até ao fim sem paragens timeupdate O currentTime foi mudado

ended A reprodução do vídeo chegou ao fim