Um player de vídeo para coleta de dados de interação e apoio à tomada de decisão

Discente: Júlio César Ferreira Silva de Holanda / Orientador: Ranilson Oscar Araújo Paiva

TCC - JÚLIO CÉSAR - CC.pdf
Documento PDF (1.4MB)

Exibir conteúdo Baixar

UNIVERSIDADE FEDERAL DE ALAGOAS-UFAL
CAMPUS A.C. SIMÕES
CIÊNCIA DA COMPUTAÇÃO

JÚLIO CÉSAR FERREIRA SILVA DE HOLANDA

UM PLAYER DE VÍDEO PARA COLETA DE DADOS DE INTERAÇÃO E APOIO À
TOMADA DE DECISÃO

MACEIÓ
2019

Júlio César Ferreira Silva de Holanda

Um player de vídeo para coleta de dados de interação e apoio à tomada de decisão
Monografia apresentada como requisito parcial
para obtenção do grau de Bacharel em Ciência da
Computação da Universidade Federal de Alagoas UFAL, Campus A.C. Simões.
Orientador: Prof. Dr. Ranilson Oscar Araújo
Paiva

Maceió
2019

Júlio César Ferreira Silva de Holanda

Data de Aprovação: 21/05/2019

Banca Examinadora

Prof. Dr. Ranilson Oscar Araújo Paiva
Universidade Federal de Alagoas
Campus A.C. Simões
Orientador

Prof. Dr. Alan Pedro da Silva
Universidade Federal de Alagoas
Campus A.C. Simões
Examinador

Prof. Dr. Ivo Augusto Andrade Rocha Calado
Instituto Federal de Alagoas
Campus Maceió
Examinador

Dedico este trabalho a todos os que vieram antes
de mim e a todos os que virão, e que possuem
em seus corações a vontade de fazer a diferença.

AGRADECIMENTOS
Agradeço primeiramente a Deus, por me conceder a vida que me levou a este momento.
Agradeço ao meu orientador Prof. Ranilson Paiva, por sua orientação e paciência ao longo destes
anos. Agradeço aos meus amigos mais próximos, que sempre dividiram seus bons momentos
comigo e aliviaram diversos momentos ruins. Agradeço ao meu amigo Anthony Jatobá, por
ter sido um grande companheiro enquanto compartilhávamos esta jornada. Agradeço aos meus
irmãos, Júlia e José Antônio Filho, que sempre me recepicionaram de forma acolhedora todas as
vezes que voltei pra casa nos fins de semana. E por fim, mas nem um pouco menos importante,
agradeço aos meus pais, Lucineide e José Antônio, por sempre me apoiarem em minhas decisões,
mesmo as mais arriscadas, e colocarem um pouco de juízo em meus pensamentos, muito
obrigado!

Senhores, show me the money!
Ranilson Paiva

RESUMO
Videoaulas em plataformas de e-learning tem se mostrado um tipo de recurso educacional de
extrema importância e utilidade, ao permitir que o professor possa oferecer conteúdo didático com
características de uma sala de aula tradicional, mas com vantagens de um ambiente online. No
entanto, analisar as interações dos alunos durante as videoaulas pode ser um trabalho complexo
para o professor, ainda mais quando se envolvem as possíveis decisões que poderiam ser tomadas
baseadas em dados destes comportamentos. É sugerida então uma abordagem para a coleta de
dados de interações executadas por um aluno em um player de vídeo voltado à educação que
permite a inserção de conteúdo interativo no vídeo (questões, anotações e marcações de seção)
e apresenta uma dashboard com visualização dos dados coletados, com o intuito de apoiar a
tomada de decisão. Um experimento foi executado para avaliar a coleta dos dados e observar a
reação dos usuários sobre as funcionalidades apresentadas, que em geral foram bem recebidas,
salvo algumas exceções.
Palavras-chave: Vídeo. Player de vídeo. Vídeo interativo. Aprendizagem baseada em vídeo.
Interação. Tomada de decisão.

ABSTRACT
Video lessons on e-learning platforms have proved to be a type of educational resource of extreme
importance and utility, allowing the teacher to offer didactic content with characteristics of a
traditional classroom, but with the advantages of an online environment. However, analyzing
students interactions during video lessons can be a complex job for the teacher, especially when
engaging the possible decisions that could be made based on data from these behaviors. An
approach is then suggested for data collection of interactions performed by a student in an
education-oriented video player that allows the insertion of interactive content in the video
(questions, annotations and section markings) and presents a dashboard with data visualization
collected, in order to support decision-making. An experiment was performed to evaluate the
data collection and observe the reaction of the users about the presented functionalities, which
were generally well received, with some exceptions.
Keywords: Video. Video player. Interactive video. Video-based learning. Interaction. Decisionmaking.

LISTA DE FIGURAS
Figura 1 – Arquitetura do sistema proposto . . . . . . . . . . . . . . . . . . . . . . . .
Figura 2 – Player HTML5 nativo (esquerda) e player com visual do Plyr (direita) . . .
Figura 3 – Módulo do player de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . .
Figura 4 – Preenchendo os campos durante o cadastro de uma questão . . . . . . . . .
Figura 5 – Questão cadastrada na figura 4 sendo renderizada na interface do player . .
Figura 6 – Módulo do editor de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . .
Figura 7 – Módulo do dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Figura 8 – Gráfico de interações através do tempo do vídeo . . . . . . . . . . . . . . .
Figura 9 – Uma questão renderizada pelo player de vídeo . . . . . . . . . . . . . . . .
Figura 10 – Mensagem exibida após responder uma questão corretamente . . . . . . . .
Figura 11 – Anotação sendo exibida em um trecho do vídeo . . . . . . . . . . . . . . .
Figura 12 – Lista de marcações de seção de um vídeo . . . . . . . . . . . . . . . . . . .
Figura 13 – Player proposto por (KLEFTODIMOS; EVANGELIDIS, 2016b) (esquerda)
e player proposto neste trabalho, ambos renderizando uma questão. . . . . .
Figura 14 – Interações por tipo coletadas durante o experimento . . . . . . . . . . . . .
Figura 15 – Interações através do tempo do vídeo durante o experimento . . . . . . . . .
Figura 16 – Interações através do tempo (questões em destaque) . . . . . . . . . . . . .
Figura 17 – Dados de resolução da questão 1 . . . . . . . . . . . . . . . . . . . . . . .
Figura 18 – Dados de resolução da questão 3 . . . . . . . . . . . . . . . . . . . . . . .
Figura 19 – Interações através do tempo (seções mais vistas) . . . . . . . . . . . . . . .
Figura 20 – Visualização de cada seção . . . . . . . . . . . . . . . . . . . . . . . . . .
Figura 21 – Um player de vídeo interativo lhe parece útil e interessante no contexto da
educação? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Figura 22 – O recurso de anotações no vídeo lhe parece útil e interessante? . . . . . . .
Figura 23 – O recurso de marcações no vídeo lhe parece útil e interessante? . . . . . . .
Figura 24 – O recurso de questões no vídeo lhe parece útil e interessante? . . . . . . . .
Figura 25 – Usaria uma ferramenta como esta para montar um curso online em vídeo? .
Figura 26 – Este foi um experimento interessante e divertido de se participar? . . . . . .
Figura 27 – Mensagem exibida após responder uma questão incorretamente . . . . . . .
Figura 28 – Mensagem exibida após responder uma questão de opinião . . . . . . . . .
Figura 29 – Preenchendo os campos durante o cadastro de uma anotação . . . . . . . .
Figura 30 – Anotacao cadastrada na figura 29 sendo renderizada na interface do player .
Figura 31 – Preenchendo os campos durante o cadastro de uma marcação de seção . . .

35
36
37
38
38
39
39
40
44
45
46
47
50
51
52
52
53
53
54
55
56
57
57
58
58
59
64
64
65
65
66

LISTA DE TABELAS
Tabela 1 – Comparação das propostas dos artigos lidos com a proposta deste trabalho .
Tabela 2 – Tipos de interações que podem ser coletadas . . . . . . . . . . . . . . . . .
Tabela 3 – Conteúdos interativos presentes no experimento . . . . . . . . . . . . . . .

31
43
49

LISTA DE ABREVIATURAS E SIGLAS
HTML5

Hypertext Markup Language 5

JSON

JavaScript Object Notation

URL

Uniform Resource Locator

SQL

Structured Query Language

API

Application Programming Interface

CSV

Comma-Separated Values

PHP

PHP: Hypertext Preprocessor

MOOC

Massive Open Online Course

MVC

Model-View-Controller

HTTP

Hypertext Transfer Protocol

REST

Representational State Transfer

SUMÁRIO
1

INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

FUNDAMENTAÇÃO TEÓRICA . . . . . . . . . . . . . . . . . . . . . .

2.1

Learning Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1.1

Video Learning Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2

Videoaula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.3

Interações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.4

Vídeo Interativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.5

Video-Based Learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.6

Data-Based Decision-Making . . . . . . . . . . . . . . . . . . . . . . . . .

TRABALHOS RELACIONADOS . . . . . . . . . . . . . . . . . . . . .

3.1

Collecting and Making Sense of Video Learning Analytics . . . . . . . . . .

3.2

Making sense of video analytics: Lessons learned from clickstream interactions, attitudes, and learning outcome in a video assisted course . . . . . . . .

3.3

Using open source technologies and open internet resources for building an
interactive video based learning environment that supports learning analytics

3.4

Instructional video in e-learning: Assessing the impact of interactive video
on learning effectiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.5

Introduction to smart learning analytics: foundations and developments in
video-based learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.6

Open system for video learning analytics . . . . . . . . . . . . . . . . . . .

3.7

MOOC Video Interaction Patterns: What Do They Tell Us? . . . . . . . . .

3.8

An interactive video-based learning environment that supports learning analytics for teaching ‘Image Editing’ . . . . . . . . . . . . . . . . . . . . . . .

3.9

Smart environments and analytics on video-based learning . . . . . . . . . .

3.10

Smart Learning Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.11

Comparação Entre os Trabalhos Relacionados e o Trabalho Proposto. . . . .

PROPOSTA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.1

Tecnologias Utilizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2

Arquitetura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.1

Lado Servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.2

Lado Cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.2.1

Player de Vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.2.2

Editor de Vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.2.3

Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.2.3

Biblioteca para Coleta de Dados de Interação . . . . . . . . . . . . . . . . .

