このページでは、messageCallbackを使用してビデオの進行に関連するイベントを受信する方法について説明します。
インストール例
以下のコードをページの共通レイアウトにインストールします。
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  const messageCallback = {
            DETAIL_ACTIVE: (payload) => {
            //This messageCallback event indicates that Shortform video started to play
                console.log(`(DETAIL_ACTIVE) shortsId:${payload.shorts.shortsId}`, payload)
            },
            DETAIL_VIEWING_SECONDS: (payload) => {
            //this messageCallback event fired every 1~3 seconds. (per 1seconds until 3s, and per 3seconds afterwards)
                console.log(`(DETAIL_VIEWING_SECONDS) shortsId:${payload.shorts.shortsId}`, payload)
            },
            DETAIL_ON_PLAYER_DISMISS: () => {
            //This messageCallback event indicates that Shortform video dismissed from screen
                console.log(`(DETAIL_ON_PLAYER_DISMISS)`)
            },
        }
  
  cloud.shoplive.initShortform({ 
    accessKey: 'YOUR ACCESS KEY HERE', 
    messageCallback: messageCallback 
  });
</script>
メッセージとペイロード
以下は、messageCallback設定で直接処理できるビデオ進行に関連するイベントのリストです。
DETAIL_ACTIVE
ショートフォームの詳細をアクティブにするとき(フィード内でのショートフォームのビデオ再生)
DETAIL_ON_PLAYER_DISMISS
ショートフォームの詳細を閉じるとき(フィード内でのショートフォームのビデオ再生)
DETAIL_VIEWING_SECONDS
ショートフォームの詳細ビデオを視聴しているときに3秒ごとにこのイベントが発生します
| Payload | Type | 
|---|
| shorts | Shorts | 
| videoCurrentTime | number |