Universidade de Trás-os-Montes e alto Douro
Departamento de EngenhariasVídeo interativo na Web
Dissertação de Mestrado em Comunicação e Multimédia
Por:
José Miguel da Silva Rego
Orientador: Prof. Benjamim Fonseca Coorientador: Prof. Hugo Paredes
i
Universidade de Trás-os-Montes e Alto Douro
Departamento de EngenhariasVídeo interativo na Web
Dissertação de Mestrado em Comunicação e Multimédiade
José Miguel da Silva Rego
Dissertação submetida por José Miguel da Silva Rego à Universidade de Trás-os-Montes e Alto Douro para obtenção do grau de Mestre em Comunicação e Multimédia, sob a orientação do Professor Benjamim Fonseca e sob a coorientação do Professor Hugo Paredes.
Este projeto foi suportado por uma Bolsa de Iniciação Científica no âmbito do projeto de I&D Vídeo Interativo de Comunicação (VIC), financiado pela Portugal Telecom Inovação, enquadrado no Plano de Inovação da Portugal Telecom Inovação.
iii
Agradecimentos
A realização desta dissertação marca o fim de uma importante etapa da minha vida e por isso gostaria de agradecer a todos aqueles que contribuíram de forma decisiva para a sua concretização.
À Universidade de Trás-os-Montes e Alto Douro manifesto apreço pela possibilidade de realização do presente trabalho e por todos os meios colocados à disposição. Agradeço igualmente a excelência da formação prestada e conhecimentos transmitidos, que foram úteis para esta dissertação.
Agradeço ao meu orientador, ao Professor Benjamim Fonseca e coorientador, Professor Hugo Paredes, pelo contínuo acompanhamento e ajuda que me deram durante todo o processo de trabalho. Também quero agradecer aos professores Leonel Morgado, Paulo Martins e ao Engenheiro Arnaldo Santos da PT Inovação pela ajuda no desenvolvimento do projeto Vídeo Interativo de Comunicação (VIC).
Gostaria também de agradecer aos meus amigos Nuno Severino, Nuno Ribeiro, Victor Martins, Daniel Coelho, Tiago Rodrigues, Júlia Leite, André Alberto, Martinho Gonçalves, Telmo Adão e Miguel Melo pela ajuda que me deram, tanto a nível de trabalho como a nível pessoal.
Por último, manifesto um sentido e profundo reconhecimento aos meus pais pelo apoio e motivação que me deram ao longo destes anos.
Muito obrigado a todos pelo vosso apoio, paciência, e por me terem ajudado a atingir este objetivo.
v
Resumo
O vídeo é um elemento fundamental da estratégia de comunicação de muitas organizações. Contudo, é frequente a necessidade de produzir diferentes conteúdos direcionados para públicos-alvo distintos, que os consomem de variadas maneiras, consoante o momento e o dispositivo usado para os visualizar. Assim, mostra-se particularmente interessante a possibilidade de disponibilizar meios que permitam que os utilizadores consigam interagir com objetos de um vídeo interativo, de forma a personalizar os conteúdos a que acede, de preferência minimizando as tarefas de configuração.
A forma como os utilizadores acedem à informação e a consomem transformou-se significativamente nos últimos anos, principalmente com a expansão das redes sociais, com maior expressão nos casos do Facebook e do YouTube. Esta evolução tem fomentado o interesse académico por uma maior personalização dos conteúdos, dando maior liberdade para selecionar os conteúdos que melhor se adaptam ao seu perfil, assim como o seu encadeamento temporal. Contudo, não são conhecidos produtos comerciais que o permitam.
Nesta dissertação vamos analisar e desenvolver uma solução para esta crescente necessidade de personalização de conteúdo na Web. Essa solução vai permitir ao utilizador interagir com o vídeo de forma a alterar o fluxo do vídeo ou simplesmente a apresentar informação adicional. Para além de haver uma solução para reproduzir esses vídeos interativos, também é preciso desenvolver uma solução para a criação e edição desse conteúdo.
vii
Abstract
Video is a primary element in the way many organizations communicate. However, sometimes there is a need to differentiate the content to distinctive target audiences that consume them in various ways, depending on the moment and the device used to view them. This way, it’s particularly interesting the possibility to provide ways that allow users to interact with objects from an interactive video, in order to personalize the contents to their needs, preferably minimizing the configuration tasks.
The way users access information and consume it, has changed significantly in the last few years, especially with social networks expanding, being Facebook and YouTube the two biggest contributors. This evolution has created an academic interest for a bigger content personalization, giving more freedom to select contents that better adapt to each user profile as well as its temporal entanglement. However there are no known commercially available products that allow it.
In this master thesis we are going to develop a solution for this growing need of personalized content on the Web. This solution will allow users to interact with video in a way that they can change the video flow or simply present additional information related with the video content. Beyond developing a player for interactive video, we also have to develop a solution to create and edit those kinds of interactive videos.
ix
Índice
Agradecimentos ... iii Resumo ... v Abstract ... vii Índice ... ix Índice de figuras ... xi
Índice de tabelas ... xiii
1. Introdução ... 1 2. Estado da arte ... 5 2.1 Storytelling ... 5 2.1.1 Storytelling digital ... 6 2.2 Vídeo Interativo ... 7 2.2.1 Hypervideo ... 9 2.2.2 HyperCafe ... 11 2.3 Vídeo na Web ... 12
2.3.1 Video in the Web Activity ... 13
2.3.2 Elemento <video> do HTML5 ... 18
2.4 Trabalhos relacionados ... 23
2.4.1 Popcorn ... 24
2.4.2 WebCHM ... 26
3. Modelo do Vídeo Interativo na Web ... 29
3.1 Requisitos funcionais ... 29
3.2 Requisitos não funcionais ... 30
3.3 Requisitos de interface ... 31
3.4 Modelo de produção do vídeo interativo ... 32
3.4.1 Editor de conteúdos de base (1ª fase) ... 34
3.4.2 Editor de interação (2ª fase) ... 35
3.4.3 Configurador (3ª fase) ... 37
3.5 Modelo de dados ... 38
3.6 Estrutura do player de vídeos interativos na web (O1) ... 43
x
3.6.2 Camada de interação ... 47
3.6.3 Camada de informação ... 52
4. Protótipos ... 55
4.1 Opções tecnológicas ... 55
4.2 Protótipo do player de vídeos interativos na Web ... 56
4.2.1 Requisitos técnicos ... 58
4.2.2 Problemas encontrados ... 58
4.3 Protótipo do configurador de vídeos interativos na web ... 58
4.3.1 Requisitos técnicos ... 60
5. Conclusões e trabalhos futuros ... 63
xi
Índice de figuras
Figura 1 - Cenários do HyperCafé (Sawhney et al., 1996) ... 11
Figura 2 - Exemplo de um hypervideo utilizando o Popcorn.js ... 24
Figura 3 - Interface do Popcorn Maker ... 25
Figura 4 - Navegação por texto ou imagem ... 26
Figura 5 - Hotspot sobre a atriz ... 27
Figura 6 - Modelo de produção do vídeo interativo ... 33
Figura 7 - Fase de edição de conteúdos básicos ... 35
Figura 8 - Fase de edição de interação ... 36
Figura 9 - Fase de configuração da interação ... 37
Figura 10 - Estrutura do modelo de dados ... 38
Figura 11 - Interação com o vídeo interativo ... 43
Figura 12 - Camadas do vídeo interativo ... 44
Figura 13 - Esquema de um vídeo interativo ... 45
Figura 14 - Visualização de atributos de vídeo HTML5 ... 46
Figura 15 - Descrição dos dados na tag <keytime> do modelo de dados ... 48
Figura 16 - Keywords do atributo "tipo" da tag <info> do <objecto> ... 49
Figura 17 - Sequência SVG+SMIL no Firefox ... 50
Figura 18 - Transição utilizando CSS3 ... 50
Figura 19 - Animação utilizando CSS3 ... 50
Figura 20 - Uso de animações CSS3 em vários browsers ... 52
Figura 21 - Drag and Drop de uma caixa de informação ... 53
Figura 22 - Início da reprodução do vídeo interativo ... 56
Figura 23 - Reprodução com um hotspot ativo ... 57
Figura 24 - Reprodução de um vídeo adicional, após interação ... 57
Figura 25 - Várias caixas de informação resultantes de interação ... 57
Figura 26 - Configurador - painel de seleção de projetos ... 59
Figura 27 - Configurador - painel de seleção de vídeos ... 59
Figura 28 - Configurador - Configuração de hotspots ... 60
xiii
Índice de tabelas
Tabela 1 - Implementação da tag <video> e suporte inicial dos formatos de vídeo ... 19
Tabela 2 - Suporte dos formatos de vídeo em grandes websites de distribuição de vídeo ... 19
Tabela 3 - Atributos do <video> e seus subelementos ... 20
Tabela 4 - Valores para o atributo "kind" do subelemento <track> ... 21
Tabela 5 - Atributos IDL do <video> ... 22
Tabela 6 - Eventos do elemento <video> ... 23
Tabela 7 - Objetivos ... 29
Tabela 8 - Requisitos funcionais do sistema ... 30
Tabela 9 - Requsitos não funcionais do sistema ... 31
Tabela 10 - Requisitos de interface do sistema ... 32
Tabela 11 - Descrição dos dados na tag <video> do modelo de dados ... 39
Tabela 12 - Descrição dos dados na tag <hotspot> do modelo de dados ... 39
Tabela 13 - Descrição dos dados na tag <objecto> do modelo de dados ... 40
Tabela 14 - Descrição dos dados na tag <animacao> do modelo de dados ... 41
Tabela 15 - Descrição dos dados na tag <keytime> do modelo de dados ... 41
Tabela 16 - Keywords do atributo “tipo” da tag <info> do <objecto> ... 42
Tabela 17 - Formatos de vídeo suportados pelos principais browsers ... 47
Tabela 18 - Suporte básico SVG ... 49
Tabela 19 - Uso de transições CSS3 em vários browsers ... 51
Tabela 20 - Uso de animações CSS3 em vários browsers ... 51
1
1. Introdução
Na idade média as histórias eram contadas oralmente e algumas escritas em manuscritos. Desde o início da impressão de livros em 1400 até 1800, as histórias para crianças eram na maioria usadas para a educação e ensinar a diferença do bem e do mal. Em 1980, novas tecnologias, como o filme, rádio e televisão, ofereceram uma nova forma de contar histórias. Com o desenvolvimento dos computadores a forma de contar histórias tornou-se cada vez mais interessante para as pessoas e importante na comunicação.
O vídeo é um elemento fundamental da estratégia de comunicação de muitas organizações. Contudo, é frequente a necessidade de produzir diferentes conteúdos direcionados para públicos-alvo distintos, que os consomem de variadas maneiras, consoante o momento e o dispositivo usado para os visualizar. Assim, mostra-se particularmente interessante a possibilidade de disponibilizar meios que permitam que os utilizadores consigam interagir com objetos de um vídeo interativo, de forma a personalizar os conteúdos a que se acede, de preferência minimizando as tarefas de configuração.
Para compreender o que é um vídeo interativo é preciso perceber como as pessoas estão habituadas a ver e a interagir com um vídeo. Um vídeo é normalmente visto de uma forma passiva e sequencial, onde a interação do utilizador com este é limitada. A visualização de um vídeo é feita de uma forma linear onde a única maneira de descobrir o que vem depois é seguir a narração do vídeo. Num vídeo interativo, um utilizador deve conseguir navegar por um vídeo de uma forma não linear, podendo procurar ou seguir algo que captou a sua atenção.
Normalmente os vídeos estão inseridos num documento hypermedia, como uma página Web, com uma capacidade de navegação limitada, sendo usado como um elemento de suporte para explicar ou exemplificar a ideia ou conceito descrito. Pois o hypervideo representa o oposto. Um hypervideo é um documento hypermedia baseado no vídeo onde a informação adicional, como textos e imagens, está associada a ele.
Com a partilha do vídeo online e o crescimento dos dispositivos móveis com grandes capacidades, as ideias e possibilidades do hypervideo estão a crescer. Um exemplo é o Youtube que, apesar de não aproveitar todo o potencial das anotações, usa anotações principalmente para apresentar legendas, títulos ou elementos gráficos sobre o vídeo.
2
Novas especificações e grupos de trabalho do W3C, por exemplo o HTML5 e a Video in the Web Activity, estão a trabalhar para resolver as limitações atuais dos recursos multimédia na Web e os tornarem num “cidadão de primeira classe”. Um fruto desse trabalho é o elemento <vídeo> do HTML5 que permite reproduzir vídeos sem a necessidade de tecnologias externas.
Com o emergir do HTML5 e CSS3, nunca antes houve tanta possibilidade de interação e manipulação do vídeo na Web. O intuito desta dissertação é explorar as possibilidades do hypervideo ao desenvolver um vídeo interativo na Web que permita manipular individualmente os objetos multimédia que o compõem, possibilitando a interação com esses objetos para definir diferentes fluxos de reprodução e interação, de forma a proporcionar uma comunicação personalizada. Para tal, foram definidos os seguintes objectivos:
Conceber uma solução tecnológica que permita reproduzir vídeos interativos na Web. Essa solução deve passar por tecnologias que permitam ao utilizador a manipulação dos conteúdos em tempo real, de forma a atingir o grau de personalização pretendido. Essa solução deve ser atingida recorrendo ao mínimo de bibliotecas, como JQuery ou SMIL Timesheets, possíveis.
O segundo objectivo passa por conceber uma solução para produzir e editar os vídeos interativos referidos no primeiro objectivo. Vai permitir a criação desse conteúdo interativo e a sua edição, desde a sua interação à informação externa. Esta dissertação está organizada em quatro capítulos distintos.
O estado da arte é o segundo capítulo e encontra-se dividido em quatro partes, sendo o Stroytelling a primeira. Será abordado o conceito de storytelling e a sua evolução ao longo da história até aos dias de hoje. Sendo nos dias de hoje, o seu uso a nível digital: o Storytelling digital, que podemos considerar como sendo o ato de contar histórias recorrendo a recursos multimédia, como por exemplo fotografias ou vídeo. Na segunda parte iremos analisar o vídeo interativo. O que é e que características é que tornam um simples vídeo num vídeo interativo. Um dos termos mais usados para identificar vídeos interativos é o hypervideo, definido pelo projeto inovador chamado Hypercafe. Vídeo na Web será o tema da terceira parte. Nela iremos saber como começaram a ser implementados e a expansão do vídeo na Web até à atualidade, mencionando em que consiste e o objectivo da “Video in the Web Activity” e a utilização do elemento <video> do HTML5 e os seus respectivos atributos. Já na
3
quarta parte irão ser apresentados e analisados dois projetos com características idênticas a esta dissertação: o Popcorn e o WebCHM.
No terceiro capítulo “Modelo do Vídeo Interativo na Web” são apresentados os requisitos funcionais, não funcionais, de interação, definido o modelo de dados e toda a estrutura do vídeo interativo na Web. Também neste capítulo é proposto um modelo de produção de um vídeo interativo, composto por três fases: editor de conteúdo, editor de interação e configurador. Em seguida são apresentados os testes feitos com várias tecnologias de forma a determinar as mais adequadas para a nossa solução.
O quarto capítulo “Protótipos” descreve os protótipos desenvolvidos de acordo com os objectivos definidos e o modelo proposto no terceiro capítulo. São apresentadas imagens das várias funcionalidades dos protótipos e definidos os requisitos técnicos e problemas encontrados.
No quinto e último capítulo “Conclusões e trabalhos futuros” é feito um ponto de situação do potencial do vídeo interativo na Web e do trabalho desenvolvido nesta dissertação. Também são apresentadas algumas sugestões para um trabalho futuro.
5
2. Estado da arte
2.1 Storytelling
As histórias são contadas desde que nos lembramos, apenas a forma de como são contadas e a sua intenção é que foram mudando. (Gils, 2005) Essas histórias podem vir em diferentes formas e nomes, como por exemplo casos, anedotas, exemplos, historias ou experiências. (Sole, 2002)
Na idade média as histórias eram contadas oralmente e algumas escritas em manuscritos. Há exemplos de manuscritos que ensinavam o alfabeto através de versos, o que mostra o uso do storytelling na educação. Desde o início da impressão de livros em 1400 até 1800, as histórias para crianças eram na maioria usadas para a educação e ensinar a diferença do bem e do mal. Em 1980, novas tecnologias, como o filme, rádio e televisão, ofereceram uma nova forma de contar histórias. A Rua Sésamo foi um programa que educou as crianças com narrativas em vídeo. Com o desenvolvimento dos computadores a forma de contar histórias está a tornar-se cada vez mais interessante. (Gils, 2005)
“Storytelling é uma forma antiga e tradicional de passar informação e ideias complexas através da narrativa”. (Sole, 2002)
Em 1988, o psicólogo Polkinghorme discutiu como as histórias são fundamentais para a experiência humana. Ele disse que a narrativa é a primeira forma pela qual a experiência humana é significativa. (Gils, 2005)
A narrativa é um instrumento privilegiado para o desenvolvimento cognitivo e organização do conhecimento. É uma ferramenta cognitiva poderosa devido ao seu potencial para apoiar o aluno no processo de aprendizagem. (Mangione et al., 2011)
A ciência cognitiva postula a existência de dois tipos de memória: memória semântica, para nos relembrarmos de factos desconexos, e memória episódica, para nos relembrarmos de sequências de eventos. Ao serem representados como narrativas, as histórias podem ficar na memória episódica e estabelecerem-se como entidades coesas. (Kwan-Liu et al., 2012)
“Storytelling é um simples mas poderoso método para explicar matérias complexas”.
6
As pessoas tendem a prestar mais atenção ao que lhes é dito quando a informação é apresentada como uma história interessante ou excitante. Desta forma, os alunos passam de recipientes de informação passivos para alunos cativos que se envolvem diretamente com a informação a adquirir. (Gils, 2005; Mangione et al., 2011)
Deste puro entretenimento à aprendizagem, o storytelling pode ser utilizado de muitas formas. É por isso que o storytelling já envolve várias áreas de pesquisa, como jogos, cinema, literatura, psicologia, ciência cognitiva, inteligência artificial, entre outros. (Gils, 2005; Camanho et al., 2009)
2.1.1 Storytelling digital
O termo storytelling digital, ou digital storytelling, pode ter várias definições. Contar histórias recorrendo a recursos multimédia, como por exemplo fotografias ou vídeo, é uma dessas definições. Outra abordagem baseia-se na ideia que os computadores devem criar histórias com interação humana, também conhecido como storytelling interativo, ou mesmo autonomamente. (Gils, 2005)
Digital storytelling é um negócio em crescimento quando se olha para jogos como o Sims 2 ou o World of Warcraft, onde os utilizadores criam as suas próprias histórias num mundo digital. (Gils, 2005)
Sendo uma mistura de storytelling convencional e interações humanas, o storytelling num ambiente virtual permite aos utilizadores interagirem com o narrador e as personagens em tempo real. Desta forma, são alcançadas histórias dinâmicas e personalizadas. (Yundong et al., 2010)
As abordagens mais conhecidas para a criação de um storytelling interativo são: (Camanho et al., 2009)
character-based – focam-se na modelação das personagens como agentes autónomos. A história surge das interações entre as personagens, que são controladas pelos utilizadores. Nesta abordagem é mais fácil implementar interações com as personagens mas é mais difícil manter uma história coerente.
plot-based – focam-se na estrutura do enredo. Manter a história coerente é fácil mas as oportunidades de interação são limitadas. Esta abordagem é para sistemas que desenvolvem de acordo com a ideia que as histórias têm de seguir um conjunto de regras.
7
Michael Wohlfart e Helwig Hauser descreveram um modelo que consistia em dois tipos de componentes. Por um lado, existem os nós, story nodes, que são momentos específicos da história onde é brevemente interrompida, para uma possível exploração do utilizador, e depois recomeça. Por outro lado, temos as transições, story transitions, que discretamente conecta os nós, fazendo a passagem de um nó para o nó seguinte. (Kwan-Liu et al., 2012)
Um dos principais desafios destas implementações passa pelo balanço de um com nível de interação e da coerência da história. (Kwan-Liu et al., 2012; Camanho et al., 2009)
Wohlfart e Hauser propuseram quatro graus de controlo, entre o autor e o consumidor, sobre a história: (Kwan-Liu et al., 2012)
Storytelling tradicional, onde é proibida a interação do lado do consumidor. O autor tem controlo total;
Storytelling com aprovação interativa - a história para em certos pontos e deixa o consumidor obter controlo temporário. O consumidor pode mudar o modo de visualização, conteúdo, etc. Quando já tiverem satisfeitos com a sua oportunidade de exploração, a história prossegue;
No semi-interativo storytelling os consumidores podem obter controlo sobre uma seção da história;
Finalmente, na separação total da história, os consumidores podem-se separar totalmente da história e interagir livremente.
Em geral, a abordagem correta depende do objetivo da aplicação e do género de história a ser criada e contada. (Camanho et al., 2009)
2.2 Vídeo Interativo
Para compreender o que é um vídeo interativo é preciso perceber como as pessoas estão habituadas a ver e a interagir com um vídeo. Um vídeo é normalmente visto de uma forma passiva e sequencial, onde a interação do utilizador com este é limitada. A visualização de um vídeo é feita de uma forma linear onde a única maneira de descobrir o que vem depois é seguir a narração do vídeo. (Hammoud, 2006; Madjid, 2011)
Num vídeo interativo, um utilizador deve conseguir navegar por um vídeo interativo de uma forma não linear, podendo procurar ou seguir algo que captou a sua atenção. (Hammoud, 2006)
8
Riad I. Hammoud sugere três possibilidades para tornar um vídeo num vídeo interativo, sendo este mais fácil e eficiente para o utilizador: (Hammoud, 2006)
Fornecer um resumo visual do vídeo antes do utilizador fazer download ou o visualizar. Os utilizadores podiam selecionar o vídeo baseando-se em apenas alguns snapshots.
Apresentar entradas visuais, como key-frames, hotspots, eventos, que serviam como pontos de acesso para conteúdo do vídeo. A pessoa podia navegar pelo vídeo sem precisar de o ver do início ao fim.
Expor uma lista de opções de navegação que permitam ao utilizador ir atrás de conteúdo relacionado, no mesmo vídeo ( links internos) ou em outros documentos (links externos), como por exemplo páginas Web.
Segundo Madjid Sadallah et al. vídeo interativo é uma forma incomum e aumentada de vídeo digital que aceita e responde a interações não convencionais do utilizador. (Madjid, 2011)
Riad I. Hammound não faz uma simples definição de vídeo interativo, pois considera haver mais que um conceito. Se as ligações criadas são entre conteúdo do vídeo ( links internos) então é chamado de vídeo interativo bruto, mas para simplificar é chamado apenas de vídeo interativo. Se as ligações criadas são com conteúdo externo (links externos), como imagens e texto, então é uma apresentação de vídeo interativo. (Hammoud, 2006)
Segundo ele, vídeo interativo é uma forma digitalmente enriquecida de um vídeo básico, fornecendo aos utilizadores formas de interação atraentes e poderosas e possibilidades de navegação. Apresentação de vídeo interativo é uma forma de vídeo interativo que está centrada em vídeo enriquecido mas não é exclusivamente vídeo. (Hammoud, 2006)
O objetivo de uma apresentação de vídeo interativo é de maximizar a atenção dos utilizadores e a probabilidade destes capturarem a informação chave do vídeo. A informação adicional podem ser de vários tipos como, HTML, tabelas, música, imagens. Este tipo de vídeo interativo também é conhecido por hyperfilm, hypervideo ou hypermedia. (Hammoud, 2006)
Hypervideo é um tipo de documento hypermedia que traz capacidades poderosas, como interatividade avançada, a documentos baseados em vídeo. (Madjid, 2011)
9
Quando se vê um vídeo, o ritmo de assimilação de informação é definido pela máquina que faz a ilusão de imagens em movimento e que fornece oportunidades, de alguns segundos, para se seguir outra narrativa, ao contrário do texto, onde o leitor define o seu ritmo de assimilação de informação. Por isto, a interface de um vídeo interativo deve ter em atenção a sincronização do conteúdo apresentado e as modalidades da interação. O objetivo é tornar a visualização e interação do utilizador intuitiva e eficaz. (Hammoud, 2006)
A questão da sincronização surge quando se associa os links à informação ou destino relacionado. Tem de ser o editor do vídeo interativo a definir como o conteúdo vai ser apresentado aos utilizadores. Vai ter de decidir quando o vídeo original tem de pausar até o vídeo escolhido ter acabado, ou se vão ser reproduzidos ao mesmo tempo, ou se o vídeo original volta ao início. A forma e o fluxo de um vídeo interativo dependem do processo de sincronização. (Hammoud, 2006; Madjid, 2011)
“Com estas possibilidades todas e o facto de poder haver vários caminhos num vídeo interativo, é importante que a narrativa e toda a apresentação se mantenha coerente”. (Hammoud, 2006)
É preciso ter cuidado com a interface apresentada, que deve ser eficiente na apresentação do conteúdo e do vídeo. O utilizador precisa estar ciente dos links que vão surgindo. Podem ser utilizadas várias técnicas: criar uma forma envolvendo uma personagem, alterar as propriedades das cores para enfatizar uma região específica, alterar a forma do cursor ou alterar o volume. Cada tipo de chamada de atenção pode representar diferentes tipos de informação associados. (Hammoud, 2006)
2.2.1 Hypervideo
Hypermedia é um termo que pouca gente conhece mas que quase todos usam sobre a forma de World Wide Web. Ted Nelson foi a primeira pessoa a descrever os conceitos de hypertext, hypermedia e hyperfilm. Descreveu hypermedia como sendo um corpo escrito ou material ilustrado interligado de um forma tão complexa que não era possível ser representado em papel. Hyperfilm foi descrito como sendo um filme pesquisável e multi sequenciado. (Weston, 2013)
10
Em 1996, Sawhney et al. trabalharam num dos primeiros projetos de hypermedia centrados no vídeo, HyperCafe, onde se discutiu o conceito hypervideo. (Weston, 2013) (Madjid, 2011)
Normalmente os vídeos estão inseridos num documento hypermedia, com uma capacidade de navegação limitada, como suporte para explicar ou exemplificar a ideia ou conceito descrito. Pois o hypervideo representa o oposto.(Madjid, 2011)
“Nós definimos hypervideo como sendo um documento hypermedia baseado em vídeo interativo. Vários tipos de informação são apresentados no documento de forma sincronizada para aumentar o recurso audiovisual no qual a apresentação é centrada”. (Madjid, 2011)
Tecnologias como SMIL, NCL e Flash foram das linguagens e ferramentas mais usadas para o desenvolvimento de aplicações de hypervideo, como o Hyper-Hitchcock, Advene, HyLive, HVet e SIVA Suite. (Madjid, 2011)
Com a partilha do vídeo online e o crescimento dos dispositivos móveis com grandes capacidades, as ideias e possibilidades do hypervideo estão a crescer. Alguns fornecedores de hypervideo focam-se mais no marketing, onde os seus vídeos contêm links para publicidade ou sites de e-commerce ou fornecem mais informação sobre um produto em particular. Mas o hypervideo pode ser usado para outros fins: entretenimento, documentários e televisão interativa. (Madjid, 2011)
A forma tradicional do vídeo é inadequada para formas tradicionais de indexação, pesquisa e recuperação ou obtenção de informação. Para além disso os documentos multimédia levantam muitas preocupações em relação a apresentação de informação, ligações e navegação. (Madjid, 2011)
Ao criar um modelo de anotações, criando uma camada de informação por cima do vídeo, podem usar-se essas anotações para gerir e manipular vídeos na indexação, pesquisar e apresentar informação. Essas anotações são pedaços de informação associadas com partes, especificadas por um tempo de início e de fim, do vídeo. (Madjid, 2011) Ao separar a informação adicional e o vídeo, a manutenção e edição do hypervideo é fácil. (Weston, 2013; Madjid, 2011)
11
Um exemplo é o Youtube que, apesar de não aproveitar todo o potencial das anotações, que usa anotações principalmente para apresentar legendas, títulos ou elementos gráficos sobre o vídeo. (Madjid, 2011)
2.2.2 HyperCafe
Hypercafé foi um dos primeiros programas a experimentar ligações entre vídeos. A partir deste projeto , Sawhney et al. propuseram o termo hypervideo e um conjunto de componentes chave para definir sistemas de hypervideo. (Weston, 2013)
Figura 1 - Cenários do HyperCafé (Sawhney et al., 1996)
Ao abrir a aplicação do HyperCafe, o utilizador é deparado com um cenário de um café, cheio de mesas com pessoas a falar. A história é gerada dinamicamente consoante as interações do utilizador. Essas interações ocorrem através de várias ligações que aparecem em pontos específicos durante o vídeo. O utilizador, ao carregar sobre uma mesa, o programa faz zoom sobre essa mesa e o utilizador consegue ouvir a conversa entre as pessoas. O utilizador pode optar por continuar a navegar pelas mesas do café ou continuar a ouvir a conversa. Em momento algum o utilizador pode parar ou voltar ao início de um vídeo, assim é simulada
12
uma visita real ao café onde o tempo não para. Se o utilizador não interagir tem o mesmo efeito dinâmico no vídeo como se interagir. (Sawhney et al., 1996)
“Mesmo ao não interagir, o utilizador está a fazer escolhas”. (Sawhney et al., 1996) Essas ligações baseadas no tempo, espaço e texto interpretativo foram um novo conceito. Permitiu criar ligações dinâmicas ao contrário das ligações estáticas usadas em sistemas anteriores. (Weston, 2013)
Sawhney et al. viram o potencial do hypervideo. Eles previram que quando a tecnologia e os recursos ficassem disponíveis, a colaboração online e os sistemas de narrativa hypervideo seriam possíveis. (Sawhney et al., 1996; Weston, 2013)
2.3 Vídeo na Web
No passado era necessário recorrer a tecnologia externa, através da tag <object> ou <embed> do HTML, para se transmitir e visualizar vídeo numa página Web. Esses plug-ins, como o Real Media, QuickTime e Windows Media, não ofereciam grande capacidade de manipulação do vídeo ou a sua integração na página Web. (Daoust et al., 2010; Freeman, 2011; Weston, 2013; Xing et al., 2012)
Em 1998, foi proposta uma solução chamada HTML+Time, pela Microsoft, mas sem grande êxito. Foi implementada no IE5, IE 5.5 e IE6, mas os restantes browsers não a suportaram. SMIL, Synchronized Multimedia Integration Language, foi uma especificação idêntica ao HTML+Time que está a ser desenvolvida desde 1997 para permitir apresentações interativas de recursos multimédia, mas que nunca foi completamente suportada pelos browsers.(Freeman, 2011)
No lançamento do Flash Player 6, em 2002, a Macromedia introduziu suporte para vídeo no seu plug-in. Mas só em 2005, com o Flash Player 8 e os seus notórios avanços tecnológicos, é que conseguiu ser o maior plug-in de recursos multimédia. Foi a solução para se publicar vídeos na web sem se ter de codificar para três formatos diferentes. Só depois do Google vídeos e o Youtube serem lançados, em Janeiro e Maio de 2005, utilizando o Macromedia Flash é que a Macromedia foi comprada pela Adobe. (Freeman, 2011)
13
Todos estes esforços, experiências e as limitações que a Apple impôs sobre a tecnologia Flash para os iPhones e iPads (Xing et al., 2012) levaram à primeira proposta do elemento <video> no HTML5. As pessoas aperceberam-se que se o vídeo não fosse um elemento totalmente integrado com a página Web, a nível de DOM, CSS e JavaScript, nunca se iria ter progresso para além do que os plug-ins ofereceram até ao momento. (Freeman, 2011; Daoust et al., 2010)
“Esta foi a primeira vez que todas as partes interessadas, particularmente os web browsers, realmente se comprometeram a implementar o suporte aos recursos multimédia”.(Freeman, 2011)
Novas especificações e grupos de trabalho do W3C, por exemplo o HTML5 e a Video in the Web Activity, estão a trabalhar para resolver as limitações atuais dos recursos multimédia na Web e os tornarem num “cidadão de primeira classe”. (Hégaret, 2013; Lancker et al., 2011; Soohong et al., 2010)
2.3.1 Video in the Web Activity
A Video in the Web Activity, grupo de trabalho da W3C, tem como objetivo tornar os recursos multimédia num “cidadão de primeira classe” na Web. Para tal, é importante criar uma arquitetura que permita aos utilizadores criar, identificar, navegar, procurar, interligar, consumir e distribuir esses recursos multimédia. Desta forma o vídeo fará parte da Web em vez de ser apenas uma extensão da qual não tira total proveito. (Hégaret, 2013)
Os principais beneficiários serão: indivíduos ou organizações que pretendem colocar o seu vídeo na Web e que este faça parte da informação interligada da Web, tal como o texto e imagens. Produtores de vídeo que pretendem fornecer a melhor experiência possível ao utilizador e que o seu trabalho possa ser encontrado na Web. Utilizadores que querem ver e interagir com o vídeo. Agregadores de conteúdo, como por exemplo jornais e blogs, trabalham com vídeo na Web e que necessitam de um fácil acesso à sua informação. (Hégaret, 2013)
Media Annotations, Media Fragments e Timed Text são os grupos de trabalhos que fazem parte da Video in the Web Activity. (Hégaret, 2013) O Media Annotations Working Group tem como objetivo criar uma ontologia e uma API para facilitar a integração e leitura
14
de informação relacionada com recursos multimédia (vídeo, áudio, imagens) na Web. (Lancker et al., 2011; Park et al., 2013)
Ontology for Media Resources 1.0 é a recomendação do W3C, onde definem o vocabulário essencial e o mapeamento de formatos de meta dados atualmente utilizados para descrever recursos multimédia na Web. (Lee et al., 2012)
O vocabulário essencial é um conjunto de propriedades descritivas dos recursos multimédia consideradas essenciais. Essas propriedades (ver Tabela 1) foram selecionadas tendo em conta as propriedades dos formatos de meta dados (ver Tabela 2) mais utilizados atualmente para descrever recursos multimédia.(Lee et al., 2012)
O objetivo do mapeamento é fornecer interoperabilidade dos meta dados, permitindo a partilha e reutilização dos mesmos meta dados entre várias aplicações. Na realidade, esse objetivo não é fácil de ser alcançado devido às diferenças semânticas dos termos dos vários formatos. Por exemplo, a propriedade dc:creator do Dubling Core e a propriedade exif:Artist definida no Exchangeable Image File Format, estão as duas associadas à propriedade creator, da Ontologia. (Lee et al., 2012)
Há quatro níveis de mapeamento semântico, sendo estes unidirecionais devido à semântica dos elementos a serem mapeados serem diferentes do resto dos formatos: (Lee et al., 2012)
Exato: a semântica das duas propriedades é equivalente em todos os contextos possíveis;
Mais específico: a propriedade do vocabulário em consideração é mais específica que a propriedade definida;
Mais geral: a propriedade do vocabulário em consideração é mais abrangente que a propriedade definida;
Relacionada: as duas propriedades estão relacionadas de uma forma que é relevante para alguns casos, mas essa relação não está diretamente associada à semântica.
A ontologia é acompanhada de uma API, API for Media Resources 1.0, que fornece um acesso único aos seus elementos. (Lee et al., 2012) A API for Media Resources 1.0 é um working draft do W3C onde definem uma API para aceder, de forma síncrona e assíncrona,
15
aos meta dados relacionados com os recursos multimédia na Web. Esses meta dados estão definidos de acordo com a Ontology for Media Resources 1.0. (McCormack, 2012)
Esta API é descrita usando Web IDL, interface definition language, que é usado para descrever interfaces, normalmente recorrendo a ECMAScript, implementadas em Web browsers. (McCormack, 2012)
Foram considerados dois cenários, sendo os mais importantes para o desenvolvimento e uso da API. O cenário da API deve ser implementada e chamada no User Agent (Web browser), ou de um utilizador aceder a um serviço Web. (Florian et al., 2013)
No primeiro cenário, esta API é implementada no Web browser (User Agent) como um plug-in ou uma biblioteca Javascript. No segundo caso, a API está englobada numa aplicação Web. Em ambos os cenários, a API serve de mediador entre a aplicação e os meta dados. A interoperabilidade é assegurada ao definir as operações para aceder aos meta dados, um objeto com uma estrutura comum e comportamentos da API. (Florian et al., 2013)
O Media Fragments Working Group tem como missão especificar fragmentos multimédia, temporalmente e espacialmente, na Web utilizando URI, Uniform Resource Identifiers. (Mannens et al., 2012)
A especificação Media Fragments 1.0 estabelece a sintaxe para construir media fragment URIs e explica como trabalhar com eles, quando usados sobre o protocolo HTTP. Um URI é um conjunto de caracteres usados para identificar algo, neste caso, identificar um fragmento de um recurso multimédia. Esses fragmentos são considerados em três dimensões: temporal, espacial e faixa. (Troncy et al., 2012)
O objetivo desta especificação é aumentar o suporte das infraestruturas Web para o endereçamento e uso de subpartes de vídeos ou áudios. Com isto, é proposto uma especificação para todos os tipos de recursos multimédia (áudio, imagem, vídeo), onde se define os requisitos para criar esses fragmentos URI.(Troncy et al., 2012)
A interpretação dos URI está do lado do servidor ou do browser por isso é recomendado usar o modelo nome-valor (exemplo: idade=23) na criação de media fragments URI. (Troncy et al., 2012)
16 http://www.exemplo.pt/video.ogv#t=30,90
Neste exemplo é identificado o recurso, “http//www.exemplo.pt/video.ogv”, e o intervalo de tempo pretendido desse recurso, “#t=30,90”, que corresponde dos 30 segundos aos 90 segundos.
Exemplo de um fragmento URI em relação ao espaço: http://www.exemplo.pt/video.ogv#xywh=160,120,320,240
Neste exemplo é identificado o recurso, “http//www.exemplo.pt/video.ogv”, e a área pretendida desse recurso, “# xywh=160,120,320,240”, que resulta numa área de 320 (largura) por 240 (altura) com o canto superior esquerdo em x=160 e y=120.
A missão do Timed Text Working Group é criar uma especificação de legendas, Timed Text Marked Languade, para recursos multimédia online. (Michel, 2013)
A especificação Timed Text Markup Language (TTML) descreve o vocabulário e semântica para se legendar recursos multimédia. Uma legenda é informação textual que é associada temporalmente com um recurso baseado no tempo, como um vídeo. (Dolan et al., 2013)
Um documento TTML consiste num elemento “tt” que contém um cabeçalho e um corpo. O cabeçalho especifica os meta dados do documento e características de apresentação. O corpo especifica o conteúdo textual com referencia a características de apresentação e a informação temporal. (Dolan et al., 2013)
Exemplo de um documento TTML: <tt xml:lang="" xmlns="http://www.w3.org/ns/ttml"> <head> <metadata/> <styling/> <layout/> </head> <body/> </tt>
17
O cabeçalho, <header>, é representado por três elementos: <metadata>, <styling> e <layout>. No <metadata> pode estar descrito informação como o título, descrição, direitos de autor do recurso multimédia. (Dolan et al., 2013)
Exemplo do <metadata>:
<metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata"> <ttm:title>Timed Text TTML Example</ttm:title>
<ttm:copyright>The Authors (c) 2006</ttm:copyright> </metadata>
No <styling> podem ser criados vários estilos, onde se definem as características da legenda, como a cor, tamanho, fonte e alinhamento. Neste exemplo, são criados quatro estilos, sendo as características do primeiro usadas por defeito. (Dolan et al., 2013)
Exemplo do <styling>: <styling xmlns:tts="http://www.w3.org/ns/ttml#styling"> <style xml:id="s1" tts:color="white" tts:fontFamily="proportionalSansSerif" tts:fontSize="22px" tts:textAlign="center" />
<style xml:id="s2" style="s1" tts:color="yellow"/>
<style xml:id="s1Right" style="s1" tts:textAlign="end" /> <style xml:id="s2Left" style="s2" tts:textAlign="start" /> </styling>
No <layout> define-se uma ou mais regiões onde as legendas poderão aparecer. Uma região define uma área, posicionamento, cor de fundo e pode estar interligada com um estilo.(Dolan et al., 2013) Exemplo do <layout>: <layout xmlns:tts="http://www.w3.org/ns/ttml#styling"> <region xml:id="subtitleArea" style="s1" tts:extent="560px 62px" tts:padding="5px 3px" tts:backgroundColor="black" tts:displayAlign="after" /> </layout>
As legendas em si estão descritas no <body> do documento TTML. Cada parágrafo tem um estilo e tempo de início e fim.(Dolan et al., 2013)
18 Exemplo do <body>:
<body region="subtitleArea"> <div>
<p xml:id="subtitle1" begin="0.76s" end="3.45s"> It seems a paradox, does it not,
</p>
<p xml:id="subtitle2" begin="5.0s" end="10.0s" style="s1Right"> that the image formed on<br/>
the Retina should be inverted? </p>
<p xml:id="subtitle3" begin="10.0s" end="16.0s" style="s2"> It is puzzling, why is it<br/>
we do not see things upside-down? </p>
</div> </body>
2.3.2 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
2.4 Trabalhos relacionados
Com a pesquisa do estado da arte de vídeos interativos na web, foram encontrados vários projetos com características semelhantes ao trabalho pretendido nesta dissertação. O Popcorn e o WebCHM foram os projetos considerados mais avançados na sua implementação e características.
Ambos os projetos baseiam-se na apresentação de informação externa e áreas de destaque estáticas sincronizadas com o elemento de vídeo. Mesmo só tendo algumas características idênticas ao trabalho pretendido nesta dissertação e este ser bastante mais complexo, fizemos uma análise aos projetos.
24
2.4.1 Popcorn
Popcorn é um projeto open-source da Mozilla para que o vídeo funcione mais como o resto da Web. Baseia-se no Popcorn.js, uma biblioteca JavaScript que sincroniza o recurso multimédia com o conteúdo ou serviço na web, e no Butter.js num SDK para criar e editar projetos Popcorn. (Weston, 2013; Gaylor, 2012a) Na Figura 2 podemos ver um vídeo sincronizado com informação do Google Maps, apresentada ao lado direito do vídeo.
Figura 2 - Exemplo de um hypervideo utilizando o Popcorn.js
“Fazemos software open-source para programadores e contadores de histórias aproveitarem as possibilidades do vídeo com o HTML5”. (Gaylor, 2012a)
O seu propósito original era produzir um storytelling visual baseado em vídeo, e incorporar dados em direto como o tempo ou notícias. Com o crescimento do projeto, ele evoluiu para algo muito maior e excitante. (Weston, 2013)
“Esta é a funcionalidade do Hypercafe mas na World Wide Web e, portanto, tem a capacidade de evoluir com a colaboração dos utilizadores”. (Weston, 2013)
O Popcorn.js v0.1 foi lançado no Mozilla Summit em Julho de 2010 e, depois de várias iterações, o Popcorn v1.0 foi lançado em Novembro de 2011. Estas versões eram
25
vocacionadas a programadores, pois só quem percebesse as linguagens envolvidas é que o podia testar, desenvolver e utilizar. Os programadores foram encorajados a editar e a criar plug-ins para melhorar e expandir o projeto. Neste momento já possui mais de 25 plug-ins para integrar por exemplo o Facebook, Google Maps, Wikipedia e Twitter. (Weston, 2013; Gaylor, 2012b)
Figura 3 - Interface do Popcorn Maker
O Butter.js, mais conhecido por Popcorn Maker, foi lançado em Novembro de 2012. O Popcorn Maker foi o interface gráfico, que podemos ver na Figura 3, que os utilizadores sem conhecimentos em programação, como a maioria dos utilizadores da internet, estavam à espera. Oferecia as ferramentas e recursos do Popcorn.js num ambiente gráfico acessível e idêntico aos softwares de edição de vídeo. Com um simples arrastar e largar o utilizador podia adicionar conteúdo à linha de tempo do vídeo. (Weston, 2013)
“O mais perto que um utilizador comum vai chegar a este tipo de hypermedia é por ferramentas como o Popcorn Maker. Esta ferramenta abriu possibilidades para toda a comunidade de utilizadores da internet”. (Weston, 2013)
26
2.4.2 WebCHM
O CHM, Component-based Hypervideo Model, é um subprojecto do Advene Project, que inclui informação relacionada com fragmentos do vídeo. Advene é um modelo de dados, que lida com as questões de categorização. O Advene propõe uma solução para a indexação de vídeo e afirma haver a necessidade de separar os dados audiovisuais dos meta dados. Ao separar as anotações do conteúdo audiovisual facilita a manutenção e criação de hypervideos. (Weston, 2013; Madjid, 2011; N/a, 2012)
O projeto CHM tem dois objetivos: (Madjid, 2011)
Desenvolver um modelo formal para documentos de hypervideo;
Fornecer um framework que permita o desenvolvimento de hypervideos orientados para a web.
CHM aborda ligações, no tempo e espaço, ao incluir informação sobre o tempo de início e fim das anotações e a sua localização em relação ao conteúdo audiovisual. Os atributos das anotações incluem tipo de anotação, conteúdo audiovisual ao qual está associado, tempos de início e fim e o seu conteúdo. Ele depende das anotações para criar hypervideos e enriquecê-los com interações e com artefactos visuais ( como hotspots, links, overlays, legendas, comentários e tabelas de conteúdo). (Madjid, 2011; Weston, 2013) Na Figura 4 temos um exemplo de uma navegação no tempo vídeo através de texto ou imagens. Cada texto ou imagem representa um momento importante do vídeo.
27
A âncora de um hypertext é definida numa região específica, como um texto ou elemento gráfico. Quando colocada num elemento audiovisual com restrições espaciais e temporais, na qual a região pode alternar ao longo do tempo, a âncora é chamada de hotspot. (Madjid, 2011) Na Figura 5 podemos reparar numa área destacada com uma cor mais clara sobre a atriz, que representa um hotspot com ligação a informação da Wikipedia.
Figura 5 - Hotspot sobre a atriz
Tal como no Hypercafé, são definidos dois tipos de links: internos e externos. Os links internos estão relacionados com o conteúdo audiovisual, por exemplo: navegar pela linha do tempo ou para parar o vídeo ( Figura 4). Os links externos estão associados a conteúdo externo ao recurso audiovisual (Figura 5). (Madjid, 2011)
WebCHM, tal como sugere o nome, é o modelo CHM aplicado na Web. Recorre à sintaxe do HTML para apresentar as anotações, ao elemento <video> do HTML5 para visualizar o vídeo e ao JavaScript para lidar com os eventos automáticos e interação do utilizador. (Madjid, 2011; Weston, 2013)
Ao contrário do Popcorn.js, que sincroniza as anotações com o tempo do recurso audiovisual, o WebCHM recorre modelo temporal implementado pelo SMIL Timesheets. Desta forma o hypervideo pode utilizar várias referências temporais. (Madjid, 2011; Weston, 2013)
28
Como ainda está na fase inicial e de testes, ainda não possui um interface gráfico acessível a utilizadores sem conhecimentos de programação. (Weston, 2013)
29
3.
Modelo do Vídeo Interativo na Web
Tal como já foi referido na introdução da dissertação, o intuito desta dissertação é o desenvolvimento de um vídeo interativo na Web que permita manipular individualmente os objetos multimédia que o compõem, possibilitando a interação com esses objetos para definir diferentes fluxos de reprodução e interação, de forma a proporcionar uma comunicação personalizada. Para tal, foram definidos os objetivos apresentados na Tabela 9.
Tabela 7 - Objetivos
ID Objetivo
O1 Conceber uma solução tecnológica que permita reproduzir vídeos interativos na Web (player)
O2 Conceber uma solução para produzir e editar vídeos interativos na Web ( configurador)
A solução do O1 deve passar por tecnologias que permitam ao utilizador a manipulação dos conteúdos em tempo real, de forma a atingir o grau de personalização pretendido. Essa solução deve ser atingida recorrendo ao mínimo de bibliotecas, como JQuery ou SMIL Timesheets, possíveis. Tão importante como o O1 é o O2 que vai permitir a criação desse conteúdo interativo e a sua edição, desde a sua interação à informação externa.
Os conteúdos interativos que são pretendidos com este projeto dizem respeito à comunicação entre gestores de produto e clientes. Para tal, existirão três tipos de conteúdos:
Apresentação comercial do gestor de produto ao cliente, apresentando as características funcionais do produto;
Apresentação técnica, onde são descritas as características técnicas do produto (datasheet de produto);
Vídeo de demonstração passo a passo (wizard step-by-step).
3.1 Requisitos funcionais
Em função dos objetivos do projeto e das características dos conteúdos pretendidos, foram identificados os requisitos funcionais apresentados na Tabela 10.
30 Tabela 8 - Requisitos funcionais do sistema
ID Requisito
F01 Alterar fluxo de apresentação do vídeo (sub-fluxos de reprodução) por interação com o mesmo ao clicar em zonas predefinidas (hotspots)
F02 Controlar apresentação do vídeo atual através de controlos VCR (play, pause, FF, etc) F03 Permitir o regresso ao ponto onde foi alterado o fluxo de reprodução, após conclusão
do sub-fluxo, permitindo continuação do fluxo principal F04 Permitir a exibição de meta dados, por interação com hotspots F05 Permitir o seguimento de hiperligação por interação com hotspots
F06 Dispor de ferramenta de edição de alto nível (editor de interação e informação – configurador)
F07 Permitir reposicionar vídeos e janelas de meta dados
O F01 é dos requisitos mais importantes deste projeto, pois é este que o torna mais complexo e atrativo. É preciso haver a possibilidade de criar sub-fluxos de reprodução, personalizando a visualização e navegação no vídeo interativo. O F02 é um requisito tradicional quando se trata de manipulação de elementos multimédia. O F03 serve para quando um sub-fluxo acaba, regressa ao fluxo anterior, no ponto onde foi deixado. Este fluxo anterior também pode ser um sub-fluxo, podendo haver vários níveis de sub-fluxos. O F04 e o F05 são requisitos já encontrados nos projetos encontrados no estado da arte. Quando se clica sobre um hotspot, é apresentada informação externa ao vídeo ou é feita uma hiperligação, abrindo um separador novo no browser. O F06 é um configurador do vídeo interativo que permita ao gestor de produto selecionar as funcionalidades interativas a ativar para cada situação e editar a informação a apresentar. O F07 está relacionado com o F04, pois serve para reposicionar as caixas de informação externa criadas pelo F04.
3.2 Requisitos não funcionais
Em função dos objetivos do projeto e das características dos conteúdos pretendidos, foram identificados os requisitos não funcionais apresentados na Tabela 11.