4.3

Interações Coletadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.4

Conteúdos Interativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.4.1

Questões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.4.2

Anotações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.4.3

Marcações de Seção . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.5

Experimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

RESULTADOS E DISCUSSÕES . . . . . . . . . . . . . . . . . . . . . .

5.1

Uma breve comparação entre o player implementado e a literatura . . . . . .

5.2

Análise dos dados coletados no experimento . . . . . . . . . . . . . . . . .

5.3

Análise do questionário de opinião . . . . . . . . . . . . . . . . . . . . . .

5.4

Possíveis decisões que podem ser tomadas com base na análise dos dados . .

5.5

Feedbacks do experimento . . . . . . . . . . . . . . . . . . . . . . . . . . .

CONCLUSÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ANEXO A – OUTRAS MENSAGENS EXIBIDAS POR QUESTÕES . . . . . . . .

ANEXO B – PREENCHENDO CAMPOS DE CONTEÚDOS INTERATIVOS (ANOTAÇÃO E MARCAÇÃO DE SEÇÃO) . . . . . . . . . . .

1 INTRODUÇÃO
A educação à distância é um método de ensino que existe a muito tempo, cerca de dois
séculos atrás, e já passou por diversas alterações no que diz respeito ao modo com que aluno
e professor se comunicam (MOORE et al., 2010). Desde o surgimento da rede mundial de
computadores, uma nova fase da educação à distância tomou forma, marcada pelo uso da rede
como meio de comunicação entre os professores e alunos, permitindo uma troca de informações
e acesso aos materiais de estudo (livros, artigos, imagens, e etc) mais eficiente. Este novo
método de educação à distância, e qualquer método de educação baseada em ambientes online,
hoje é conhecido como e-learning (MOORE et al., 2010), e conta com diversas plataformas
educacionais que oferecem cursos de variados níveis de ensino e certificação.
Por volta de 2005, com o surgimento de plataformas voltadas ao compartilhamento de
vídeos, como o Youtube, um aumento na publicação de vídeos é notado e com isso, vídeos
educacionais começam a surgir e se tornar populares (KLEFTODIMOS; EVANGELIDIS, 2016b).
As videoaulas permitiam a inserção de textos, imagens, trechos de outros vídeos, além da
presença do professor, o que fez deste um formato mais acessível de consumir. Com o tempo,
as plataformas de e-learning já baseavam seus conteúdos em volta de vídeos, e o surgimento
do edX1 , Udacity2 , Khan Academy3 , Coursera4 , entre outras plataformas educacionais, têm
demonstrado o potencial que os vídeos educacionais possuem.
No entanto, para um professor interessado em saber o quão engajados os alunos estão
com o vídeo, e entender a forma com que eles assistem as videoaulas, geralmente poucas
ferramentas são oferecidas (VERBERT et al., 2013). O professor normalmente não consegue
saber os momentos mais visualizados do vídeo (GIANNAKOS et al., 2014), onde os alunos mais
repetiram a reprodução do vídeo; em quais momentos os estudantes abandonaram o vídeo (LI et
al., 2015), e outras informações que podem apoiar a tomada de decisões (SPILLANE, 2012) por
parte do educador a fim de poder melhorar a aprendizagem de seus alunos (GIANNAKOS et al.,
2013). Porém, há outro problema que dificulta a entrega destas informações ao professor, que é a
falta dos dados necessários. No entanto, uma fonte de dados de videoaulas podem ser as próprias
interações que os usuários realizam ao utilizar um player de vídeo.
Visto que os players de vídeo baseados em HTML5 permitem identificar as interações
1
2
3
4

Disponível em: https://www.edx.org
Disponível em: http://www.udacity.com
Disponível em: https://pt.khanacademy.org
Disponível em: https://www.coursera.org

15
básicas do usuário com a interface através de eventos (play5 , pause6 , fullscreen7 , etc), coletar
estes dados é possível e, relativamente, não demanda grande esforço em fazê-lo (GIANNAKOS
et al., 2014)(KLEFTODIMOS; EVANGELIDIS, 2016b)(CHORIANOPOULOS et al., 2014).
Além disso, uma plataforma de e-learning permite a implementação de abordagens mais criativas
para os vídeos, possibilitando inserção de conteúdo interativo, como questões e anotações feitas
por um professor (GIANNAKOS et al., 2014)(KLEFTODIMOS; EVANGELIDIS, 2016b). Deste
modo, o educador possui mais opções para desenvolver um curso de qualidade e, com o uso de
técnicas de learning analytics8 (GIANNAKOS et al., 2013) e ferramentas como um dashboard9
para visualizar informações de interesse sobre o vídeo e suas interações, permitindo que os
professores possam tomar decisões que impactam positivamente o desempenho de seus alunos,
ou a construção de seus vídeos.
Com isto, é proposto neste trabalho uma biblioteca para facilitar a coleta de dados de
interação de vídeos, englobando as interações de navegação mais comuns (play, pause, tela
cheia, mudar volume, etc), assim como interações com conteúdo interativo (responder questão,
escolher alternativa, pular para uma determinada seção do vídeo, etc). Também é proposto um
player de vídeo capaz de renderizar os conteúdos interativos, um editor para o player e um
dashboard onde são exibidas informações sobre os dados coletados, em forma de gráficos. Deste
modo, considerando a ausência de trabalhos que visam apoiar o professor (GIANNAKOS et al.,
2014)(KLEFTODIMOS; EVANGELIDIS, 2016b)(CHORIANOPOULOS et al., 2014), tem-se
como objetivo permitir com esta ferramenta e suas funcionalidades a coleta dos dados para a
tomada de decisão de modo fácil e transparente, maior liberdade criativa a um professor durante
o processo de criação do vídeo, que este tenha a seu alcance as informações necessárias para
analisar seus próprios vídeos em razão das interações feitas pelos alunos.
A biblioteca para coleta de dados foi escrita em Javascript e captura os eventos das
interações com o vídeo, retornando dados no formato JSON para uma URL especificada. O
player de vídeo se conecta à biblioteca e renderiza conteúdos interativos dos tipos (1) questão,
(2) anotação e (3) marcação de seção. A ferramenta foi desenvolvida em PHP/Laravel no lado
servidor, Vue no lado cliente e um banco de dados MySQL, possuindo um módulo para cada
5

6
7

8
9

Em português: tocar ou reproduzir. Em um player de vídeo, o play é a ação de iniciar/retomar a reprodução do
vídeo.
Em português: parar. Em um player de vídeo, o pause é a ação de parar a reprodução do vídeo.
Em português: tela cheia. Em um player de vídeo, o fullscreen é a ação de ativar/desativar a reprodução do vídeo
em tela cheia.
Em português, análise da aprendizagem.
Em português, painel de controle.

16
funcionalidade proposta (player, editor e dashboard). Um experimento para avaliação do player
de vídeo foi conduzido, onde um vídeo sobre estatística descritiva foi disponibilizado, com
questões sobre o assunto embutidas no vídeo, além de anotações que guiaram o experimento e
marcações para as seções do vídeo. Um questionário de opinião mostrou que boa parte dos que
utilizaram o player se interessaram por seu conceito e funcionalidades. O experimento também
permitiu coletar os dados esperados, sem perda, e utilizá-los para gerar um dashboard com
informações que refletiam a navegação e interações esperadas ao longo do vídeo.
Deste modo, as ferramentas desenvolvidas neste trabalho foram capazes de se aproveitar
de tecnologias Web para permitir a coleta de dados de interação de um usuário com um player
de vídeo. Diferente de outros trabalhos na mesma linha, o foco foi no professor, e em como
este pode se beneficiar com os dados coletados. A opinião de usuários durante o experimento
foi positiva sobre as funcionalidades do player, principalmente sobre os conteúdos interativos.
Ainda assim, um uso mais aprofundado destes dados pode ser aplicado em trabalhos futuros,
permitindo feitos interessantes, como a identificação de estratégias de navegação em vídeo, a
classificação do entendimento do aluno sobre o assunto abordado no vídeo, entre outros.

2 FUNDAMENTAÇÃO TEÓRICA
Neste capítulo, apresentaremos e descreveremos os principais temas abordados neste
trabalho. O objetivo é fornecer um capítulo de referência para que o leitor possa consultar, caso
precise de maiores informações sobre um ou mais dos temas tratados.
2.1

LEARNING ANALYTICS
Segundo a Society for Learning Analytics Research1 , learning analytics é “... A medição,

coleta, análise e apresentação de dados sobre estudantes e seus contextos, com o propósito de
entender e otimizar a aprendizagem e o ambiente em que ela ocorre” (SIEMENS; BAKER,
2012).
Sendo um processo simples e útil, learning analytics é bastante empregado em plataformas de e-learning, com o intuito de dar significado aos dados coletados. Em (GIANNAKOS et
al., 2014), uma plataforma de e-learning realiza coletas de dados relacionados à navegação do
usuário em um vídeo, desempenho acadêmico e atitudes durante um curso em vídeo. Os dados
coletados são então utilizados para se estudar a possível relação entre a visualização do vídeo
educacional e o desempenho acadêmico do aluno. De forma semelhante, (KLEFTODIMOS;
EVANGELIDIS, 2016b) apresenta um ambiente com base em tecnologias open source e que
também armazena dados referentes ao uso do vídeo pelo usuário, que são analisados e apresentados como tabelas e gráficos, onde pode ser visto a frequência de comandos do tipo play/pause,
se a visualização do vídeo foi mais ou menos linear, se o aluno teve problemas com questões
apresentadas durante o vídeo, e etc. Não apenas isso, mas (GIANNAKOS et al., 2015) demonstra
em seus resultados a possibilidade de encontrar os trechos mais “atrativos” de um vídeo, ou seja,
aqueles que são mais visualizados pelos usuários. Também é possível estender o conceito de
learning analytics para a criação de plataformas de e-learning personalizadas de acordo com a
experiência do usuário (smart learning environment) da forma como é visto em (GIANNAKOS
et al., 2016b), onde os analytics podem ser utilizados com o propósito de avaliar a qualidade do
processo de aprendizagem definido para cada usuário, permitindo a construção de experiências
personalizadas cada vez mais eficientes de um ponto de vista acadêmico.
Alguns desafios para o uso do learning analytics envolvem a forma com que os dados
serão adquiridos e como serão explorados, devido aos vários possíveis cenários, técnicas específicas podem ser utilizadas para melhorar o resultado dos analytics. A visualização dos dados com
1

