Player-API

Du kannst den Player auf zwei Arten steuern und auf seine Ereignisse reagieren: mit der Web-Component <pellio-player> oder per postMessage bei einer iframe-Einbettung.

Die Web-Component

Wähle im Tab Embed & share eines Videos Web component oder schreib den Code selbst:

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

• Attribute: video oder playlist für eine Playlist; start, color, title; width und height für eine feste Größe oder aspect-ratio (Standard 16/9); controls="false"; sowie die Flags autoplay, muted, loop, captions, background, resume und dnt. Der Player lädt, sobald er in den sichtbaren Bereich scrollt; mit eager lädt er sofort.
• Popover: Füge popover hinzu, um das Vorschaubild mit Play-Button anzuzeigen, oder setz deinen eigenen Text oder Button in das Tag – der Player öffnet sich dann in einer Lightbox.
• Methoden: play(), pause(), seek(seconds), mute(true|false), volume(0–1), rate(n), identify(email).
• Eigenschaften (nur lesbar): currentTime, duration, paused.
• Ereignisse: Jedes der unten aufgeführten Player-Ereignisse wird am Element als pellio:<event> ausgelöst, mit der Nachricht in event.detail. Popovers lösen zusätzlich pellio:open und pellio:close aus.

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

Außerdem sendet sie Video-Ereignisse an Google Analytics und den Tag Manager (siehe Analysen).

postMessage-Befehle

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

method	value
play, pause	keiner
seek	Sekunden (bei aktivem „kein Vorspulen“ nur innerhalb des bereits Angesehenen)
mute	true oder false
volume	0 bis 1
rate	Wiedergabegeschwindigkeit, zum Beispiel 1.5 (bis zum Geschwindigkeitslimit der Voreinstellung)
identify	die E-Mail-Adresse des Zuschauers, um ihn in den Analysen zu benennen und Formulare zu überspringen

Ereignisse

Der Player sendet { pellio: true, id, title, event, currentTime, duration } an die übergeordnete Seite, bei manchen Ereignissen mit zusätzlichen Feldern:

event	Wann
ready, play, pause, seeked, timeupdate, ratechange, volumechange	Sobald das Video-Element sie auslöst.
ended, complete	Das Video hat das Ende erreicht (beide werden zusammen ausgelöst).
progress	Der Abspielkopf hat 25, 50, 75 oder 90 % passiert (percent). Das ist die Position, nicht die eindeutig angesehenen Sekunden.
interaction	Eine Interaktion wurde angezeigt, angeklickt oder übersprungen (interaction, type, kind: view, click oder skip).
lead	Ein Formular wurde abgeschickt (interaction, email).
chapter	Ein Kapitel wurde ausgewählt (chapter, t).
download	Der Zuschauer hat das Video heruntergeladen.
logo	Der Zuschauer hat auf das Logo der Voreinstellung geklickt (href).
transcript	Das Transkript-Panel wurde geöffnet oder geschlossen (open).
attention	Eine „Still watching?“-Abfrage wurde angezeigt oder beantwortet (prompt).
cast	Das Casting auf einen Fernseher wurde gestartet oder beendet (state).

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

Playlist-Einbettungen (/p/…) senden dieselben Ereignisse mit einem Feld playlist, dazu select, wenn ein Video ausgewählt wird. Befehle nehmen sie nicht entgegen.