s-c edited this page Mar 5, 2014 · 2 revisions

iFrame API

The iFrame API enables the communication with the Klynt player using the HTML5 cross-origin communication API postMessage.

More specifically, it allows :

  • Sending commands to the player.
  • Receiving notifications from the player.
  • Sending requests to the player and receiving a response.


Sending commands

The iframe API allows sending the player commands that it executes.


The syntax to send a command to the player is the following:


where commandName is the name of the command and param is an optional parameter.

Available commands

Command Params Description / Example
openUrl url Opens a link
openWidget widgetId Opens the widget defined by its id
share Shows a modal view with sharing options
toggleMute Toggles between the mute and unmute states of the player
mute Mutes the player
unmute Unmutes the player
toggleFullScreen Toggles between the fullscreen state and normal state of the player
enterFullScreen Enters the fullscreen state in browsers that support the fullscreen functionality
exitFullScreen Exists the fullscreen state
togglePlayPause Toggles between the play and pause states of the player
play Starts or resumes playing the current sequence
pause Pauses the current sequence
openSequence seqId Opens the sequence defined by its id*
openOverlay seqId Opens the sequence defined by its id* as an overlay
closeOverlay Closes the current overlay

* The id of a sequence can be found in its properties panel in the storyboard. Alternatively, the sequence can be identified by its alias instead of its id. The alias can be found in the url of the navigator when the sequence is displayed in the player.

Listening to notifications


The syntax to send a request to the player is the following:

KlyntAPI.notifications.addEventListener(eventName, eventHandler);

where eventName is the name of the event and eventHandler is a callback function that will be called when the event is received.

Available notifications

There is only one built-in notification (fullscreen) in the current version of the player, but other notifications may be implemented in future versions.

Sending requests

Requests are like commands except that they have a callback function as a parameter. This callback is called when the player finishes processing the request.


The syntax to send a request to the player is the following:

KlyntAPI.query(requestName, param, responseHandler);

where requestName is the name of the request, param is a parameter, and responseHandler is a callback function that will be called when the response is received.

Available requests

No built-in requests are implemented in the current version of the player, but they may be implemented in future versions.


First, import KlyntAPI.js into the iframe:

<script src="Player/js/api/KlyntAPI.js" type="text/javascript"></script>

Sending commands


<button onclick="KlyntAPI.commands.openSequence({
	targetSequence: 'Sequence_2',
	transition: 'fade'
});">Sequence 2</button>

Listening to notifications


KlyntAPI.notifications.addEventListener('fullscreen', function (event) {

Sending requests


KlyntAPI.query('sequenceName', {}, function (result) {
	console.log('Current sequence: ' + result);


Communication with an iframe contained in a sequence

In this example, a custom iframe is added to a sequence in the Klynt editor. This iframe contains a basic menu that can play/pause the player.

<!DOCTYPE html>
		<title>An html page that embeds a klynt Player</title>
		<script src="Player/js/api/KlyntAPI.js" type="text/javascript"></script>
		<button onclick="KlyntAPI.commands.togglePlayPause();">Play/Pause</button>
			KlyntAPI.notifications.addEventListener('fullscreen', function (event) {
				console.log("Fullscreen changed!");
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.