Em português: Sociedade para Pesquisa em Análise de Aprendizado. Disponível em: https://solaresearch.org

18
o intuito de causar impacto no processo de aprendizagem de um aluno também é um desafio,
existindo poucas ferramentas atualmente com esta capacidade (VERBERT et al., 2013).
2.1.1

Video Learning Analytics
O video learning analytics deriva do learning analytics e aplica suas técnicas em dados

relacionados ao uso de vídeos educacionais. Os video-based environments se beneficiam do uso
destas técnicas graças a quantidade de dados gerados por vídeos e interações feitas por usuários
(play, pause, etc) (GIANNAKOS et al., 2014) (LI et al., 2015), estas sendo normalmente as
principais fontes de dados.
Muito do learning analytics apoia-se na análise de desempenho do aluno, seja o desempenho acadêmico geral ou específico em um dado assunto. É, no entanto, mais difícil analisar
o desempenho de um aluno com base em dados provenientes de vídeos, visto que estes dizem
pouco das capacidades do estudante. Em (GIANNAKOS et al., 2014), algumas soluções são
apresentadas com análises de longo prazo para determinar o ganho de alunos ao longo de um
curso baseado em videoaulas, mas isto só foi possível com o uso de dados que refletem o
desempenho dos alunos, como resolução de questões. Por este motivo, o video learning analytics
é mais comumente utilizado em análises de navegação de um vídeo, identificando estratégias de
navegação2 , momentos mais vistos de um vídeo, interações feitas ao longo do vídeo, etc. Para
uma ferramenta que busca apoiar o professor, é de grande valor este tipo de informação, a fim de
entender o comportamento dos alunos diante o material oferecido.
2.2

VIDEOAULA
Em plataformas de e-learning, dentre os possíveis tipos de recursos3 disponibilizados,

estão os vídeos. Estes são, geralmente, organizados em um formato semelhante ao de uma aula
tradicional, com o professor ditando o assunto e apresentando exemplos visuais através de textos,
imagens, outros vídeos e, em alguns casos, elementos visuais mais elaborados, como simulações
3D.
Uma videoaula é então um elemento bastante presente em plataformas de e-learning,
e sua versatilidade é uma justificativa para sua popularidade no meio acadêmico, visto que a
2

Uma estratégia de navegação é um padrão composto por uma sequência de interações executadas frequentemente, e que reflete o comportamento de um aluno em um dado trecho do vídeo.
Recurso educacional, ou simplesmente recurso, é um elemento de um ambiente de e-learning, que pode
representar diversos aspectos de um curso online, como questões, textos, vídeos, módulos, disciplinas e até
mesmo o curso em si (HYLéN, 2015).

19
possibilidade do professor recriar uma aula em vídeo permite um material que não é somente
mais completo que textos, imagens, diagramas, entre outros, mas também pode tomar para si
estes elementos, se tornando ainda mais completo. Além disso, videoaulas permitem abordagens
interessantes, como a sala de aula invertida (GIANNAKOS et al., 2014), a possibilidade de
transmitir aulas ao vivo através da rede ou simplesmente utilizar os vídeos como material
suplementar às aulas (GIANNAKOS et al., 2013).
É no entanto uma dificuldade para o professor, saber como se comportam os estudantes
durante uma videoaula, se o vídeo foi de ajuda, qual o ganho em desempenho que o aluno teve
ao ver o vídeo, a velocidade com que o assunto é absorvido pelo estudante, entre outros, são
apenas alguns dos empecilhos que podem ser citados (GIANNAKOS et al., 2013) no contexto
das videoaulas.
2.3

INTERAÇÕES
Existem vários significados formais atribuídos à palavra interação. A sociologia considera

a interação como “conjunto das ações e relações entre os membros de um grupo ou entre grupos
de uma comunidade”, a estatística por sua vez explica interação como “medida de quanto o
efeito de uma certa variável sobre outra é determinado pelos valores de uma ou mais variáveis
diferentes”. Mas, independente da aplicação dada por cada área, pouco se perde do sentido de
“influência recíproca entre uma coisa e outra”4 , característico do termo.
No contexto da computação, uma interação caracteriza uma ação realizada por um usuário
e que resulta em uma reação do sistema. Com o desenvolvimento das interfaces gráficas, novos
meios de interagir com sistemas computadorizados foram criados e, desde então, foi presenciado
o surgimento do mouse, telas de toque, sensores de movimento (Kinect5 ) e outros meios de
interagir com programas. Um player de vídeo é uma interface gráfica que permite o controle e a
navegação ao longo da reprodução de um vídeo. Ações como play, pause, entrar em modo tela
cheia e mudar volume são possíveis de se executar por meio de interações, normalmente a partir
de cliques do mouse (ambientes desktop) ou através do toque na tela (smartphones). A tabela 2
apresenta o total de interações que são abordadas neste trabalho.
Isolada, uma interação pode não significar muito, mas como é visto em (LI et al., 2015),
uma sequência de interações pode demonstrar padrões que, ao serem analisados, apresentam
informações interessantes sobre o comportamento dos usuários em relação a um determinado
4
5

Disponível em: https://www.dicio.com.br/interacao
Disponível em: https://developer.microsoft.com/pt-br/windows/kinect

20
vídeo, permitindo, por exemplo, identificar estratégias de navegação comuns em um determinado
vídeo (como o frequente uso de pause em momentos do vídeo com muito texto, uso de seek
backwards6 para assistir trechos do vídeo que deixaram dúvidas, aumentar a velocidade de
reprodução em seções do vídeo já dominadas pelo aluno, etc (LI et al., 2015)), identificar os
momentos de mais difícil compreensão do vídeo (os usuários assistem várias vezes o mesmo
trecho do vídeo), momentos do vídeo mais propícios a causar evasão do usuário (os usuários
param de assistir o vídeo após esse trecho), entre outras possibilidades.
Embora um player de vídeo comum ofereça diversos tipos de interações de navegação
que podem ser analisadas, essas interações podem não possibilitar uma análise do desempenho
dos estudantes nos assuntos. Esta limitação pode ser superada ao agregarmos conteúdo interativo
aos vídeos, isso aumenta os tipos de interação disponíveis, geram mais e novos dados, permitindo
a análise de desempenho do usuário no assunto especificado (GIANNAKOS et al., 2014)
(GIANNAKOS et al., 2015) (KLEFTODIMOS; EVANGELIDIS, 2016b) (KLEFTODIMOS;
EVANGELIDIS, 2016a).
2.4

VÍDEO INTERATIVO
Com base no que foi apresentado neste capítulo, percebemos a importância do uso de

vídeos em plataformas de e-learning e como os professores podem utilizar estes recursos para
oferecer aulas à distância, de uma forma semelhante ao visto na sala de aula tradicional, mas com
as vantagens de uso que um vídeo pode ter. No entanto, ambientes virtuais permitem ainda mais
tipos de interação com vídeos, não se limitando aos já mencionados play, pause, seek backwards,
e etc.
O uso de interatividade em videoaulas pode ser implementado de diversas formas. A mais
comum é a adição de questões ao vídeo, que servem como validação do aprendizado do assunto
recém assistido, em (GIANNAKOS et al., 2014) é notável a aplicação deste recurso na forma
de testes apresentados ao lado do vídeo enquanto este avança sua reprodução, enquanto que em
(KLEFTODIMOS; EVANGELIDIS, 2016b) as questões são apresentadas in-video. Interações
como tabelas de conteúdo, legendas (KLEFTODIMOS; EVANGELIDIS, 2016b), anotações em
vídeo e marcações (GIANNAKOS et al., 2014) (GIANNAKOS et al., 2016a), também podem ser
encontradas em algumas plataformas de e-learning mais populares, como o Udacity. Não apenas
elementos básicos, mas interação com elementos mais complexos também podem complementar
6

Em português: procurar para trás. Em um player de vídeo, é a ação de retroceder a reprodução de um vídeo para
um momento anterior ao atual.

21
uma experiência de vídeo educacional, como é mostrado em (KLEFTODIMOS; EVANGELIDIS,
2016a) o uso de videoaulas em um curso de edição de imagens aliada a um editor de imagens
online, onde as interações com o editor são armazenadas e trabalham em conjunto com o vídeo.
Segundo (ZHANG et al., 2006), plataformas de e-learning que contam com vídeos
interativos apresentam, em média, resultados melhores quando comparados a plataformas com
vídeos não interativos e até mesmo com a sala de aula tradicional. Isso é uma evidência da
eficácia do uso de vídeos interativos no processo educacional, mas também serve de incentivo
para a aplicação de ferramentas com suporte a este tipo de funcionalidade.
2.5

VIDEO-BASED LEARNING
Uma plataforma de e-learning pode apresentar diferentes tipos de recursos educacionais,

desde textos, questões, áudios, entre outros, de forma a construir seu material didático e propagar
o assunto lecionado. É comum ver em plataformas de e-learning um foco no uso de vídeos
para se transmitir o conteúdo a um determinado público, utilizando material complementar para
construir um processo de Aprendizagem Baseado em Vídeo (video-based learning).
Os motivos que levam ao uso prioritário de vídeos em plataformas de educação online
são vários, sendo um deles a semelhança desse formato com o da sala de aula tradicional, com
um educador passando de forma verbal o assunto para os alunos, além do feedback visual das
informações estudadas. Alguns trabalhos, como (KLEFTODIMOS; EVANGELIDIS, 2016b)
citam a facilidade que plataformas populares de vídeo, como o Youtube7 , trouxeram ao acesso e
divulgação de vídeos educacionais pela internet. Segundo (KLEFTODIMOS; EVANGELIDIS,
2016b), um crescimento na publicação de vídeos educacionais ocorre desde 2005, ano em que
conexões de alta velocidade se tornaram mais populares em casas e escolas e também ano em
que foi fundado o Youtube. Atualmente, plataformas como Khan Academy, Coursera, Udemy8 ,
entre outras, oferecem suporte amplo a vídeos, com direito a funcionalidades interessantes, como
questões acopladas aos vídeos e sistemas que medem o progresso do aluno com relação ao curso
em vídeo.
Mas não é apenas porque vídeos são mais acessíveis devido a internet, o video-based learning também traz consigo diversas vantagens que são exploradas por plataformas de e-learning.
Como é apontado em (GIANNAKOS et al., 2016a), o que chama a atenção é a possibilidade de
acoplar elementos interativos aos vídeos, como questões, anotações, marcações, além de habilitar
7
8

