API do YuJa Media Player – Central de Ajuda da YuJa

A plataforma de vídeo oferece uma API JavaScript para controlar e monitorar seu player de mídia incorporado usando a função postMessage. Para ver um arquivo de exemplo, clique aqui.

Adicionando a função postMessage do JavaScript

Adicione o seguinte código ao seu JavaScript para enviar comandos ao player de mídia:

function postMessage(data) {
    console.log(data);
    iframe.contentWindow.postMessage(data, childOrigin);
}

Lista de funções disponíveis

Essas funções podem ser usadas para controlar o player de mídia. Cada função envia um comando usando a função postMessage.

Nome da função	Descrição
Play	Inicia ou retoma a reprodução.
Pause	Pausa a reprodução.
SeekTo	Vai para um momento específico do vídeo (em segundos).
AdjustVolume	Define o nível de volume (0-100).
SeekBack10	Retrocede 10 segundos.
SeekAhead10	Avança 10 segundos.
ToggleCaptions	Mostra ou oculta as legendas.
getDuration	Obtém a duração total do vídeo (em segundos).
getCurrentPlayTime	Obtém o tempo de reprodução atual (em segundos).

Exemplo: Play

const playBtn = document.getElementById("playBtn");
playBtn.addEventListener("click", () = {
  postMessage({ name: "Play" });
});

Exemplo: Pause

const pauseBtn = document.getElementById("pauseBtn");
pauseBtn.addEventListener("click", () = {
  postMessage({ name: "Pause" });
});

Exemplo: SeekTo

const seekBtn = document.getElementById("seekBtn");
const seekInput = document.getElementById("seekInput");
seekBtn.addEventListener("click", () = {
  postMessage({ name: "SeekTo", value: seekInput.value });
});

Exemplo: AdjustVolume

const volumeSlider = document.getElementById("volumeSlider");
const currentVolumeLabel = document.getElementById("currentVolume");
volumeSlider.addEventListener("change", () = {
  postMessage({ name: "AdjustVolume", value: volumeSlider.value });
  currentVolumeLabel.innerText = volumeSlider.value + "%";
});

Exemplo: SeekBack10

const seekBackBtn = document.getElementById("seekBackBtn");
seekBackBtn.addEventListener("click", () = {
  postMessage({ name: "SeekBack10" });
});

Exemplo: SeekAhead10

const seekForwardBtn = document.getElementById("seekForwardBtn");
seekForwardBtn.addEventListener("click", () = {
  postMessage({ name: "SeekAhead10" });
});

Exemplo: alternar legendas

const setCaptionLanguageSelect = document.getElementById("setCaptionLanguageSelect");
let captionLanguages = [];
setCaptionLanguageSelect.addEventListener("change", (event) = {
  postMessage({ name: "SetCaptionLanguage", value: event.target.value });
});

Exemplo: getDuration

postMessage({ name: "getDuration" });

Exemplo: getCurrentPlayTime

const currentPlayTimeBtn = document.getElementById("currentPlayTimeBtn");
currentPlayTimeBtn.addEventListener("click", () = {
  postMessage({ name: "getCurrentPlayTime" });
});

Adicionando eventos JavaScript

Você também pode escutar os eventos enviados de volta pelo player de mídia para reagir a mudanças de estado e registrar dados analíticos sobre como os usuários interagem com ele. Adicione o seguinte código ao seu JavaScript, junto com os eventos que você deseja rastrear.

document.addEventListener("DOMContentLoaded", () = {
  window.addEventListener("message", (event) = {
    if (event.origin !== childOrigin) {
      console.error("Invalid message origin: " + event.origin);
      return;
    }
    switch (event.data.name) {
      // Handle player events here
    }
  });
});

Lista de eventos disponíveis

Os eventos permitem que sua página responda às mudanças do player em tempo real.

Nome do evento	Descrição
ready	Disparado quando o player de mídia é carregado. As funções só devem ser chamadas depois disso.
playbackPlaying	Disparado quando o vídeo inicia ou é retomado.
playbackPaused	Disparado quando o vídeo é pausado.
playbackEnded	Disparado quando o vídeo termina.
playbackSeeked	Disparado após a mudança da posição de reprodução. Inclui o novo tempo.
captionLanguages	Retorna os idiomas de legenda disponíveis.
videoDuration	Retorna a duração do vídeo (a partir de getDuration).
currentPlayTime	Retorna o tempo atual (a partir de getCurrentPlayTime).
currentPlayTimeInterval	Disparado a cada segundo com o tempo de reprodução atual.

Exemplo: ready

case "ready":
  document.querySelectorAll("button,input").forEach((btn) = {
    btn.disabled = false;
  });
  break;

Exemplo: playbackPlaying

case "playbackPlaying":
  console.log(event.data.name);
  break;

Exemplo: playbackPaused

case "playbackPaused":
  console.log(event.data.name);
  break;

Exemplo: playbackEnded

case "playbackEnded":
  console.log(event.data.name);
  break;

Exemplo: playbackSeeked

case "playbackSeeked":
  console.log("Seeked to: " + event.data.value);
  break;

Exemplo: captionLanguages

case "captionLanguages":
  captionLanguages = event.data.value;
  setCaptionLanguageSelect.disabled = false;
  setCaptionLanguageSelect.innerHTML = captionLanguages
    .map(language = '' + language + '')
    .join("");
  break;

Exemplo: videoDuration

case "videoDuration":
  console.log("Video duration: " + event.data.value);
  const durationField = document.getElementById("videoDuration");
  durationField.value = event.data.value;
  break;

Exemplo: currentPlayTime

case "currentPlayTime":
  const currentTimeField = document.getElementById("currentPlayTime");
  currentTimeField.value = event.data.value;
  break;

Exemplo: currentPlayTimeInterval

case "currentPlayTimeInterval":
  const currentTimeIntervalField = document.getElementById("currentPlayTimeInterval");
  currentTimeIntervalField.value = event.data.value;
  break;