Player API and embeds

What you can do

• Embed responsively, at a fixed size, as a popover lightbox or with the <pellio-player> web component.
• Call play(), pause(), seek(seconds), mute(), volume(), rate() and identify(email).
• Listen for events such as play, progress, complete, lead, chapter and interaction.
• Set options in the player URL, like autoplay, start, captions, background, resume, seeklock and dnt.

Set it up

1. Open a video in Pellio and go to its Embed & share tab.
2. Choose Web component, or Responsive for an iframe, and set the playback options.
3. Copy the code into your page. For the web component it looks like <script src="https://play.pellio.io/assets/embed.js" async></script> plus <pellio-player video="VIDEO_ID"></pellio-player>.
4. Listen for events on the element, for example player.addEventListener('pellio:progress', …).
5. With an iframe, send commands with postMessage({ pellio: true, method: 'play' }, '*') and listen for message events from the player.

Good to know

• The web component loads when it scrolls into view. Add eager to load it straight away.
• It also sends video events to Google Analytics and Tag Manager automatically.
• The progress event is playhead position, not unique seconds watched.
• Use identify or the email= option to name viewers in analytics and skip email forms.
• Check the video can play on your domain first: see Only play on my allowed domains.

Full guides: Player API and Embedding and player options.