Disponível em: https://www.youtube.com
Disponível em: https://www.udemy.com

22
o aprendizado personalizado através de comportamento inteligente da plataforma de e-learning.
É visto também em (GIANNAKOS et al., 2016b) que o uso de analytics em video-based learning
é possível e trás benefícios, como a possibilidade de compreender fenômenos complexos do
processo de aprendizagem e melhorar a experiência em ambientes do tipo.
Contudo, ainda existem desafios ao video-based learning, Por exemplo: como obter dados
do aprendizado? Como interpretar esses dados e gerar analytics confiáveis? Como utilizar estas
informações para aprimorar o processo de aprendizagem de forma inteligente? Essas são apenas
algumas perguntas levantadas em (GIANNAKOS et al., 2016a). Além disso, recursos em vídeos
possuem limitações difíceis de contornar, visto que as informações são transmitidas através de
trechos do vídeo, é difícil buscar uma informação específica mencionada pelo professor, assim
como editar/aprimorar o vídeo com base no feedback dos usuários pode ser trabalhoso, e etc.
2.6

DATA-BASED DECISION-MAKING
Ao coletar dados para análise, seja esta de qualquer tipo, o propósito da análise é o de

dar a estes dados significado, importância e, em alguns casos, utilidade. Por exemplo, com uma
série de interações coletadas, é possível identificar os momentos do vídeo em que os alunos mais
interagem, permitindo ao professor saber o que mais chama a atenção dos alunos nos vídeos e
como eles reagem ao que é apresentado na tela. Se os alunos interrompem a reprodução do vídeo
com frequência para ler trechos com textos, o professor pode tentar manter os textos com mais
tempo de tela, ou informar que o aluno pode pausar para ler, ou reduzir o tamanho dos textos
para acelerar a leitura, mantendo os trechos mais importantes.
Assim, mesmo que a possibilidade de identificar ou predizer um cenário seja interessante
por si só, o uso destes dados para tomada de decisões e reação podem ser uma ação muito
interessante e benéfica. Data-Based Decision-Making é um conceito que, segundo (SPILLANE,
2012), se sustenta no estudo dos dados, desde as possíveis informações que podem ser retiradas
destes, quais dados são importantes para a solução de um problema, como são interpretados, e na
aplicação dos dados através de tomada de decisões. Tomando como base o exemplo acima, se o
professor percebe a situação em questão (alta frequência de interações do tipo pause), identifica
o motivo (trechos com textos) e toma uma decisão a fim de amenizar a situação identificada.
A literatura ilustra muito bem situações onde a tomada de decisões com base em interações coletadas de videoaulas. Em (GIANNAKOS et al., 2015) é descrita uma plataforma de
e-learning que coleta dados de interação com um player de vídeo, além de respostas de alunos
em questões, e identifica os momentos mais importantes dos vídeos, assim como a evolução do

23
desempenho de um aluno ao longo de um curso em vídeo, no entanto, o trabalho limita-se a
informar que métodos de intervenção com base nos dados podem ser aplicados, não fornecendo
ideias dos possíveis métodos. Em (LI et al., 2015), por sua vez, é exemplificado como dados de
interações podem ser utilizados em prol da experiência dos usuários, identificando as estratégias
de navegação mais comuns (como frequentes pauses e replays9 de trechos do vídeo) e sugerindo
algumas decisões para o design dos vídeos, a fim de melhorar a reprodução do vídeo reduzindo a
necessidade de estratégias desse tipo.
Há, no entanto, alguns contrapontos que devem ser considerados no estudo dos dados e
na sua aplicação prática. O mal uso dos dados, como a má interpretação, pode levar a resultados
não intencionados, alguns até podem trazer consequências negativas, uma vez que tais resultados
serão usados para embasar decisões. Além disso, espera-se que os tipos de decisões tomadas
sejam avaliadas quanto à sua efetividades, a fim de medir (objetivamente) seu real impacto no
contexto de sua aplicação.

Em português: reprizar ou reproduzir novamente. Em um player de vídeo, é a ação de recomeçar a reprodução
ou ver um trecho novamente.

3 TRABALHOS RELACIONADOS
Ao se tratar de plataformas de e-learning, as videoaulas são recursos valiosos para abordar
um determinado assunto, passando assim o conteúdo estudado ao aluno. O valor destes recursos
em vídeo acabou levando ao interesse da comunidade acadêmica, gerando áreas de pesquisa
como o video-based learning, video learning analytics, pesquisas com foco em videoaulas e
no desenvolvimento de ambientes com este propósito. Diversos destes trabalhos acadêmicos já
realizaram propostas semelhantes a que será apresentada logo a seguir, e por isso merecem ser
mencionados.
Nas seções abaixo, apresentaremos 10 trabalhos relacionados. Esses trabalhos foram
escolhidos por meio de consulta ao Google Scholar, usando as frases de busca “video based
learning”, “video based environment”, “video learning analytics”, “video player data driven
decision making” e os seguintes critérios: (1) o artigo é atual; (2) É relevante (quantidade
considerável de citações); (3) Aborda o desenvolvimento de uma plataforma de vídeo ou; (4)
Aborda assuntos pertinentes à coleta e uso de dados provenientes de interações com os vídeos.
Nas seções a seguir, apresentamos os resumos dos artigos que atenderam aos critérios
mencionados. A leitura de cada artigo foi feita com o objetivo de responder às seguintes perguntas:
sobre o que é? O que propõe fazer? Como faz o que propõe? Quais os resultados obtidos? Quais
as limitações do trabalho? Quais os problemas encontrados?
3.1

COLLECTING AND MAKING SENSE OF VIDEO LEARNING ANALYTICS
A fim de melhorar o processo de aprendizagem, o trabalho apresentado em (GIAN-

NAKOS et al., 2014) foca no desenvolvimento de uma plataforma de vídeo capaz de gerar
dados analíticos de interação com o player, entregando assim informações a pesquisadores e
professores. A plataforma desenvolvida baseia-se na Web, e é alimentada principalmente por
APIs do Google, como a do player do Youtube. O funcionamento da plataforma é simples, um
link leva a uma página com uma interface, onde o professor/pesquisador pode escolher os dados
que quer coletar, enquanto o aluno pode assistir a aula e responder algumas questões sobre o
conteúdo do vídeo.
Com a plataforma desenvolvida, um experimento foi conduzido com pesquisadores e
estudantes, em um curso que durou 10 semanas, onde durante 7 semanas palestras em vídeo
eram disponibilizadas. Os professores/pesquisadores poderiam configurar os vídeos a seu modo,
e eram capazes de acessar os dados gerados pelos vídeos. Ao fim do experimento, foi notado

25
uma correlação positiva entre as visualizações de vídeos e o desempenho de um aluno. O artigo
conclui que, com tantas plataformas de vídeo, a análise dos dados destes vídeos pode levar a um
melhor entendimento da experiência do aluno, mas destacam que os resultados obtidos ainda são
muito limitados, particularmente devido à escala do experimento.
3.2

MAKING SENSE OF VIDEO ANALYTICS: LESSONS LEARNED FROM CLICKSTREAM INTERACTIONS, ATTITUDES, AND LEARNING OUTCOME IN A VIDEO
ASSISTED COURSE
Este trabalho possui direta relação com (GIANNAKOS et al., 2014), sendo a mesma

plataforma de vídeo e experimento executados reutilizados neste artigo. No entanto, o foco aqui
são as interações coletadas. Antes de tudo, uma breve explicação sobre a plataforma de vídeo é
dada, onde se sabe que esta foi desenvolvida com tecnologias Web, como HTML5 e JavaScript,
além de APIs como a do Youtube. Também é ressaltada a visualização dos dados coletados em
análise, assim como a possibilidade de exportar os dados em formato CSV.
Durante a execução do experimento descrito em (GIANNAKOS et al., 2014) foram
coletados dados referentes à interação dos alunos com a plataforma de vídeo. Três categorias de
dados foram definidas:
• Dados de navegação de vídeo: quantas vezes um aluno viu um trecho do vídeo, se viu o
vídeo inteiro, e etc;
• Dados de desempenho do aluno: desempenho acadêmico dos alunos com o material de
apoio (questionários e avaliações sobre os assuntos abordados) dos vídeos;
• Dados de atitudes do aluno: refletem as opiniões dos alunos acerca do curso em vídeo,
desde a facilidade em participar do curso, a dificuldade em executar as atividade durante o
curso, o grau de utilidade do curso em vídeo na opinião do aluno e a intenção de participar
de outros cursos no futuro.
Foi possível extrair desses dados informações sobre os trechos mais importantes de um
vídeo, os mais assistidos, os vídeos menos vistos, entre outras informações. O questionário de
uso da plataforma mostrou que os estudantes a consideram de fácil uso. Ao fim, o artigo ressalta
que o foco, desde o começo, estava em melhorar a experiência dos estudantes.

26
3.3

USING OPEN SOURCE TECHNOLOGIES AND OPEN INTERNET RESOURCES FOR
BUILDING AN INTERACTIVE VIDEO BASED LEARNING ENVIRONMENT THAT
SUPPORTS LEARNING ANALYTICS
Outra proposta de plataforma de vídeo é entregue em (KLEFTODIMOS; EVANGELIDIS,

2016b), mas diferente do visto em (GIANNAKOS et al., 2014) e (GIANNAKOS et al., 2015),
o foco deste trabalho está nas tecnologias utilizadas no desenvolvimento da plataforma. Essas
tecnologias são baseadas na Web, completamente open source e foram selecionadas de modo a
permitir a coleta de dados de interações, learning analytics, e outras funcionalidades, como a
inserção de conteúdo interativo no vídeo.
Assim, dois módulos foram criados: o administrador, que cuida da configuração dos
vídeos, e o espectador, que cuida da exibição dos vídeos para os alunos. Os módulos foram
desenvolvidos em HTML5 e JavaScript, com o MediaElement.js servindo de base para o player.
Um servidor de aplicação foi desenvolvido em PHP, e um banco de dados em MySQL.
Com a plataforma, dois estudos foram conduzidos. O primeiro observou o comportamento
dos estudantes ao longo do vídeo através de suas interações, em momentos distintos do semestre
letivo. Com isto foi possível observar que algumas estratégias de navegação só ocorriam em
períodos específicos do curso, como um número maior de pausas dias antes de uma prova. O
segundo estudo observou comportamentos estranhos dos estudantes com vídeos interativos. Com
a ajuda dos dados coletados, foi identificado que a estratégia de navegação esperada para o
experimento não correspondia a estratégia adotada pelos alunos. O motivo para isso foi um erro
dos pesquisadores ao marcar uma das seções do vídeo. Além disso, foi identificado que alguns
alunos percorriam o vídeo em busca de questões, outros buscavam a resposta das questões em
trechos anteriores do vídeo e outros avançaram um pouco o vídeo antes de voltar e responder as
questões.
3.4

