The YuJa Enterprise Video Platform provides the option to customize the functions of its video player and listen for certain events with the use of an API. This API uses the postMessage function built into JavaScript to enable sending and receiving messages between an iframe. If you would like to view and download an example file, please click here.
Adding the JavaScript postMessage Function
To use the available functions provided by this API, you will need to copy and paste the code below into your JavaScript.
function postMessage(data) {
console.log(data);
iframe.contentWindow.postMessage(data, childOrigin);}
List of Available Functions
Below is a detailed breakdown of each function offered in the API. You can copy the code for each function and paste it into your JavaScript.
| Function Name | Description |
| Play | Starts/Resumes playback. |
| Pause | Pauses playback. |
| SeekTo | Jump to a specified time in the video. (The value entered must be in seconds.) |
| AdjustVolume | Set the volume to a specified value (0-100). |
| SeekBack10 | The video jumps back by 10 seconds. |
| SeekAhead10 | The video jumps forward by 10 seconds. |
| ToggleCaptions | Show/Hide captions. |
| getDuration | Retrieves the total length of the video. The value is expressed in seconds. |
| getCurrentPlayTime | Retrieves the current play time of the video. The value is expressed in seconds. |
Play
const playBtn = document.getElementById("playBtn");
playBtn.addEventListener("click", () => {
postMessage({ name: "Play" });
});
Pause
const pauseBtn = document.getElementById("pauseBtn");
pauseBtn.addEventListener("click", () => {
postMessage({ name: "Pause" });
});
Seek To
const seekBtn = document.getElementById("seekBtn");
const seekInput = document.getElementById("seekInput");
seekBtn.addEventListener("click", () => {
postMessage({ name: "SeekTo", value: seekInput.value });
});
Adjust Volume
const volumeSlider = document.getElementById("volumeSlider");
const currentVolumeLabel = document.getElementById("currentVolume");
volumeSlider.addEventListener("change", () => {
postMessage({
name: "AdjustVolume",
value: volumeSlider.value,
});
currentVolumeLabel.innerText = volumeSlider.value + "%";
});
Seek Back
const seekBackBtn = document.getElementById("seekBackBtn");
seekBackBtn.addEventListener("click", () => {
postMessage({ name: "SeekBack10" });
});
Seek Ahead
const seekForwardBtn = document.getElementById("seekForwardBtn");
seekForwardBtn.addEventListener("click", () => {
postMessage({ name: "SeekAhead10" });
});
Toggle Captions
const setCaptionLanguageSelect = document.getElementById(
"setCaptionLanguageSelect"
);
let captionLanguages = [];
setCaptionLanguageSelect.addEventListener("change", (event) => {
postMessage({
name: "SetCaptionLanguage",
value: event.target.value,
});
});
getDuration
postMessage({ name: "getDuration" });
break;
getCurrentPlayTime
const currentPlayTimeBtn = document.getElementById("currentPlayTimeBtn");
currentPlayTimeBtn.addEventListener("click", () => {
postMessage({ name: "getCurrentPlayTime" });
});
Adding JavaScript Events
To use the available events provided by this API, you will need to copy and paste the code below into your JavaScript.
document.addEventListener("DOMContentLoaded", (event) => {
// Respond to mesages sent from the YuJa player.
window.addEventListener("message", (event) => {
// Only listen for messages from the YuJa player's origin
if (event.origin !== childOrigin) {
console.error(
"Invalid message origin: " +
event.origin +
", " +
childOrigin
);
return;
}
switch (event.data.name) {
// Add the events here.
}
List of Available Events
Below is a detailed breakdown of each event offered in this API. You can copy the code for each event and paste it into your JavaScript.
| Event Name | Description |
| Ready | Triggered when player has finished loading and playback can be started. Functions should not be called until this event has been triggered. |
| playbackSeeked | Triggered when the player jumps to a specified time. Event data includes the time the player jumped to. |
| PlaybackPlaying | Triggered when playback has begun/resumed (e.g. "Play" message sent). |
| playbackPaused | Triggered when playback has paused (e.g. "Pause" message sent). |
| PlaybackEnd | Triggered when the video has reached the end. |
| captionLanguages | Triggered when captions have finished loading. Event data includes the available caption languages. |
| videoDuration | Triggered when the function getDuration is called. |
| currentPlayTimeInterval | Triggered automatically every 1 second to retrieve the current time of the video. |
| currentPlayTime | Triggered when the function getCurrentPlayTime is called. |
Ready
case "ready": // Player has loaded and ready for playback
document
.querySelectorAll("button,input")
.forEach((btn) => {
btn.disabled = false;
});
break;
playbackSeeked
case "playbackSeeked": // Player seeked to time (in seconds) specified
console.log("Seeked to: " + event.data.value);
break;
PlaybackPlaying
case "playbackPlaying": // Playback has begun/resumed (ex. "play" message sent)
console.log(event.data.name);
break;
PlaybackPaused
case "playbackPaused": // Playback has paused (ex. "pause" message sent)
console.log(event.data.name);
break;
PlaybackEnded
case "playbackEnded": /* Player has reached the end of the video and the restart button
is showing */
console.log(event.data.name);
break;
CaptionLanguages
case "captionLanguages": /* When playback has first begun, player sends list of caption
languages (ex. ["English", "Dutch"])*/
captionLanguages = event.data.value;
setCaptionLanguageSelect.disabled = false;
setCaptionLanguageSelect.innerHTML = captionLanguages
.map(language => '<option value="' + language + '">' +
language + '</option>')
.join("");
break;
videoDuration
case "videoDuration":
console.log("Video duration: " + event.data.value);
const durationField = document.getElementById("videoDuration");
durationField.value = event.data.value;
break;
currentPlayTimeInterval
case "currentPlayTimeInterval":
const currentTimeIntervalField = document.getElementById("currentPlayTimeInterval");
currentTimeIntervalField.value = event.data.value;
break;
currentPlayTime
case "currentPlayTime":
const currentTimeField = document.getElementById("currentPlayTime");
currentTimeField.value = event.data.value;
break;