YuJa-mediasoittimen API – YuJa-ohjekeskus

Videoalusta tarjoaa JavaScript-rajapinnan sulautetun mediasoittimensa hallintaan ja seurantaan postMessage-funktion avulla. Esimerkkitiedoston näet napsauttamalla tästä.

JavaScriptin postMessage-funktion lisääminen

Lisää seuraava koodi JavaScript-koodiisi, jotta voit lähettää komentoja mediasoittimelle:

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

Käytettävissä olevat funktiot

Näillä funktioilla voi hallita mediasoitinta. Jokainen funktio lähettää komennon postMessage-funktion avulla.

Funktion nimi	Kuvaus
Play	Aloittaa tai jatkaa toistoa.
Pause	Keskeyttää toiston.
SeekTo	Siirtyy videon tiettyyn kohtaan (sekunteina).
AdjustVolume	Asettaa äänenvoimakkuuden (0-100).
SeekBack10	Kelaa taaksepäin 10 sekuntia.
SeekAhead10	Kelaa eteenpäin 10 sekuntia.
ToggleCaptions	Näyttää tai piilottaa tekstityksen.
getDuration	Hakee videon kokonaiskeston (sekunteina).
getCurrentPlayTime	Hakee nykyisen toistoajan (sekunteina).

Esimerkki: Play

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

Esimerkki: Pause

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

Esimerkki: SeekTo

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

Esimerkki: AdjustVolume

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

Esimerkki: SeekBack10

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

Esimerkki: SeekAhead10

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

Esimerkki: tekstityksen kytkeminen

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

Esimerkki: getDuration

postMessage({ name: "getDuration" });

Esimerkki: getCurrentPlayTime

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

JavaScript-tapahtumien lisääminen

Voit myös kuunnella mediasoittimen takaisin lähettämiä tapahtumia, jotta voit reagoida tilamuutoksiin ja tallentaa analytiikkaa siitä, miten käyttäjät käyttävät soitinta. Lisää seuraava koodi JavaScript-koodiisi sekä ne tapahtumat, joita haluat seurata.

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

Käytettävissä olevat tapahtumat

Tapahtumien avulla sivusi voi reagoida soittimen muutoksiin reaaliajassa.

Tapahtuman nimi	Kuvaus
ready	Laukeaa, kun mediasoitin on latautunut. Funktioita saa kutsua vasta tämän jälkeen.
playbackPlaying	Laukeaa, kun video alkaa tai jatkuu.
playbackPaused	Laukeaa, kun video keskeytetään.
playbackEnded	Laukeaa, kun video päättyy.
playbackSeeked	Laukeaa kohtaan siirtymisen jälkeen. Sisältää uuden ajankohdan.
captionLanguages	Palauttaa käytettävissä olevat tekstityskielet.
videoDuration	Palauttaa videon keston (getDuration-funktiosta).
currentPlayTime	Palauttaa nykyisen ajankohdan (getCurrentPlayTime-funktiosta).
currentPlayTimeInterval	Laukeaa sekunnin välein ja sisältää nykyisen toistoajan.

Esimerkki: ready

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

Esimerkki: playbackPlaying

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

Esimerkki: playbackPaused

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

Esimerkki: playbackEnded

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

Esimerkki: playbackSeeked

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

Esimerkki: captionLanguages

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

Esimerkki: videoDuration

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

Esimerkki: currentPlayTime

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

Esimerkki: currentPlayTimeInterval

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