INSTRUCTIONAL VIDEO IN E-LEARNING: ASSESSING THE IMPACT OF INTERACTIVE VIDEO ON LEARNING EFFECTIVENESS
Como visto em (GIANNAKOS et al., 2014) e (KLEFTODIMOS; EVANGELIDIS,

2016b), as plataformas de vídeo apresentadas buscam oferecer elementos interativos aos usuários,
mas não se sabe o impacto destes elementos no aprendizado. Como pode ser visto em (ZHANG
et al., 2006), um experimento foi conduzido a fim de avaliar esse impacto, contra outros tipos de
ambientes de aprendizagem, sendo quatro ambientes levados em consideração: online com vídeo

27
interativo, online sem vídeo interativo, online sem vídeo e a sala de aula convencional.
Os experimentos foram executados nos quatro cenários, com cerca de 35 membros por
experimento. Os membros dos grupos eram estudantes de cursos de graduação, que foram
convidados sobre o pretexto de ser uma atividade bônus ao curso. Os temas dos experimento
estavam de acordo com as ementas dos cursos dos estudantes.
Participantes nos grupos de estudos online seguiram um procedimento que consistia
em: introdução, pré teste, treino, sessão de aulas online e um pós teste/questionário. Na sala
foi ministrada a mesma aula que a contida nos vídeos. Os resultados mostraram que vídeos
interativos influenciam positivamente o processo de aprendizagem, muito mais do que os métodos
com vídeo não-interativo, e que a diferença entre as plataformas de e-learning com vídeo, sem
vídeo e a sala de aula foram mínimas.
3.5

INTRODUCTION TO SMART LEARNING ANALYTICS: FOUNDATIONS AND DEVELOPMENTS IN VIDEO-BASED LEARNING
Este artigo introduz o conceito de smart learning analytics, levantando as possibilidades

em uma plataforma de e-learning baseada em vídeo e no uso para o video learning analytics.
São citados diversos trabalhos que fazem parte do estado da arte no contexto de smart
video learning analytics, muitos dos artigos tratam da visualização e geração dos analytics, do
uso de anotações para dar significado aos conteúdos, uso de elementos interativos em vídeos,
entre outros.
Também são citados casos como os apresentados em (GIANNAKOS et al., 2015) e
(KLEFTODIMOS; EVANGELIDIS, 2016b), com diversas plataformas já utilizando seus dados
analíticos para melhorar a experiência do usuário, seja em termos de navegação ou de desempenho
acadêmico. Além disso, o trabalho cita como pode vir a ser útil a publicação de dados em
plataformas abertas, como o edX.
3.6

OPEN SYSTEM FOR VIDEO LEARNING ANALYTICS
Este é um artigo breve, a proposta é a de um sistema aberto de learning analytics

em vídeos educacionais. A ideia é a de que o sistema possa prover para pesquisadores dados
analíticos das interações de alunos com os vídeos de uma plataforma.
O sistema foi feito com base nas APIs do Google e Youtube, semelhante a (GIANNAKOS
et al., 2015), o player foi customizado com JavaScript. Os dados de interação foram armazenados

28
em um banco de dados fornecido pelo Google. Com isso, o sistema é capaz de identificar se o
estudante assistiu toda a aula, quais as partes mais relevantes do vídeo, quantas vezes a aula foi
vista por um estudante e quais partes do vídeo são mais atrativas para eles.
3.7

MOOC VIDEO INTERACTION PATTERNS: WHAT DO THEY TELL US?
Novamente com foco na análise das interações de alunos com um vídeo educacional, o

ponto principal deste trabalho é o de que players de vídeo normalmente oferecem tipos limitados
de interações, necessitando do uso de técnicas como cadeias de Markov e séries temporais para
encontrar melhor significado para elas.
Fica explícito que as técnicas de análise em vídeo são mais utilizadas para análise de
navegação e predição de evasão das aulas em vídeo. Além disso, os tipos de interação mais
utilizados são os baseados em cliques do mouse. O artigo então faz uma análise de dois cursos
do Coursera que possuem vídeos, utilizam técnicas de clusterização para agrupar os tipos de
interação e fazem uma análise de interação para determinar a dificuldade de se aprender o
conteúdo de um vídeo.
Não apenas isso, mas também é apresentada uma análise da taxa de visitas repetidas que
um vídeo apresenta e a tentativa de relacionar as interações nos vídeos com o desempenho dos
alunos. Por fim, os pesquisadores deixam claro que este foi um trabalho baseado em inferências
estatísticas feitas sobre os dados de interação, mais especificamente o número de pausas, duração
média das pausas, número de seek forward, número de seek backwards, proporção do conteúdo
que foi avançado, velocidade média do vídeo, mudanças na velocidade do vídeo e tamanho
dos replays. O artigo também ressalta que uma implementação dos métodos propostos para
identificar estratégias de navegação é um trabalho a ser feito no futuro.
3.8

AN INTERACTIVE VIDEO-BASED LEARNING ENVIRONMENT THAT SUPPORTS
LEARNING ANALYTICS FOR TEACHING ‘IMAGE EDITING’
Este artigo é uma continuação de (KLEFTODIMOS; EVANGELIDIS, 2016b), e apre-

senta uma plataforma de e-learning baseada em vídeo com o foco no ensino de edição de
imagens. Neste caso, o player de vídeo será acompanhado de um editor de imagens interativo.
O MediaElements.js foi utilizado para capturar as ações/interações feitas no player de vídeo,
enquanto que o Pixlr foi a ferramenta gratuita escolhida como editor de imagem.
No ambiente proposto, um vídeo com aulas sobre edição de imagem com o Pixlr é

29
apresentado e o aluno possui acesso a diversos recursos educacionais sobre o tópico visto. Para
as atividades, o sistema abre uma aba com o Pixlr e o aluno faz suas edições e salva o resultado,
que é armazenado no lado servidor da aplicação.
O comportamento do usuário é salvo, tanto suas interações com o vídeo, quanto algumas
interações com o editor de imagens, como salvar um arquivo de imagem. Técnicas de clusterização são utilizadas para identificar grupos de estudantes com comportamento similar. Com a
análise dos cluster é possível agrupar alunos por tipo, dadas suas interações.
3.9

SMART ENVIRONMENTS AND ANALYTICS ON VIDEO-BASED LEARNING
Este trabalho se concentra em apresentar os conceitos de smart environment e smart

analytics, além de apresentar questões que estes conceitos podem vir a responder. Além disso, o
artigo cita a popularização dos MOOCs e a quantidade massiva de dados que estes geram e que
podem ser úteis no processos de aprendizagem.
O artigo então conclui falando que as pesquisas sobre ambientes baseados em vídeos
aumentaram e novas técnicas para processamento de dados e identificação de padrões de comportamento foram desenvolvidas para resolver alguns dos impasses que antes existiam.
3.10

SMART LEARNING ANALYTICS
Para se desenvolver um ambiente baseado em vídeo que ofereça learning analytics, o

entendimento do conceito e suas mais modernas aplicações é necessário. Em (BOULANGER
et al., 2014) é apresentado o conceito de smart learning analytics, além de explicar o conceito
de smart learning. Basicamente, os ambientes de smart learning são capazes de adaptar-se às
necessidades particulares dos usuários, moldando os caminhos de aprendizado por onde eles
passarão durante um curso.
A fim de permitir o desenvolvimento de ambientes com suporte ao smart learning
analytics, é apresentado o SCALE, um framework com o objetivo de prover dados analíticos
sobre o desempenho e competências de um aluno perante uma dada disciplina, a fim de traçar os
padrões e tendências dos alunos no processo de aprendizagem.
É descrito um experimento para validar o SCALE, que foi executado em um curso de
engenharia. Este experimento resultou em uma melhora em turmas que tiveram acesso a designs
instrucionais gerados pelo SCALE, mas mostra que, a princípio, a falta de costume com nova
abordagem pode resultar em desempenho mais baixo em fases iniciais de um curso.

30
3.11

COMPARAÇÃO ENTRE OS TRABALHOS RELACIONADOS E O TRABALHO
PROPOSTO.
Nesta seção apresentaremos uma tabela (tabela 1) comparando os trabalhos relacionados

apresentados nas seções anteriores, com a nossa proposta. Esta comparação será feita com base
nos seguintes critérios:
1. Ambiente baseado em videoaulas: a proposta do artigo apresenta, de alguma maneira,
um ambiente educacional com foco em videoaulas;
2. Uso de Learning Analytics: o artigo propõe o uso de learning analytics, com algum fim
dentro do contexto de plataformas de e-learning com foco em videoaulas;
3. Análise das interações do tipo navegação no vídeo: o artigo dá ênfase à análise de
interações de navegação com um vídeo, do tipo play, pause, entre outras;
4. Análise das interações com o conteúdo interativo do vídeo: o artigo dá ênfase à análise
de interações com conteúdo interativo de um vídeo, como a resolução de questões presentes
em vídeo;
5. Tocador baseado na Web: o artigo apresenta uma solução de player de vídeo baseando-se
em tecnologias Web, como HTML5 e Javascript;
6. Dados de interação guardados em banco de dados: a proposta do artigo sugere que
dados coletados sejam armazenados em um banco de dados para análise posterior;
7. Dashboard para exibir as análises das videoaulas: o artigo propõe uma página dedicada
a visualização dos dados coletados, em forma de informação para o usuário final;
8. Anotações nas videoaulas: o artigo sugere o uso de anotações presentes no vídeo;
9. Marcações nas videoaulas: o artigo sugere o uso de marcações de seção no vídeo, como
introdução, seção 1, seção 2, etc;
10. Questões embutidas nas videoaulas: o artigo sugere o uso de questões presentes no
vídeo, sejam elas de múltipla escolha ou dissertativas;

