Controlling the player with events / actions

The player can communicate with the page that embeds it (and vice versa) through an event system.

This allows the client to directly interact with the player (such as controlling its appearance or functionality) and to receive information (like the zoom level, for example).

How it works

Communication between the player and its client is done via https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage .

The client must specify a source that must be valid for the event to be transmitted to the player

Valid sources

‘dam’

The client must also specify a name so that the message is correctly interpreted. The different valid event names and their purposes are described in the table below.

Reference of events managed (listened to) by the players

Event	Payload	Description	Players cibles

Event	Payload	Description	Players cibles
`getMediaInfos`	`{ source: 'dam', name: 'getMediaInfos' }`	Request information for viewing the current media	Image
`playerTogglePlayPause`	`{ source: 'dam', action: 'playerTogglePlayPause' }`	For a video player, pause the media if it is currently playing; if it is not playing (paused, ended, etc.), switch it to play.	video / audio
`playerPlay`	`{ source: 'dam', action: 'playerPlay' }`	For a video player, start playing the media. Please note that browsers restrict to start playing a video without user input or with a volume > 0. Please read this documentation if you are having trouble with the playerPlay event.	video / audio
`playerPause`		For a video player, pause the media.	video / audio
`playerSeekTo`		For a video player, set the playback to the requested position.	video / audio
`playerFullscreen`		For a video player, set the playback to the requested position.	All
`playerChromeless`		Toggle the player to or from chromeless mode. In chromeless mode, buttons and action bars are removed, leaving only the media display.	All
`playerMute`		For a video player, mute the media.	video / audio
`playerUnmute`		For a video player, unmute the media.	video / audio
`playerSetVolume`		For a video player, set the media volume to the requested level.	video / audio

Sample code

Reference of events sent by the players

Event	Payload	Description	Players

Event	Payload	Description	Players
`mediaInfos`		"Sent following: the reception of getMediaInfos a media move a zoom on the media exiting fullscreen mode See: https://crossmedia.atlassian.net/browse/WXM-15239 for a full description of the signature."	Image
`PlayerDragenter`		"Sent when the component captures a native dragenter event. We simply relay the information to the integrator."	Image
`PlayerDragleave`		"Sent when the component captures a native dragleave event. We simply relay the information to the integrator."	Image
`PlayerLoaded`		Player is loaded	All
`PlayerFullyLoaded`	Par défaut aucun. Dans le cas d’un player video on envoie des infos sur le média :	"The player and its media are loaded. The image player sends this event when the image is loaded into the player's DOM, while the video player sends it when `this.player.getDuration()` is greater than zero. Other players send it simultaneously with `PlayerLoaded`."	All
`PlayerState`		"In the case of a video player, it sends the media's state with each change of state."	video
`PlayerVolume`		Dans le cas d’un player video, envoie le niveau de volume à chaque changement de volume.	video
`PlayerProgress`		"In the case of a video player, it sends the volume level with each change in volume."	video
`PlayerFullscreen`		"Event sent on fullscreen enter/leave. Note: This event may not function correctly with v1 players. Consider implementing a solution at the launcher level, such as: `iframe.contentWindow.document.addEventListener('fullscreenchange', ...)`."	All

Sample code for receiving a player message