Um tipo de conteúdo de vídeo interativo que permite aos usuários adicionar múltipla escolha e preencher as questões em branco, texto pop-up e outros tipos de interações em seus vídeos usando apenas um navegador. Torne seus vídeos mais envolventes e vídeo interativo em sistemas de publicação.

Etapa 1: Tópico
Usaremos um pequeno vídeo de groselhas como base para este tutorial.

Etapa 2: arquivos de vídeo
Um videoclipe é a base de qualquer vídeo interativo.

Etapa 3: Criação de um vídeo interativo
Selecione a opção Novo conteúdo e escolha Vídeo interativo na lista de tipos de conteúdo:

Etapa 4: editor de vídeo interativo
O editor de vídeo interativo deve aparecer agora. A parte superior do editor se parece com isto:

Neste tutorial, vamos nos concentrar na criação de elementos interativos no vídeo. Portanto, vamos nos concentrar na parte superior do editor, acima do cabeçalho Campos comuns .

O tipo de conteúdo de vídeo interativo consiste em três guias: Carregar vídeo , Adicionar interações e Tarefa de resumo . Essas três etapas representam um fluxo de trabalho natural para a criação de um vídeo interativo. Por padrão, a guia Carregar vídeo é exibida quando você cria um novo vídeo interativo, e é com isso que você sempre deseja começar.

Etapa 5: faça upload do vídeo
É aqui que adicionamos os videoclipes nos quais nosso vídeo interativo se baseia.

Pressione o botão “+” e, em seguida, pressione o botão “Carregar arquivo de vídeo”.

Navegue até onde você baixou o arquivo de vídeo mp4 da etapa 1 e carregue o vídeo. Um ícone quadrado preto com mp4 escrito aparecerá:

Pressione o botão de adição novamente para adicionar um formato de vídeo alternativo para garantir o suporte em todos os navegadores. Localize e carregue o videoclipe no formato WebM, que você converteu de mp4 na etapa 2:

Adicione rótulos relevantes para ambos os níveis de qualidade. Agora, edite as informações de direitos autorais pressionando o botão Editar direitos autorais abaixo dos ícones pretos do videoclipe:

Como estamos usando um videoclipe com licença Creative Commons, adicionamos as informações abaixo na caixa de diálogo Editar direitos autorais .

Título: -> Berries
Autor: Fred Rune Rahm
Fonte: https://vimeo.com/15132262 Licença: Licença Attribution-ShareAlike Versão: 3.0 Unported

Agora que adicionamos nossos arquivos de vídeo e informações de direitos autorais, estamos prontos para adicionar interações.

Etapa 6: Adicionar interações
Pressione a guia Adicionar interações na parte superior do editor. O videoclipe que adicionamos na etapa anterior é visualizado:

Usamos a barra de ferramentas acima do videoclipe para adicionar interações:

Existem três tipos diferentes de interação:

• Interação do questionário (pergunta), apresentada como um botão azul
• Interações simples (Texto, Imagem, Tabela), apresentadas como um botão roxo e
• Interação de adaptatividade (ir para)

Neste tutorial, vamos adicionar uma interação de Texto e Imagem .

Etapa 7: interação de texto
Adicionaremos um pequeno texto sobre Groselhas que o aluno pode escolher para ler.

Primeiro, adicione uma interação de Texto pressionando o botão Texto na barra de ferramentas, arraste-a sobre o vídeo e solte-a no meio do vídeo. Uma caixa de diálogo aparecerá quando você descartar a interação.

Queremos que a interação do texto seja visível nos primeiros três segundos do vídeo. Digite 0:00 como hora de início e 0:03 como hora de término no campo Exibir hora . Nesse caso, não queremos que o vídeo pare automaticamente quando a interação aparecer, então deixaremos a caixa de seleção Pausar desmarcada.

O rótulo é um texto que será exibido ao lado do ícone de interação como uma breve descrição do que o aluno pode esperar encontrar na interação. Digite Redcurrants no campo do rótulo.

No campo Texto, adicionaremos o texto real com informações detalhadas sobre as groselhas parafraseadas do Wikcionário :

