プレーヤーAPI

プレーヤーの操作やイベントの受け取りには、<pellio-player> Webコンポーネントを使う方法と、iframeの埋め込みで postMessage を使う方法の2つがあります。

Webコンポーネント

動画の Embed & share タブで Web component を選ぶか、自分で記述します。

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

• 属性：video（プレイリストの場合は playlist）、start、color、title。固定サイズにする場合は width と height、または aspect-ratio（初期値は 16/9）。controls="false"。フラグとして autoplay、muted、loop、captions、background、resume、dnt。プレーヤーは画面内にスクロールされたときに読み込まれます。すぐに読み込むには eager を追加します。
• ポップオーバー：popover を追加すると再生ボタン付きのサムネイルが表示されます。タグの中に独自のテキストやボタンを入れることもでき、クリックするとプレーヤーがライトボックスで開きます。
• メソッド：play()、pause()、seek(seconds)、mute(true|false)、volume(0–1)、rate(n)、identify(email)。
• プロパティ（読み取り専用）：currentTime、duration、paused。
• イベント：下記のプレーヤーイベントはすべて、要素上で pellio:<event> としてディスパッチされます。メッセージは event.detail に入ります。ポップオーバーでは pellio:open と pellio:close もディスパッチされます。

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

動画のイベントはGoogle AnalyticsとTag Managerにも送信されます（アナリティクスを参照）。

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	なし
seek	秒数（早送り禁止が有効な場合は、視聴済みの範囲内のみ）
mute	true または false
volume	0〜1
rate	再生速度。例：1.5（プリセットの速度上限まで）
identify	視聴者のメールアドレス。アナリティクスで視聴者を識別し、フォームをスキップします

イベント

プレーヤーは親ページに { pellio: true, id, title, event, currentTime, duration } を送信します。一部のイベントには追加のフィールドがあります。

event	タイミング
ready、play、pause、seeked、timeupdate、ratechange、volumechange	video要素がイベントを発生させたとき。
ended、complete	動画が最後まで再生されたとき（両方が同時に発生します）。
progress	再生位置が25%、50%、75%、90%を通過したとき（percent）。ユニーク視聴秒数ではなく、再生位置に基づきます。
interaction	インタラクションが表示、クリック、スキップされたとき（interaction、type、kind：view、click、skip）。
lead	フォームが送信されたとき（interaction、email）。
chapter	チャプターが選ばれたとき（chapter、t）。
download	視聴者が動画をダウンロードしたとき。
logo	視聴者がプリセットのロゴをクリックしたとき（href）。
transcript	文字起こしパネルが開閉したとき（open）。
attention	「Still watching?」の確認が表示されたとき、または応答されたとき（prompt）。
cast	テレビへのキャストが開始または停止したとき（state）。

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

プレイリストの埋め込み（/p/…）も同じイベントを playlist フィールド付きで送信し、動画が選ばれたときには select も送信します。プレイリストの埋め込みはコマンドを受け付けません。