概要

ライブチャプタータグは、ライブの目次（チャプター）を自動生成する機能です。ライブの目次は、ライブ配信中に商品が紹介されたタイミング（ライブ配信ページで「ライブに表示する商品」の「CTA」が「ON」になったタイミング）を区切りとし、再生位置と商品名を見出しとして作成します。アーカイブの視聴者は、自動生成された目次をクリックすることでその商品が紹介された位置から再生することができるようになります。

設定方法

ライブ視聴ページ（ライブ動画タグが埋め込まれているページ）に下記のタグを埋め込んでください。

<div class="tagfab-chapter"></div>

ライブチャプタータグは、ライブ動画タグと同じライブIDを参照します。

スタイルのカスタマイズ方法

ライブチャプタータグは、ライブ視聴ページが表示されると以下のような HTML コードに展開されます。

<div class="tagfab-chapter">
  <div class="tagfab-chapter-list">
    <div class="tagfab-chapter-item">
      <span class="tagfab-chapter-item-time">00:22</span>
      <span class="tagfab-chapter-item-name">シャツワンピース</span>
    </div>
    <div class="tagfab-chapter-item">
      <span class="tagfab-chapter-item-time">00:34</span>
      <span class="tagfab-chapter-item-name">チュニック</span>
    </div>
    <div class="tagfab-chapter-item">
      <span class="tagfab-chapter-item-time">00:46</span>
      <span class="tagfab-chapter-item-name">セーター</span>
    </div>
    <div class="tagfab-chapter-item">
      <span class="tagfab-chapter-item-time">00:57</span>
      <span class="tagfab-chapter-item-name">ワンショルダー</span>
    </div>
  </div>
</div>

ライブチャプタータグが生成する HTML コードはデフォルトではスタイルが設定されてません。ライブチャプタータグをご利用頂く際はお客様側でスタイルを設定して頂く必要がございます。以下にスタイルの設定例を示しますので、こちらを参考に設定をお願いいたします。

.tagfab-chapter {
  padding-top: 30px;
}
.tagfab-chapter-item {
  padding: 10px;
  cursor: pointer;
}
.tagfab-chapter-item-time {
  margin-right: 5px;
}
.tagfab-chapter-item-name {
  font-weight: bold;
}

特記事項

ライブチャプタータグが作成する目次は「CTA」を「ON」にしたタイミングのみです。「CTA」を「OFF」にしたタイミングでは目次は作成しません。
同じ商品で複数回「CTA」を「ON」にした場合、最後に「CTA」を「ON」にしたタイミングの目次のみ作成されます。