Player API

You can control the player and listen for its events in two ways: the <pellio-player> web component, or postMessage with an iframe embed.

The web component

Choose Web component in a video’s Embed & share tab, or write it yourself:

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

• Attributes: video, or playlist for a playlist; start, color, title; width and height for a fixed size, or aspect-ratio (default 16/9); controls="false"; and the flags autoplay, muted, loop, captions, background, resume and dnt. The player loads when it scrolls into view; add eager to load it straight away.
• Popover: add popover to show the thumbnail with a play button, or put your own text or button inside the tag, and the player opens in a lightbox.
• Methods: play(), pause(), seek(seconds), mute(true|false), volume(0–1), rate(n), identify(email).
• Properties (read only): currentTime, duration, paused.
• Events: every player event below is dispatched on the element as pellio:<event>, with the message in event.detail. Popovers also dispatch pellio:open and pellio:close.

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

It also sends video events to Google Analytics and Tag Manager (see Analytics).

postMessage commands

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

method	value
play, pause	none
seek	seconds (with no skipping ahead on, only within what’s been watched)
mute	true or false
volume	0 to 1
rate	playback speed, for example 1.5 (up to the preset’s speed limit)
identify	the viewer’s email, to name them in analytics and skip forms

Events

The player posts { pellio: true, id, title, event, currentTime, duration } to the parent page, with extra fields for some events:

event	When
ready, play, pause, seeked, timeupdate, ratechange, volumechange	As the video element fires them.
ended, complete	The video reached the end (both fire together).
progress	The playhead passed 25, 50, 75 or 90% (percent). This is position, not unique seconds watched.
interaction	An interaction was shown, clicked or skipped (interaction, type, kind: view, click or skip).
lead	A form was submitted (interaction, email).
chapter	A chapter was chosen (chapter, t).
download	The viewer downloaded the video.
logo	The viewer clicked the preset’s logo (href).
transcript	The transcript panel opened or closed (open).
attention	A “Still watching?” check was shown or answered (prompt).
cast	Casting to a TV started or stopped (state).

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

Playlist embeds (/p/…) post the same events with a playlist field, plus select when a video is chosen. They don’t accept commands.