31
Tabela 1 – Comparação das propostas dos artigos lidos com a proposta deste trabalho
Artigos
3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
Proposta

1
SIM
SIM
SIM
SIM
SIM
SIM
SIM
SIM
SIM
NÃO
SIM

2
SIM
SIM
SIM
NÃO
SIM
SIM
SIM
SIM
SIM
SIM
SIM

3
SIM
SIM
SIM
NÃO
SIM
SIM
SIM
SIM
NÃO
NÃO
SIM

4
NÃO
NÃO
SIM
SIM
SIM
NÃO
NÃO
SIM
NÃO
NÃO
SIM

Critérios
5
6
SIM NÃO
SIM NÃO
SIM SIM
NÃO NÃO
NÃO NÃO
SIM SIM
NÃO NÃO
SIM SIM
NÃO NÃO
NÃO NÃO
SIM SIM

7
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
SIM

8
NÃO
NÃO
SIM
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
SIM

9
NÃO
NÃO
SIM
NÃO
NÃO
NÃO
NÃO
SIM
NÃO
NÃO
SIM

10
SIM
SIM
SIM
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
NÃO
SIM

4 Proposta
Em se tratando de plataformas de e-learning, o foco, geralmente, se encontra no aluno.
Mesmo com ferramentas para construir um curso de qualidade, disponibilizadas por serviços
como edX, Moodle1 , Coursera, entre outros, os estudos acadêmicos focam nas necessidades do
estudante, ignorando em parte o apoio aos professores. Isso, também, é percebido ao analisarmos
alguns dos artigos apresentados no capítulo anterior, que buscam os resultados para fins de
pesquisa, ou como (GIANNAKOS et al., 2014), que deixa explícito o foco do trabalho em apoiar
os alunos. Algumas iniciativas, no entanto, têm demonstrado interesse no uso de dados para
tomada de decisão por parte do professor, sugerindo métodos para apoiar estas decisões (LI et
al., 2015), ou deixando claro que é possível (GIANNAKOS et al., 2015), mas não sugerindo
abordagens específicas para a interferência do professor.
Um dos recursos educacionais de maior importância em plataformas de e-learning são as
vídeoaulas (ZHANG et al., 2006). Através delas os alunos recebem a maior parte do conteúdo
abordado, as explicações, conceitos, exemplos, entre outros, e são uma forma de lecionar mais
próxima da sala de aula tradicional, com o professor ditando o conteúdo para o aluno. Por ser um
recurso de vídeo, uma vídeoaula precisa de um player, que vai permitir a um aluno reproduzir
o vídeo e controlar seu fluxo através da interface fornecida. Contudo, é possível agregar valor
pedagógico ao player, integrando a ele funcionalidades extra, como anotações e questões sobre
o assunto abordado.
Com base nisso, surge uma série de questões sobre as capacidades dos vídeos em
plataformas de e-learning. Por exemplo: como saber os momentos de um vídeo em que ocorrem
mais interações? Como saber as seções do vídeo mais visualizadas? Como está o desempenho do
aluno em questões após ver uma videoaula? Como se comportam os alunos durante a reprodução
de uma videoaula? Como estas informações podem ser utilizadas por um professor no processo
de tomada de decisão? Estas são apenas algumas das questões que surgem, no que tange os
recursos de vídeos educativos, mas uma das principais limitações para se responder estas questões
é a disponibilidade de dados sobre as interações dos alunos com as vídeoaulas.
A proposta deste trabalho é a implementação de um player que permita a inserção
de elementos interativos (anotações, marcadores de seções e questões) em um vídeo e uma
ferramenta para exibir as estatísticas de uso, e demais dados coletados, aos professores, para que
estes possam tomar decisões com base nas informações disponíveis. Para cumprir esta proposta,
1

Disponível em: https://moodle.org

33
o trabalho apresenta uma biblioteca Javascript2 com ferramentas para a coleta de dados, um
protótipo de player de vídeo interativo baseado em tecnologias open source3 , um protótipo de
editor de vídeo para a adição de conteúdo interativo a um vídeo e um dashboard para visualização
dos dados. As seções a seguir apresentam mais detalhes sobre as tecnologias utilizadas e as
ferramentas desenvolvidas.
4.1

TECNOLOGIAS UTILIZADAS
A implementação do trabalho teve como foco o ambiente Web, e portanto as tecnologias

utilizadas eram voltadas para as demandas de aplicações da Web. De modo geral, duas linguagens
de programação foram utilizadas: PHP4 e Javascript.
A linguagem PHP foi escolhida devido seu suporte nativo à aplicações voltadas para
Web, a curva de aprendizagem relativamente baixa, sua capacidade em se adaptar a várias
arquiteturas de sistema (como o MVC5 ) e uma comunidade ativa, útil para sanar dúvidas. Além
disso, o PHP possui uma variedade de frameworks com foco para Web, que trazem consigo
funcionalidades bastante úteis para o desenvolvimento de uma aplicação. Dentre os vários
existentes, foi escolhido o Laravel6 para suplementar a funcionalidades do PHP, pois é um
framework bem documentado, com uma comunidade ativa, possui diversas funcionalidades para
lidar de modo simplificado com requisições HTTP7 , operações com banco de dados, arquitetura
MVC, permite fácil implementação de um serviço REST8 (mais detalhes na seção 4.2), entre
outros.
Por sua vez, Javascript é uma das três principais tecnologias que compõem a Web (além
de HTML59 e CSS310 ), e é a linguagem de programação mais próxima do browser11 . Por conta
2
3

4
5

6
7

9
10
11

Disponível em: https://www.w3schools.com/js
Em português, código aberto. Uma tecnologia open source é livre de acesso para uso da comunidade, podendo,
ou não, ter seu uso controlado através de uma licença de uso.
Disponível em: https://www.php.net
MVC ou Model-View-Controller, é um padrão de arquitetura de sistemas apropriado para a implementação de
interfaces de usuário. O padrão divide a lógica do sistema em manipulação de dados (model), visualização de
dados (view) e controle de requisições (controller).
Disponível em: https://laravel.com
HTTP ou Hypertext Transfer Protocol, é um protocolo da camada de aplicação da Web, desenvolvido para
transmissão de documentos através de protocolos da camada de transporte.
Um serviço REST é um tipo de modelo de sistema distribuído, que permite a construção de sistemas modulares
e a interoperáveis.
Disponível em: https://www.w3schools.com/html
Disponível em: https://www.w3schools.com/css
Navegador da Web, é uma ferramenta utilizada para acessar requisitar arquivos de endereços Web e renderizar
a páginas dos endereços acessados.

34
disso, Javascript possui suporte nativo às operações de um browser (realizar requisições HTTP,
criar elementos HTML5, aplicar estilos CSS3, e etc), além de possuir rotinas para tratar eventos
disparados por elementos HTML5. É uma linguagem relativamente simples de aprender, com
uma comunidade grande e bastante ativa e centenas de bibliotecas e frameworks que expandem
as capacidades da linguagem. Um dos frameworks, o Vue.js12 , foi escolhido para uso no trabalho
por permitir a criação de elementos de interface com relativa praticidade e boa responsividade,
através de um sistema de criação de componentes bastante flexível. Além disso, o Vue.js possui
suporte nativo com o Laravel, permitindo utilizar as duas tecnologias em conjunto e sem muitas
complicações. PHP/Laravel são utilizados no desenvolvimento do lado servidor do sistema
proposto, enquanto que Javascript/Vue.js são utilizados para compor o lado cliente.
Para extender as funcionalidades do player de vídeo é utilizada a biblioteca Plyr13 , escrita
em Javascript. O Plyr possui uma gama de funções que permitem capturar as interações do
usuário com o vídeo mais facilmente, através de eventos disparados pelo player HTML5, além de
fornecer uma API14 para acessar atributos do vídeo (como tempo atual, se está em pausa, se está
em tela cheia, e etc) de modo simplificado. Além disso, o Plyr apresenta outras funcionalidades
cosméticas, como a customização do visual do player, suporte a streaming e monetização dos
vídeos, entre outros, no entanto, embora sejam interessantes, estas funcionalidades não se fizeram
necessárias para o desenvolvimento do sistema proposto neste trabalho.
O dashboard proposto utiliza a biblioteca Charts.js15 para a criação dos gráficos que
serão utilizados na análise dos dados. Esta biblioteca foi escolhida por ser bastante simples de
utilizar, é fácil de integrar à interface feita com Vue.js por ser Javascript e permite a criação dos
tipos mais comuns de gráficos (barras, linha, fatia, rosca, bolhas, área e radar), além de permitir
misturar gráficos diferentes em um único desenho.
Além de linguagens de programação, bibliotecas e frameworks para o desenvolvimento
do sistema, é preciso uma estrutura de banco de dados para armazenar os dados coletados das
interações com os vídeos. O banco de dados escolhido foi o MySQL16 , um banco estruturado
que permite as operações básicas de um banco de dados (inserir, atualizar, excluir e consultar),
além de operações mais complexas (uso de triggers, funções, procedures, indexes, e etc), possui
12
13
14

15
16

Disponível em: https://vuejs.org
Disponível em: https://plyr.io
API ou Application Programming Interface é um conjunto de rotinas e padrões que são estabelecidos por
um sistema a fim de prover um serviço a ser acessado por terceiros, sem que estes precisem de detalhes da
implementação. É comumente utilizada para integrar sistemas e criar um canal de comunicação e troca de dados
entre duas diferentes linguagens de programação.
Disponível em: https://www.chartjs.org
Disponível em: https://www.mysql.com

35
uma comunidade extensa e ativa, dado sua popularidade e fornece suporte à conexão com a
linguagem PHP sem muitas complicações.
4.2

ARQUITETURA
Figura 1 – Arquitetura do sistema proposto

