API del reproductor multimedia de YuJa – Centro de Ayuda de YuJa

La plataforma de video proporciona una API de JavaScript para controlar y supervisar su reproductor multimedia integrado mediante la función postMessage. Para ver un archivo de ejemplo, haga clic aquí.

Cómo agregar la función postMessage de JavaScript

Agregue el siguiente código a su JavaScript para enviar comandos al reproductor multimedia:

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

Lista de funciones disponibles

Estas funciones se pueden usar para controlar el reproductor multimedia. Cada función envía un comando mediante la función postMessage.

Nombre de la función	Descripción
Play	Inicia o reanuda la reproducción.
Pause	Pausa la reproducción.
SeekTo	Salta a un momento específico del video (en segundos).
AdjustVolume	Establece el nivel de volumen (0-100).
SeekBack10	Retrocede 10 segundos.
SeekAhead10	Avanza 10 segundos.
ToggleCaptions	Muestra u oculta los subtítulos.
getDuration	Obtiene la duración total del video (en segundos).
getCurrentPlayTime	Obtiene el tiempo de reproducción actual (en segundos).

Ejemplo: Play

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

Ejemplo: Pause

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

Ejemplo: SeekTo

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

Ejemplo: AdjustVolume

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

Ejemplo: SeekBack10

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

Ejemplo: SeekAhead10

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

Ejemplo: alternar subtítulos

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

Ejemplo: getDuration

postMessage({ name: "getDuration" });

Ejemplo: getCurrentPlayTime

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

Cómo agregar eventos de JavaScript

También puede escuchar los eventos que envía el reproductor multimedia para reaccionar a los cambios de estado y registrar analíticas sobre cómo interactúan los usuarios con él. Agregue el siguiente código a su JavaScript, junto con los eventos que desee 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 disponibles

Los eventos permiten que su página responda a los cambios del reproductor en tiempo real.

Nombre del evento	Descripción
ready	Se activa cuando el reproductor multimedia se ha cargado. Las funciones solo deben llamarse después de este evento.
playbackPlaying	Se activa cuando el video se inicia o se reanuda.
playbackPaused	Se activa cuando el video se pausa.
playbackEnded	Se activa cuando el video termina.
playbackSeeked	Se activa después de desplazarse a otro punto del video. Incluye el nuevo tiempo.
captionLanguages	Devuelve los idiomas de subtítulos disponibles.
videoDuration	Devuelve la duración del video (de getDuration).
currentPlayTime	Devuelve el tiempo actual (de getCurrentPlayTime).
currentPlayTimeInterval	Se activa cada segundo con el tiempo de reproducción actual.

Ejemplo: ready

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

Ejemplo: playbackPlaying

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

Ejemplo: playbackPaused

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

Ejemplo: playbackEnded

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

Ejemplo: playbackSeeked

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

Ejemplo: captionLanguages

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

Ejemplo: videoDuration

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

Ejemplo: currentPlayTime

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

Ejemplo: currentPlayTimeInterval

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