API du lecteur multimédia YuJa – Centre d'aide YuJa

La plateforme vidéo fournit une API JavaScript permettant de contrôler et de surveiller son lecteur multimédia intégré à l'aide de la fonction postMessage. Pour obtenir un exemple de fichier, cliquez ici.

Ajout de la fonction JavaScript postMessage

Ajoutez le code suivant à votre JavaScript pour envoyer des commandes au lecteur multimédia :

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

Liste des fonctions disponibles

Ces fonctions permettent de contrôler le lecteur multimédia. Chaque fonction envoie une commande à l'aide de la fonction postMessage.

Nom de la fonction	Description
Play	Démarre ou reprend la lecture.
Pause	Met la lecture en pause.
SeekTo	Passe à un moment précis de la vidéo (en secondes).
AdjustVolume	Définit le niveau du volume (0-100).
SeekBack10	Recule de 10 secondes.
SeekAhead10	Avance de 10 secondes.
ToggleCaptions	Affiche ou masque les sous-titres.
getDuration	Obtient la durée totale de la vidéo (en secondes).
getCurrentPlayTime	Obtient le temps de lecture actuel (en secondes).

Exemple : Play

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

Exemple : Pause

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

Exemple : SeekTo

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

Exemple : AdjustVolume

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

Exemple : SeekBack10

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

Exemple : SeekAhead10

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

Exemple : activer ou masquer les sous-titres

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

Exemple : getDuration

postMessage({ name: "getDuration" });

Exemple : getCurrentPlayTime

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

Ajout d'événements JavaScript

Vous pouvez également écouter les événements renvoyés par le lecteur multimédia afin de réagir aux changements d'état et d'enregistrer des données analytiques sur la façon dont les utilisateurs interagissent avec celui-ci. Ajoutez le code suivant à votre JavaScript, ainsi que les événements que vous souhaitez suivre.

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
    }
  });
});

Liste des événements disponibles

Les événements permettent à votre page de réagir en temps réel aux changements du lecteur.

Nom de l'événement	Description
ready	Se déclenche lorsque le lecteur multimédia est chargé. Les fonctions ne doivent être appelées qu'après cet événement.
playbackPlaying	Se déclenche lorsque la vidéo démarre ou reprend.
playbackPaused	Se déclenche lorsque la vidéo est mise en pause.
playbackEnded	Se déclenche à la fin de la vidéo.
playbackSeeked	Se déclenche après un déplacement dans la vidéo. Inclut le nouveau temps.
captionLanguages	Renvoie les langues de sous-titres disponibles.
videoDuration	Renvoie la durée de la vidéo (à partir de getDuration).
currentPlayTime	Renvoie le temps actuel (à partir de getCurrentPlayTime).
currentPlayTimeInterval	Se déclenche chaque seconde avec le temps de lecture actuel.

Exemple : ready

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

Exemple : playbackPlaying

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

Exemple : playbackPaused

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

Exemple : playbackEnded

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

Exemple : playbackSeeked

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

Exemple : captionLanguages

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

Exemple : videoDuration

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

Exemple : currentPlayTime

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

Exemple : currentPlayTimeInterval

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