API voor de YuJa-mediaspeler – YuJa Helpcentrum

Het videoplatform biedt een JavaScript-API om de ingesloten mediaspeler te beheren en te bewaken met behulp van de functie postMessage. Klik hier voor een voorbeeldbestand.

De JavaScript-functie postMessage toevoegen

Voeg de volgende code toe aan uw JavaScript om opdrachten naar de mediaspeler te sturen:

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

Lijst met beschikbare functies

Met deze functies kunt u de mediaspeler besturen. Elke functie verzendt een opdracht met de functie postMessage.

Functienaam	Beschrijving
Play	Start of hervat het afspelen.
Pause	Pauzeert het afspelen.
SeekTo	Springt naar een specifiek tijdstip in de video (in seconden).
AdjustVolume	Stelt het volumeniveau in (0-100).
SeekBack10	Spoelt 10 seconden terug.
SeekAhead10	Spoelt 10 seconden vooruit.
ToggleCaptions	Toont of verbergt de ondertiteling.
getDuration	Haalt de totale duur van de video op (in seconden).
getCurrentPlayTime	Haalt de huidige afspeeltijd op (in seconden).

Voorbeeld: Play

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

Voorbeeld: Pause

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

Voorbeeld: SeekTo

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

Voorbeeld: AdjustVolume

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

Voorbeeld: SeekBack10

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

Voorbeeld: SeekAhead10

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

Voorbeeld: ondertiteling in- of uitschakelen

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

Voorbeeld: getDuration

postMessage({ name: "getDuration" });

Voorbeeld: getCurrentPlayTime

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

JavaScript-gebeurtenissen toevoegen

U kunt ook luisteren naar gebeurtenissen die de mediaspeler terugstuurt, om te reageren op statuswijzigingen en analysegegevens vast te leggen over hoe gebruikers met de speler omgaan. Voeg de volgende code toe aan uw JavaScript, samen met de gebeurtenissen die u wilt bijhouden.

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

Lijst met beschikbare gebeurtenissen

Dankzij gebeurtenissen kan uw pagina in realtime reageren op wijzigingen in de speler.

Gebeurtenisnaam	Beschrijving
ready	Wordt geactiveerd wanneer de mediaspeler is geladen. Functies mogen pas hierna worden aangeroepen.
playbackPlaying	Wordt geactiveerd wanneer de video start of wordt hervat.
playbackPaused	Wordt geactiveerd wanneer de video wordt gepauzeerd.
playbackEnded	Wordt geactiveerd wanneer de video eindigt.
playbackSeeked	Wordt geactiveerd na het springen naar een ander tijdstip. Bevat de nieuwe tijd.
captionLanguages	Geeft de beschikbare ondertitelingstalen terug.
videoDuration	Geeft de duur van de video terug (van getDuration).
currentPlayTime	Geeft de huidige tijd terug (van getCurrentPlayTime).
currentPlayTimeInterval	Wordt elke seconde geactiveerd met de huidige afspeeltijd.

Voorbeeld: ready

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

Voorbeeld: playbackPlaying

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

Voorbeeld: playbackPaused

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

Voorbeeld: playbackEnded

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

Voorbeeld: playbackSeeked

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

Voorbeeld: captionLanguages

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

Voorbeeld: videoDuration

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

Voorbeeld: currentPlayTime

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

Voorbeeld: currentPlayTimeInterval

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