YuJa Media Player API – YuJa Help Center

The Video Platform provides a JavaScript API for controlling and monitoring its embedded media player using the postMessage function. For an example file, click here.

Adding the JavaScript postMessage Function

Add the following code to your JavaScript to send commands to the media player:

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

List of Available Functions

These functions can be used to control the media player. Each function sends a command using the postMessage function.

Function Name	Description
Play	Starts or resumes playback.
Pause	Pauses playback.
SeekTo	Jumps to a specific time in the video (in seconds).
AdjustVolume	Sets volume level (0-100).
SeekBack10	Rewinds by 10 seconds.
SeekAhead10	Fast-forwards by 10 seconds.
ToggleCaptions	Shows or hides captions.
getDuration	Gets total video duration (in seconds).
getCurrentPlayTime	Gets the current play time (in seconds).

Example: Play

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

Example: Pause

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

Example: SeekTo

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

Example: AdjustVolume

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

Example: SeekBack10

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

Example: SeekAhead10

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

Example: Toggle Captions

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

Example: getDuration

postMessage({ name: "getDuration" });

Example: getCurrentPlayTime

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

Adding JavaScript Events

You can also listen to events sent back from the media player to react to state changes and record analytics on how users interact with it. Add the following code to your JavaScript, along with the events you'd like to track.

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

List of Available Events

Events enable your page to respond to player changes in real-time.

Event Name	Description
ready	Triggers when the media player has loaded. Functions should only be called after this.
playbackPlaying	Triggers when video starts or resumes.
playbackPaused	Triggers when video is paused.
playbackEnded	Triggers when the video ends.
playbackSeeked	Triggers after seeking. Includes new time.
captionLanguages	Returns available caption languages.
videoDuration	Returns video duration (from getDuration).
currentPlayTime	Returns current time (from getCurrentPlayTime).
currentPlayTimeInterval	Triggers every second with the current play time.

Example: ready

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

Example: playbackPlaying

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

Example: playbackPaused

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

Example: playbackEnded

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

Example: playbackSeeked

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

Example: captionLanguages

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

Example: videoDuration

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

Example: currentPlayTime

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

Example: currentPlayTimeInterval

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