Cette documentation décrit comment communiquer avec le player vidéo Digiteka via postMessage. Elle s’adresse aux équipes techniques souhaitant contrôler la vidéo intégrée dans une iframe et réagir à ses événements.
<iframe id="player" src="URL_DU_PLAYER"></iframe>
<script>
// Ecouteur global des messages postés par l'iframe
window.addEventListener('message', function(event) {
// event.source : référence vers la fenêtre de l’iframe
// event.data : contenu du message envoyé (voir section "Événements" ci-dessous)
}, false);
</script>
Pour envoyer une commande au player contenu dans l’iframe, il faut utiliser la méthode postMessage sur la propriété contentWindow de l’iframe.
document.getElementById("idIframe").contentWindow.postMessage(message, '*');idIframe : l’id de votre iframe (par défaut player dans l’exemple ci-dessus)message : chaîne correspondant à une commande définie (voir liste ci-dessous)'*' : permet d’envoyer le message sans restriction d’origine (à adapter selon besoins de sécurité)
| Message | Description |
|---|---|
play |
Lance la lecture de la vidéo (lance le pré-roll si programmé) |
pause |
Met la vidéo en pause |
pause_ |
Met en pause la publicité ou la vidéo |
mute |
Bascule l’état du son de la publicité ou de la vidéo |
mute=1 |
Active le mode muet (vidéo et publicité) |
mute=0 |
Désactive le mode muet (vidéo et publicité) |
getCurrentTime |
Demande la position actuelle de lecture. Le postMessage event=getCurrentTime&time=\f sera émis en réponse (\f sera remplacé par la position dans la vidéo) |
getDuration |
Demande la durée totale de la vidéo. Le postMessage event=getDuration&duration=\f sera émis en réponse. (\f sera remplacé par la durée de la vidéo) |
setCurrentTime=\f |
Positionne la lecture à \f secondes (exemple : setCurrentTime=15) |
Pour capter les événements émis par le player, ajoutez un listener sur window qui écoute les messages postMessage.
window.addEventListener("message", function(event) {
// event.data contient la donnée envoyée par le player
// Exemple de traitement selon event.data...
}, false);
Valeur possible de event.data |
Description |
|---|---|
playerevent_onSetupError_{"code":\d,"message":"\s"} |
Erreur sur le player avec :
|
event=ready |
Player prêt |
event=ended |
Vidéo arrivée à son terme |
event=AdPlay |
Reprise de la lecture de la publicité (mais pas à l’impression) |
event=AdPause |
Publicité mise en pause |
event=AdImpression |
Début de la publicité |
event=AdError |
Erreur de chargement de la publicité |
event=UnSold |
Aucune publicité diffusée |
event=AdVisible |
Pub visible selon critère IAB (50% à l’écran pendant 2s) |
event=AdComplete |
Fin de la publicité (non envoyé si skip) |
event=PrerollsEnded |
Fin des pré-rolls, début de la vidéo principale |
event=paused |
Vidéo mise en pause |
event=played |
Vidéo démarrée ou reprise (après pause ou pub) |
event=resize |
Player redimensionné |
event=timeupdate&time=\1f&duration=\2f |
Mise à jour du temps de lecture (en seconde). Emis lorsque la position du player change.
Exemple : |
event=cpm&value=\v&bidder=\b&creative_w=\cw&creative_h=\ch |
Fournit l'information du CPM associé à la publicité diffusée. Émis à l’impression de la publicité.
Exemple : |
event=cpmLe player Digiteka peut émettre un événement event=cpm afin de fournir une information de CPM associée à la publicité diffusée, en temps réel, via postMessage.
Cet événement est destiné à des usages de reporting tiers et permet d’enrichir les données remontées au-delà des simples impressions.
event=cpm&value=1.23&bidder=ABC&creative_w=640&creative_h=480
creative_w et creative_h correspondent actuellement aux dimensions du player Digiteka (640x480).
Voici un exemple simple où la vidéo est lancée par l’envoi du message play à l’iframe :
<iframe
id="player"
src="//www.ultimedia.com/deliver/generic/iframe/mdtk/01713870/src/5slxzm/zone/2">
</iframe>
<script>
window.addEventListener("message", function(event) {
// Traitez ici les événements reçus de l’iframe
console.log("Message reçu :", event.data);
}, false);
var player = document.getElementById('player');
// Demande de lecture de la vidéo
player.contentWindow.postMessage('play', '*');
</script>
targetOrigin de postMessage.playerevent_onSetupError_ envoient des données JSON incluses dans la chaîne. Vous pouvez utiliser une regex pour extraire ces informations si nécessaire.