Para o desenvolvimento da aplicação Web que exibirá o player de vídeo, é proposta uma
arquitetura com lado cliente (front-end) e lado servidor (back-end), como pode ser visto na
figura 1. A arquitetura proposta foi escolhida por se beneficiar do padrão MVC, mantendo os
models e controllers no lado servidor, onde podem acessar os dados do banco e processar as
requisições, retornando os dados já tratados. As views são mantidas no lado cliente, na forma
de componentes do Vue.js, e recebem apenas os dados já tratados pelo servidor. Além disso, a
arquitetura permite a criação de um serviço REST em forma de API, neste caso o lado servidor
recebe e processa requisições HTTP feitas pelo cliente e retorna arquivos JSON17 padronizados,
contendo os dados solicitados ou informando quando uma operação falhar ou for bem sucedida.
O banco de dados apenas se conecta com a API REST, sendo transparente para todo o
resto da aplicação. Graças à API proposta, é possível dividir o sistema em módulos independentes
uns dos outros, permitindo uma maior flexibilidade da aplicação (se um módulo estiver offline,
17

JSON ou Javascript Oriented Notation é uma formatação leve para troca de dados, de fácil leitura e escrita para
seres humanos e fácil de gerar e interpretar para a máquina. É formatado em texto e independente da linguagem
de programação utilizada.

36
os demais continuarão funcionando), além de manter mais fácil a manutenção dos módulos
e simplificar a possível adição de novos módulos com novas funcionalidades no futuro. Os
módulos desenvolvidos são três: player de vídeo, editor de vídeo e dashboard.
4.2.1

Lado Servidor
O lado servidor (back-end) tem duas aplicações sendo executadas, o banco de dados

Mysql e o programa servidor escrito em PHP/Laravel. A conexão entre o banco de dados e o
programa servidor e as operações de seleção, inserção, atualização e exclusão de dados no banco
são feitas utilizando funcionalidades disponibilizadas pelo Laravel. O framework também permite
que os models criados sejam facilmente relacionados à tabelas no banco, além de permitir a
criação das tabelas propriamente ditas. O Laravel também oferece um serviço para gerar funções
de API automaticamente nos controllers, permitindo que estas sejam facilmente acessadas através
de uma URL, com isso, a criação do serviço REST foi relativamente simplificada. Deste modo,
a troca de dados entre servidor e cliente é feita através de chamadas à API REST, que retorna
dados no formato JSON.
4.2.2

Lado Cliente
Como mencionado anteriormente, o lado cliente divide-se em três módulos principais:

player de vídeo, editor de vídeo e dashboard. A principal linguagem utilizada é o Javascript,
apoiado pelo framework Vue.js.
4.2.2.1

Player de Vídeo

Figura 2 – Player HTML5 nativo (esquerda) e player com visual do Plyr (direita)

O player de vídeo proposto é um player HTML5 com todas as suas funcionalidades
básicas de controle (play, pause, retroceder, avançar, tela cheia e legendas). A biblioteca Plyr é
utilizada para facilitar a coleta dos dados de interação com as funções que oferece, mas como

37
pode ser observado na figura 2, ela também muda a aparência do player, isso é apenas um detalhe
visual aplicado por padrão ao se utilizar o Plyr.
Figura 3 – Módulo do player de vídeo

O módulo do player (figura 3) também se responsabiliza por renderizar (desenhar na
interface gráfica) os conteúdos interativos cadastrados através do editor de vídeo, como questões
e anotações. Marcações de sessões são renderizadas em lista abaixo do player de vídeo. Além
disso, as interações realizadas no player emitem eventos que são escutados por uma biblioteca
Javascript responsável pela coleta destes dados, e que então os repassa ao servidor para serem
salvos no banco.
4.2.2.2

Editor de Vídeo
Para inserir conteúdo interativo que será renderizado pelo player, é proposto um editor

de vídeo com funcionalidades simples, de adicionar, editar e remover conteúdos interativos do
vídeo. Os tipos de conteúdo suportado são os já citados: questões de múltipla escolha, anotações
e marcações de sessões. Na figura 4 são demonstrados os campos de preenchimento para inserir
uma questão no vídeo.

38
Figura 4 – Preenchendo os campos durante o cadastro de uma questão

O resultado da questão cadastrada na figura 4 pode ser visto na figura 5, já com a questão
renderizada durante a reprodução do vídeo.
Figura 5 – Questão cadastrada na figura 4 sendo renderizada na interface do player

39
Figura 6 – Módulo do editor de vídeo

A figura 6 apresenta uma visão geral do módulo do editor de vídeo. A interface do editor
é composta por cards que exibem os conteúdos já cadastrados. Um botão de adicionar está
presente, ao clicar sobre ele é apresentado um card com as opções (1) Anotação, (2) Problema
e (3) Marcação, indicando cada um dos tipos de conteúdo. Ao selecionar o tipo de conteúdo,
o card apresenta os campos para preencher os dados necessários (perguntas e alternativas para
questões, por exemplo). Os conteúdos interativos cadastrados no editor são enviados ao servidor
através da API REST e salvos no banco de dados. Um vídeo pode ter vários conteúdos de cada
tipo.
4.2.2.3

Dashboard
Figura 7 – Módulo do dashboard

40
O módulo do dashboard é a ferramenta de visualização de dados proposta para este
sistema. A figura 7 apresenta a interface do módulo do dashboard implementado, que é uma
página que lista as diferentes visualizações implementadas (na imagem está em destaque a
visualização das interações por tipo, que serão melhor abordadas no capítulo 5). Segundo
(VERBERT et al., 2013), um dashboard de learning analytics pode permitir a um professor a
conscientização, auto-reflexão e retirada de sentido de dados, além do impacto que pode ser
causado na aprendizagem do aluno com o que foi refletido.
Os dados coletados a partir das interações com os vídeos são tratados no lado servidor e
entregues para este módulo prontos para serem traduzidos em gráficos de diversos tipos (barras,
linhas, fatias, e etc), a fim de que estes ofereçam ao professor informações sobre a situação no
vídeo em questão, permitindo a interferência e tomada decisões acerca da aprendizagem dos
alunos nos vídeos.
Figura 8 – Gráfico de interações através do tempo do vídeo

Dada a natureza simples das visualizações propostas, é oferecido um conjunto de gráficos,
de modo que as informações presentes em uns complemente as de outros. Os gráficos implementados são os seguintes: (1) número de interações por tipo (figura 7), (2) interações através
do tempo de vídeo (figura 8), (3) visualização por seção do vídeo (figura 20), (4) respostas
corretas/incorretas em uma questão (figuras 17 e 18), (5) alternativas selecionadas em uma
questão (figuras 17 e 18).
4.2.3

Biblioteca para Coleta de Dados de Interação
Além dos módulos apresentados presentes no lado do cliente e o lado do servidor,

também é proposta uma biblioteca para coleta de dados de interação. A ideia por trás desta

41
biblioteca é a de que seja possível acoplá-la a qualquer player de vídeo em qualquer tipo de
plataforma de e-learning. Tal flexibilidade é possível de se conquistar devido ao fato de que a
biblioteca é desenvolvida com base em operações simples do Javascript e HTML5, o que a torna
compatível com boa parte dos browsers (desde que estejam devidamente atualizados) e com as
plataformas de e-learning, visto que estas são baseadas na Web. Esta proposta, no entanto, não
foi desenvolvida com browsers mobile (smartphones) em mente, ou de plataformas variadas
(smart TVs18 , consoles de jogos, etc), e usa como base os browsers Mozilla Firefox19 e Google
Chrome20 . Outro fator que favorece o acoplamento, é o fato de que as interações coletadas são
capturadas através de eventos disparados pelo player HTML5, ou seja, enquanto o player alvo
da biblioteca for baseado em HTML5, esta será capaz de coletar seus dados de interação. O
único requisito adicional é a biblioteca Plyr, que fornece algumas funcionalidades adicionais.
Para funcionar, a biblioteca de coleta de dados deve ser carregada pela página do player
e inicializada com os parâmetros desejados. Os parâmetros são (1) o identificador do elemento
do player de vídeo HTML5, (2) o identificador do vídeo carregado, (3) o identificador da sessão
em que o vídeo está aberto e (4) a URL de destino dos dados. O identificador do player de vídeo
serve para capturar os eventos disparados pelas interações do usuário. O identificador do vídeo
serve para saber qual o vídeo que está sendo reproduzido. O identificador de sessão identifica a
sessão na qual o vídeo foi aberto (cada vez que um vídeo é acessado, uma nova sessão é criada).
A URL de destino define onde os dados coletados devem ser armazenados, se uma URL de
destino não for fornecida, os dados coletados são armazenados em uma estrutura de dados apenas
pelo tempo da sessão e com um limite de 1000 interações por vez (interações mais recentes
sobrepõem as mais antigas caso a estrutura sobrecarregue, resultando em perda de dados).
Considerando tudo isso, da mesma forma que foi utilizada no desenvolvimento do player
proposto, a biblioteca também poderia ser utilizada em plataformas como o edX, por exemplo,
com o propósito de coletar dados de interação no player de vídeo próprio desta plataforma.
Por fim, para os eventos de interação gerados por conteúdos interativos, a biblioteca
somente é capaz de coletar os dados de eventos que são emitidos por um elemento HTML5
com o identificador “canvas”. Caso um player não possua um elemento canvas, assume-se que
este não suporta conteúdo interativo e, portanto, não emitirá eventos de interação deste tipo,
sendo coletadas apenas as interações de navegação (tabela 2). Deste modo, o fluxo de execução
da biblioteca se resume da seguinte maneira: (1) usuário realiza uma interação com o player
18
19
20

Em português: TVs Inteligentes
Disponível em: http://www.mozilla.org/pt-BR/firefox/new
Disponível em: https://www.google.com/chrome

42
de vídeo; (2) através de um evento emitido pelo elemento de vídeo do HTML5, a biblioteca
captura a interação; (3) os dados da interação (posição do mouse, alternativa selecionada, etc) são
recebidos e armazenados em uma estrutura para envio ao servidor; (4) a estrutura é serializada em
formato JSON; (5) através de uma requisição HTTP POST21 , o JSON com os dados é enviado ao
endereço da URL definida na inicialização da biblioteca. Caso o player de vídeo não possua um
elemento canvas, a única diferença que irá ocorrer é que no passo (2) nenhum dado de interação
com conteúdo interativo será recebido. Outro caso alternativo é a ausência da URL de destino,
que altera o passo (4), resultando na execução descrita anteriormente.
4.3

INTERAÇÕES COLETADAS
A proposta para este trabalho é a coleta de duas classes de interações: interações de