As groselhas vermelhas são as bagas comestíveis translúcidas de um vermelho vivo do arbusto Ribes rubrum, que é nativo da Europa Ocidental.

Pressione Concluído . Agora você verá que um ícone com o rótulo Redcurrants foi adicionado ao vídeo:

Um ponto branco também foi adicionado à linha do tempo abaixo do vídeo, para indicar que a interação está disponível neste ponto do vídeo:

Reproduza o vídeo para garantir que a interação seja visível no momento correto.

Etapa 8: interação de imagem
Vamos adicionar duas interações de imagem mostrando outros tipos de groselhas que o aluno pode ver pressionando os ícones da imagem.

Abaixo estão os links para as imagens encontradas no Wikimedia Commons que usaremos:

• Imagem de groselha preta
• Imagem de groselha branca

Você pode adicionar uma imagem interação da mesma forma que adicionamos a interação texto. Pressione o botão Imagem , arraste-o para o vídeo e solte-o onde queremos que seja colocado.

Na primeira imagem interação, nós adicionar a imagem de groselha. No campo Exibir hora , insira 0:03 – 0:03. Desta vez, vamos marcar a caixa de seleção Pausar para que o vídeo seja pausado quando a interação aparecer. Adicione o rótulo Groselhas Pretas . Além disso, use Groselhas pretas para os campos Texto alternativo e Texto flutuante. Pressione Concluído .

Finalmente, adicione a imagem das groselhas brancas e use as mesmas configurações da interação Imagem da groselha preta mostrada acima. Pressione Concluído quando tiver adicionado a interação da imagem de groselha branca. Você pode mover as interações usando arrastar e soltar. Coloque-os de forma que você tenha algo assim:

Etapa 9: Resumo
No final de um vídeo interativo, você pode adicionar um Resumo . O Resumo tem como objetivo fazer o aluno refletir sobre o conteúdo de aprendizagem apresentado no vídeo.

Adicionaremos dois grupos de instruções no Resumo . Para obter uma descrição detalhada de como criar Resumos , você pode ler este tutorial .

No primeiro grupo de declarações , adicione as seguintes declarações:

As groselhas são nativas da Europa Ocidental.

As groselhas são nativas do norte da África.

As groselhas são nativas do sul da Ásia.

A primeira afirmação é a correta. Agora você deve ter algo assim:

Para criar outro grupo de declarações , pressione o botão Adicionar declarações . No segundo grupo de declarações , adicione as seguintes declarações:

Outras groselhas incluem groselhas pretas e groselhas brancas.

Outras groselhas incluem Bluecurrants e Yellowcurrants.

Outras groselhas incluem groselhas verdes e groselhas laranjas.

A primeira afirmação é a correta aqui também.

Etapa 10: Favoritos
Embora o vídeo de exemplo que estamos usando aqui seja muito curto, adicionaremos alguns marcadores. Os marcadores são usados ​​para indicar um novo tópico, uma interação importante ou um evento no vídeo.

Volte para a etapa Adicionar interações pressionando esta guia na parte superior do editor.

Os favoritos são exibidos no menu de favoritos, que é aberto ao pressionar o botão Favoritos ao lado do botão Reproduzir :

Você adiciona um marcador movendo o botão de reprodução para um ponto desejado no vídeo e pressionando o botão Marcador .

Vamos adicionar um marcador onde cada interação aparece no vídeo.

Mova o play-head para 0:00 e pressione o botão Bookmark .

No menu, pressione Adicionar favorito :

Adicione o rótulo Redcurrants ao favorito e pressione Enter no teclado.

Mova o jogo – vá para 0:03, adicione um marcador e rotule-o de Outras groselhas . Finalmente, mova o play-head para 0:04 e adicione um marcador chamado Resumo .

Cada marcador é indicado com uma linha cinza vertical na busca – bar. Os alunos podem pular diretamente para um capítulo pressionando os favoritos no menu de favoritos.

Agora você deve ter algo assim:

Por último salve e publique a atividade no botão de “Criar”, localizado na parte superior a direita da página. Assim, você irá ver sua atividade interativa finalizada.
Agora você deve ter o mesmo resultado do exemplo referido no topo da página.