Player API

Puedes controlar el reproductor y escuchar sus eventos de dos formas: con el componente web <pellio-player> o con postMessage en una inserción con iframe.

El componente web

Elige Web component en la pestaña Embed & share de un vídeo, o escríbelo tú mismo:

<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, o playlist para una lista de reproducción; start, color, title; width y height para un tamaño fijo, o aspect-ratio (por defecto 16/9); controls="false"; y los indicadores autoplay, muted, loop, captions, background, resume y dnt. El reproductor se carga cuando aparece en pantalla al desplazarse; añade eager para cargarlo al momento.
• Ventana emergente: añade popover para mostrar la miniatura con un botón de reproducir, o pon tu propio texto o botón dentro de la etiqueta, y el reproductor se abrirá en un lightbox.
• Métodos: play(), pause(), seek(seconds), mute(true|false), volume(0–1), rate(n), identify(email).
• Propiedades (solo lectura): currentTime, duration, paused.
• Eventos: cada evento del reproductor que verás más abajo se emite en el elemento como pellio:<event>, con el mensaje en event.detail. Las ventanas emergentes también emiten pellio:open y pellio:close.

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

También envía eventos de vídeo a Google Analytics y Tag Manager (consulta Analíticas).

Comandos 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	ninguno
seek	segundos (si está activado no saltar hacia delante, solo dentro de lo ya visto)
mute	true o false
volume	de 0 a 1
rate	velocidad de reproducción, por ejemplo 1.5 (hasta el límite de velocidad del preajuste)
identify	el email del espectador, para identificarlo en las analíticas y saltarse los formularios

Eventos

El reproductor envía { pellio: true, id, title, event, currentTime, duration } a la página contenedora, con campos adicionales en algunos eventos:

event	Cuándo
ready, play, pause, seeked, timeupdate, ratechange, volumechange	Cuando el elemento de vídeo los dispara.
ended, complete	El vídeo ha llegado al final (los dos se disparan a la vez).
progress	El cabezal de reproducción ha pasado el 25, 50, 75 o 90 % (percent). Es la posición, no los segundos únicos vistos.
interaction	Se ha mostrado, pulsado u omitido una interacción (interaction, type, kind: view, click o skip).
lead	Se ha enviado un formulario (interaction, email).
chapter	Se ha elegido un capítulo (chapter, t).
download	El espectador ha descargado el vídeo.
logo	El espectador ha hecho clic en el logotipo del preajuste (href).
transcript	Se ha abierto o cerrado el panel de transcripción (open).
attention	Se ha mostrado o respondido una comprobación «¿Sigues viéndolo?» (prompt).
cast	Ha empezado o terminado la emisión a una tele (state).

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

Las inserciones de listas de reproducción (/p/…) envían los mismos eventos con un campo playlist, además de select cuando se elige un vídeo. No aceptan comandos.