navegação no vídeo e interações com conteúdo interativo. As interações de navegação são
aquelas relacionadas ao fluxo de execução de um vídeo (play, pause, buscar um momento do
vídeo, chegar ao fim do vídeo, etc) e as configurações que o usuário pode alterar e que afetam
a experiência com o vídeo (alterar o volume, deixar em tela cheia, mudar a legenda, etc). As
interações com conteúdo interativo, por sua vez, são aquelas relacionadas às questões, anotações
e marcações de seção de um vídeo (submeter resposta, selecionar alternativa, dispensar anotação,
pular para uma marcação, etc).
Cada classe de interação possui um conjunto de tipos de interações. São, ao todo, 21 tipos
de interação, que além de identificar a ação executada pelo usuário, carregam consigo dados
adicionais à ação, como posição do mouse no momento da interação, se o vídeo estava sendo
reproduzido, qual a marcação de sessão no momento da coleta, entre outros. O momento do
vídeo em que as interações são capturadas também é coletado. A tabela 2 expõe os tipos de
interação que podem ser coletadas, assim como os seus dados adicionais.
21

Método do protocolo HTTP para o envio de dados ao servidor.

43
Tabela 2 – Tipos de interações que podem ser coletadas
#
1
2
3
4
5
6
7
8
9
10
11
#
12
13
14
15
16
17
18
19
20
21

4.4

Interações de Navegação
Evento que dispara
play
pause
click

Interação
Dados adicionais
Play
Posição do mouse
Pause
Posição do mouse
Clique
Posição do mouse
Buscar momento
seek
Posição do mouse
no vídeo
Mudar volume
volumechange
Posição do mouse
Chegar ao fim
ended
Posição do mouse
do vídeo
Ativar o modo
enterfullscreen
Posição do mouse
tela cheia
Desativar o modo
exitfullscreen
Posição do mouse
tela cheia
Ativar a legendas
captionsenabled
Posição do mouse
Desativar as
captionsdisabled
Posição do mouse
legendas
Mudar idioma das
Posição do mouse,
languagechange
legendas
idioma da legenda
Interações com Conteúdo Interativo
Interação
Evento que dispara
Dados adicionais
Selecionar alternativa
Posição do mouse,
alternativeselected
de uma questão
alternativa selecionada
Submeter resposta
submitanswer
Posição do mouse
de uma questão
Avançar uma questão
skipquestion
Posição do mouse
Sair da aba do navegador
Status de reprodução
exitpage
com o vídeo
do vídeo (tocando ou não)
Entrar na aba do navegador
Status de reprodução
enterpage
com o vídeo
do vídeo (tocando ou não)
Anotação aparece no vídeo
showanotation
Posição do mouse
Anotação desaparece
hideanotation
Posição do mouse
do vídeo
Anotação é dispensada
Posição do mouse,
dismissanotation
do vídeo
identificador da anotação
Posição do mouse,
Entrar em uma marcação
entermark
identificador da marcação
Pular para uma marcação
Posição do mouse,
através da lista de marcações
jumptomark
identificador da marcação
de seção

CONTEÚDOS INTERATIVOS
Como mencionado em seções anteriores, o editor de vídeo proposto permite a inserção de

conteúdo interativo em um vídeo. Os conteúdos interativos são elementos HTML5 renderizados

44
sobre a interface do player de vídeo e que exibem ao usuário uma determinada funcionalidade.
A proposta deste trabalho sugere três tipos de conteúdo interativo: questões de múltipla escolha,
anotações e marcadores de seção.
4.4.1

Questões
Um conteúdo do tipo questão caracteriza-se por possuir um enunciado direcionado ao

aluno e, por ser de múltipla escolha, alternativas que podem ser escolhidas. Além disso, questões
podem ser ou não obrigatórias. Uma questão ser obrigatória implica que ela só permitirá que
o aluno prossiga a reprodução do vídeo após ao menos uma tentativa de resposta ser feita,
independente de ter respondido corretamente ou não. As questões aparecem em um momento do
vídeo especificado em seu cadastro e ao serem renderizadas interrompem a reprodução do vídeo
em questão, exibindo o conteúdo em um painel que cobre toda a interface do player.
Figura 9 – Uma questão renderizada pelo player de vídeo

Uma questão pode ter várias alternativas, mas apenas uma resposta correta, a menos
que a questão seja cadastrada como uma questão de opinião, neste caso uma resposta não
pode ser classificada como correta ou incorreta. Ao ser respondida, a questão apresenta uma
mensagem indicando a corretude da resposta, uma mensagem em fundo verde (figura 10)
indica a resposta correta (“Resposta correta!”), em fundo vermelho indica resposta incorreta
(“Resposta incorreta!”) e, para as questões de opinião, apresenta uma mensagem em fundo
amarelo (“Obrigado por nos dar sua opinião!”).

45
Figura 10 – Mensagem exibida após responder uma questão corretamente

4.4.2

Anotações
Em alguns momentos do vídeo, o professor pode sentir a necessidade de passar uma

explicação de forma mais textual, e para isso a abordagem mais comum é a inserção do texto
durante o processo criativo do vídeo. No entanto, após o vídeo estar pronto e disponível aos
alunos, o professor pode ainda assim deparar com a necessidade de inserir texto no vídeo
disponibilizado. As anotações são um tipo de conteúdo interativo textual, propostas com o intuito
de permitir que o professor insira informação em forma de texto no vídeo mesmo depois deste já
ter sido disponibilizado na plataforma de e-learning. Assim, é possível utilizar as anotações para
auxiliar o que o vídeo apresenta, ou corrigir problemas resultantes da gravação do vídeo (erros
tipográficos, informações erradas, e etc).

46
Figura 11 – Anotação sendo exibida em um trecho do vídeo

Uma anotação possui, então, um texto com a informação a ser passada, um momento no
vídeo em que aparece e uma duração. Além disso, anotações podem interromper a reprodução
do vídeo, através de uma opção ao serem cadastradas. Nesse caso, um botão “Continuar” é
apresentado junto a anotação (figura 11), que retoma a reprodução do vídeo e remove a anotação
da interface.
4.4.3

Marcações de Seção
Um vídeo, assim como um livro, pode ser dividido em diferentes seções e subseções

de acordo com o conteúdo que é reproduzido. Um vídeo educacional, em particular, pode ser
dividido seguindo os tópicos abordados (introdução, tópico 1, tópico 2, subtópico 1, e etc).
Uma marcação de seção é um tipo de conteúdo interativo que permite ao professor marcar os
momentos de um vídeo em que uma seção específica começa. Para isso, uma marcação possui
um texto que é o título da seção e um momento que marca o início da seção no vídeo.

47
Figura 12 – Lista de marcações de seção de um vídeo

O módulo do player de vídeo exibe uma lista com as marcações de seção do vídeo em
reprodução (figura 12), permitindo que o aluno saiba as seções existentes e navegue por elas
selecionando uma seção da lista.
4.5

EXPERIMENTO
É proposto um experimento com dois objetivos principais em mente: (1) coletar dados

que serão utilizados pelo dashboard para gerar visualizações e analisar as interações dos usuários
com o player durante o experimento e (2) permitir que usuários normais testem o módulo do
player de vídeo a fim de se coletar opiniões acerca dos conteúdos interativos implementados.
A execução do experimento durou 9 dias. O sistema do player de vídeo foi instalado
em um servidor de hospedagem (em um processo simples, visto que o servidor oferece suporte
às tecnologias utilizadas) e disponibilizado via URL a diversos usuários, através de grupos em
redes sociais. Um vídeo sobre estatística descritiva22 de 04:24 minutos de duração foi escolhido
dentre vários disponíveis no Youtube. Foram inseridos no vídeo diversos conteúdos interativos,
sendo 3 questões, 10 marcações de seção, 6 anotações e 5 questões de opinião, todos distribuídos
ao longo do vídeo de modo a complementar o material disponibilizado. Os participantes foram
pessoas envolvidas no meio acadêmico (alunos e professores de cursos de graduação) e não eram
familiarizadas com as ferramentas desenvolvidas.
Durante o experimento, cada participante teria que assistir a videoaula, respondendo as
questões que surgiam. Anotações apareciam antes das questões, informando os participantes
22

Vídeo utilizado disponível em: https://youtu.be/1zy6DTHQDzM

48
de que era possível utilizar a lista de marcações de seção para rever o último trecho do vídeo,
para tirar dúvidas antes ou enquanto a questão é renderizada na interface. Dado um momento do
vídeo, uma anotação surge para solicitar que os participantes pulem para um trecho específico
do vídeo usando a lista de marcações de seção. Ao fim do vídeo, os participantes deveriam
responder um questionário de opinião sobre a ferramenta utilizada e suas funcionalidades.
As questões de opinião disponibilizadas no questionário foram: (1) Um player de vídeo
interativo lhe parece útil e interessante no contexto da educação? (mede o impacto que o player
de vídeo teve na experiência do participante); (2) O recurso de anotações no vídeo lhe parece
útil e interessante? (mede o impacto que as anotações tiveram na experiência do participante);
(3) O recurso de marcações no vídeo lhe parece útil e interessante? (mede o impacto que as
marcações tiveram na experiência do participante); (4) O recurso de questões no vídeo lhe parece
útil e interessante? (mede o impacto que as questões tiveram na experiência do participante);
(5) Usaria uma ferramenta como esta para montar um curso online em vídeo? (mede o interesse
que o participante demonstra pela ferramenta); (6) Este foi um experimento interessante e
divertido de se participar? (mede a satisfação do participante para com este experimento). As
alternativas das 6 questões do questionário de opinião são iguais: (1) Discordo plenamente (a
opinião do participante é totalmente contrária ao que é afirmado na questão, sem nenhum ponto
de concordância), (2) Discordo (a opinião do participante é contrária ao que é afirmado na
questão, embora possa haver concordância em alguns aspectos), (3) Indiferente (o participante
não possui opinião relevância positiva ou negativa sobre o que é afirmado na questão), (4)
Concordo (a opinião do participante é a favor do que é afirmado na questão, com alguns pontos
de discordância) e (5) Concordo plenamente (a opinião do participante é totalmente a favor do
que é afirmado na questão, sem nenhum ponto de discordância). A tabela 3 lista os conteúdos
interativos presentes no vídeo.

49
Tabela 3 – Conteúdos interativos presentes no experimento
#

Tipo

Aparece em

Duração (s)

Anotação