すべての連携
プレーヤー API と埋め込み
Pellioプレーヤーを操作し、視聴者の行動に反応できます。
できること
- レスポンシブ、固定サイズ、ポップオーバーのライトボックス、または
<pellio-player>Web コンポーネントで埋め込めます。 play()、pause()、seek(seconds)、mute()、volume()、rate()、identify(email)を呼び出せます。play、progress、complete、lead、chapter、interactionなどのイベントを監視できます。autoplay、start、captions、background、resume、seeklock、dntなどのオプションをプレーヤーの URL で設定できます。
設定方法
- Pellio で動画を開き、Embed & share タブを開きます。
- Web component、または iframe なら Responsive を選び、再生オプションを設定します。
- コードをページにコピーします。Web コンポーネントの場合は、
<script src="https://play.pellio.io/assets/embed.js" async></script>と<pellio-player video="VIDEO_ID"></pellio-player>のようになります。 - 要素でイベントを監視します（例：
player.addEventListener('pellio:progress', …)）。 - iframe の場合は、
postMessage({ pellio: true, method: 'play' }, '*')でコマンドを送り、プレーヤーからのmessageイベントを監視します。
補足
- Web コンポーネントは、スクロールして表示範囲に入ったときに読み込まれます。すぐに読み込むには
eagerを追加します。 - 動画のイベントを Google Analytics と Tag Manager にも自動で送信します。
progressイベントは再生位置であり、ユニーク視聴秒数ではありません。identifyまたはemail=オプションを使うと、アナリティクスで視聴者を識別し、メールフォームを省略できます。- 先に、動画が自分のドメインで再生できるか確認してください。詳しくは Only play on my allowed domains（許可したドメインでのみ再生する）をご覧ください。
詳しくはプレーヤー APIと埋め込みとプレーヤーのオプションをご覧ください。
