Pular para o conteúdo principal

Player

O Player do VideoLib gera um conjunto de eventos que possibilitam, a quem incorpora o player, capturar esses eventos e gerar indicadores relativos a comportamentos dos usuários.

Incorporando o Player​


<iframe width="560" height="315" src="https://url.player/index.html?token=e8cebaaaa37f4e9997332775978ca0a6&audioplayer=N&controls=N&download=N&autoplay=N&networkstatus=N&startpoint=0&endpoint=210" title="TITULO DO VIDEO" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Player Autenticado​

Para chamar o player autenticado, é necessário passar o jwt com os dados do aluno.

Exemplo:


https://url.player/index.html?token=e8cebaaaa37f4e9997332775978ca0a6&audioplayer=N&controls=N&download=N&autoplay=N&networkstatus=N&startpoint=0&endpoint=210&jwt=<TOKEN GERADO PELO AUTH>

Abaixo segue a lista de eventos e os dados que são gerados.

Abrir Player​

Indicador: aberturaPlayer

Descrição: Abertura do player.

{
  "event": "AberturaPlayer",
  "codVideo": "string",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Download​

Indicador: download

Descrição: Realizou download do vídeo.

{
  "event": "download",
  "codVideo": "string",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Play​

Indicador: play

Descrição: Iniciou a reprodução do vídeo.

{
  "event": "Play",
  "codVideo": "string",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Assistir Vídeo​

Indicador: assistiuVideo

Descrição: Assistiu parte do vídeo. O Assistiu o video é gerado no momento que o usuário passa por um dos marcos. Os marcos são gerados a partir dos percentuais do vídeo, são dividos em 4 marcos (25%, 50%, 75% e 100%).

{
  "event": "AssistiuVideo",
  "codVideo": "string",
  "Progresso": "number",
  "secundagem": "number",
  "nomeVideo": "string",
  "urlVideo": "string"
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Saltar Vídeo​

Indicador: saltouVideo

Descrição: Avançou uma parte do vídeo. Quando o usuário opta em avançar o vídeo pela barra de progresso é gerado o indicador informando que o vídeo saiu de uma posição (AvancouVideoDe) e voltou em uma posição a frente. (AvancouVideoAte). Os tempos são iformados em segundos. 

{
  "event": "SaltouVideo",
  "codVideo": "string",
  "AvancouVideoDe": "number",
  "AvancouVideoAte": "number",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Avaliar Vídeo​

Indicador: ratevideo

Descrição: Avaliou o vídeo. A Avaliação pode ser "positiva" ou "negativa".

{
  "event": "AvaliouVideo",
  "codVideo": "string",
  "Avaliacao": "number",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Alterar Velocidade​

Indicador: alterouVelocidade

Descrição: Alterou a velocidade do vídeo.

{
  "event": "AlterouVelocidade",
  "codVideo": "string",
  "Velocidade": "number",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "resolucao": "number"
}

Solicitar Resumo​

Indicador: solicitouResumo

Descrição: Solicitou a visualização do Sphere - Resumo do vídeo.

{
  "event": "SolicitouResumo",
  "codVideo": "string",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Abrir Chat​

Indicador: abriuChat

Descrição: Solicitou a visualização do Sphere - Abrir Chat.

{
  "event": "AbriuChat",
  "codVideo": "string",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Alterar Resolução​

Indicador: alterouResolucao

Descrição: Alterou a resolução do vídeo. (1080p, 720p, 360p ou 4kp).

{
  "event": "AlterouResolucao",
  "codVideo": "string",
  "resolucao": "string",
  "secundagem": "number",
  "urlVideo": "string"
  "duracao": "number",
  "velocidade": "number",
}

Selecionar Legenda​

Indicador: selecionouLegenda

Descrição: Selecionou uma legenda.

{
  "event": "SelecionouLegenda",
  "codVideo": "string",
  "legenda": "string",
  "secundagem": "number",
  "urlVideo": "string"
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Tempo de Carga​

Indicador: tempocarga

Descrição: Tempo total que o vídeo levou para ser carregado, do momento da abertura até finalizar a carga do primeiro buffer, é o tempo em que o vídeo demora para ficar disponível para o usuário.

{
  "event": "tempocarga",
  "codVideo": "string",
  "milissegundos": "number",
  "nomeVideo": "string",
  "urlVideo": "string"
  "secundagem": "number",
  "duracao": "number",
  "velocidade": "number",
  "resolucao": "number"
}

Implementação​

Abaixo segue um modelo de implementação para captura dos eventos.

Javascript

window.addEventListener("message", function (event) {
  // Segurança: verifique a origem se necessário
  // if (event.origin !== "https://ex-videolib.live") return;

  const data = event.data;

  if (!data || !data.event) {
    return;
  }

  console.log("Evento recebido:", data.event);
  console.log("Dados:", data);

  switch (data.event) {
    case "AberturaPlayer":
      console.log(`Player aberto para o vídeo ${data.nomeVideo} (${data.codVideo})`);
      break;

    case "Play":
      console.log(`Iniciou o vídeo ${data.nomeVideo}`);
      break;

    case "AssistiuVideo":
      console.log(`Progresso: ${data.Progresso}% (${data.secundagem}s)`);
      break;

    case "SaltouVideo":
      console.log(`Usuário avançou de ${data.AvancouVideoDe}s para ${data.AvancouVideoAte}s`);
      break;

    case "AvaliouVideo":
      console.log(`Avaliação recebida: ${data.Avaliacao}`);
      break;

    case "AlterouVelocidade":
      console.log(`Velocidade alterada para ${data.Velocidade}x`);
      break;

    case "SolicitouResumo":
      console.log(`Resumo solicitado para o vídeo ${data.nomeVideo}`);
      break;

    case "AbriuChat":
      console.log(`Chat aberto`);
      break;

    case "AlterouResolucao":
      console.log(`Resolução alterada para ${data.resolucao} em ${data.secundagem}s`);
      break;

    case "SelecionouLegenda":
      console.log(`Legenda selecionada: ${data.legenda} em ${data.secundagem}s`);
      break;

    case "tempocarga":
      console.log(`Tempo de carga do vídeo: ${data.milissegundos}ms`);
      break;

    case "download":
      console.log(`Vídeo baixado: ${data.nomeVideo}`);
      break;

    default:
      console.log("Evento desconhecido:", data.event);
  }
});