API do player

Você pode controlar o player e ouvir os eventos dele de duas formas: com o web component <pellio-player> ou com postMessage em uma incorporação via iframe.

O web component

Escolha Web component na aba Embed & share de um vídeo, ou escreva você mesmo:

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

• Atributos: video, ou playlist para uma playlist; start, color, title; width e height para um tamanho fixo, ou aspect-ratio (padrão 16/9); controls="false"; e os sinalizadores autoplay, muted, loop, captions, background, resume e dnt. O player carrega quando entra na área visível; adicione eager para carregá-lo de imediato.
• Popover: adicione popover para mostrar a miniatura com um botão de play, ou coloque seu próprio texto ou botão dentro da tag, e o player abre em um lightbox.
• Métodos: play(), pause(), seek(seconds), mute(true|false), volume(0–1), rate(n), identify(email).
• Propriedades (somente leitura): currentTime, duration, paused.
• Eventos: cada evento do player listado abaixo é disparado no elemento como pellio:<event>, com a mensagem em event.detail. Os popovers também disparam pellio:open e pellio:close.

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

Ele também envia eventos de vídeo para o Google Analytics e o Tag Manager (veja Análises).

Comandos via 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	nenhum
seek	segundos (com o bloqueio de avanço ativado, só dentro do que já foi assistido)
mute	true ou false
volume	de 0 a 1
rate	velocidade de reprodução, por exemplo 1.5 (até o limite de velocidade da predefinição)
identify	o e-mail do espectador, para identificá-lo nas análises e pular formulários

Eventos

O player envia { pellio: true, id, title, event, currentTime, duration } para a página pai, com campos extras em alguns eventos:

event	Quando
ready, play, pause, seeked, timeupdate, ratechange, volumechange	Quando o elemento de vídeo os dispara.
ended, complete	O vídeo chegou ao fim (os dois disparam juntos).
progress	A posição de reprodução passou de 25, 50, 75 ou 90% (percent). Isso é a posição, não os segundos únicos assistidos.
interaction	Uma interação foi exibida, clicada ou pulada (interaction, type, kind: view, click ou skip).
lead	Um formulário foi enviado (interaction, email).
chapter	Um capítulo foi escolhido (chapter, t).
download	O espectador baixou o vídeo.
logo	O espectador clicou no logo da predefinição (href).
transcript	O painel de transcrição foi aberto ou fechado (open).
attention	Uma verificação “Still watching?” foi exibida ou respondida (prompt).
cast	A transmissão para a TV começou ou parou (state).

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

As incorporações de playlist (/p/…) enviam os mesmos eventos com um campo playlist, além de select quando um vídeo é escolhido. Elas não aceitam comandos.