API du lecteur

Vous pouvez piloter le lecteur et écouter ses événements de deux façons : avec le composant web <pellio-player>, ou avec postMessage sur une intégration iframe.

Le composant web

Choisissez Web component dans l’onglet Embed & share d’une vidéo, ou écrivez-le vous-même :

<script src="https://play.pellio.io/assets/embed.js" async></script>
<pellio-player video="VIDEO_ID" muted start="30" color="#e8492f"></pellio-player>

• Attributs : video, ou playlist pour une playlist ; start, color, title ; width et height pour une taille fixe, ou aspect-ratio (16/9 par défaut) ; controls="false" ; et les options autoplay, muted, loop, captions, background, resume et dnt. Le lecteur se charge lorsqu’il apparaît à l’écran ; ajoutez eager pour le charger immédiatement.
• Fenêtre contextuelle : ajoutez popover pour afficher la miniature avec un bouton de lecture, ou placez votre propre texte ou bouton dans la balise ; le lecteur s’ouvre alors dans une visionneuse.
• Méthodes : play(), pause(), seek(seconds), mute(true|false), volume(0–1), rate(n), identify(email).
• Propriétés (lecture seule) : currentTime, duration, paused.
• Événements : chaque événement du lecteur décrit plus bas est émis sur l’élément sous la forme pellio:<event>, avec le message dans event.detail. Les fenêtres contextuelles émettent aussi pellio:open et pellio:close.

const player = document.querySelector('pellio-player');
player.addEventListener('pellio:progress', (e) => console.log(e.detail.percent));
player.seek(42);

Il envoie aussi les événements vidéo à Google Analytics et Tag Manager (voir Statistiques).

Commandes postMessage

const player = document.querySelector('iframe').contentWindow;
player.postMessage({ pellio: true, method: 'play' }, '*');
player.postMessage({ pellio: true, method: 'seek', value: 42 }, '*');

method	value
play, pause	aucune
seek	secondes (si l’avance est bloquée, uniquement dans la partie déjà regardée)
mute	true ou false
volume	de 0 à 1
rate	vitesse de lecture, par exemple 1.5 (dans la limite de vitesse du préréglage)
identify	l’e-mail du spectateur, pour l’identifier dans les statistiques et lui éviter les formulaires

Événements

Le lecteur envoie { pellio: true, id, title, event, currentTime, duration } à la page parente, avec des champs supplémentaires pour certains événements :

event	Quand
ready, play, pause, seeked, timeupdate, ratechange, volumechange	Quand l’élément vidéo les déclenche.
ended, complete	La vidéo est arrivée à la fin (les deux se déclenchent ensemble).
progress	La tête de lecture a dépassé 25, 50, 75 ou 90 % (percent). Il s’agit de la position, pas des secondes uniques regardées.
interaction	Une interaction a été affichée, cliquée ou ignorée (interaction, type, kind : view, click ou skip).
lead	Un formulaire a été envoyé (interaction, email).
chapter	Un chapitre a été choisi (chapter, t).
download	Le spectateur a téléchargé la vidéo.
logo	Le spectateur a cliqué sur le logo du préréglage (href).
transcript	Le panneau de transcription s’est ouvert ou fermé (open).
attention	Une vérification « Still watching? » a été affichée ou a reçu une réponse (prompt).
cast	La diffusion sur un téléviseur a démarré ou s’est arrêtée (state).

window.addEventListener('message', (e) => {
  if (e.data?.pellio && e.data.event === 'progress') console.log(e.data.id, e.data.percent);
});

Les intégrations de playlist (/p/…) envoient les mêmes événements avec un champ playlist, plus select quand une vidéo est choisie. Elles n’acceptent pas de commandes.