概要
ライブ動画タグは、HTMLにライブ動画を埋め込んで使用する際に利用するタグです。共通タグと一緒に利用します。
共通タグ↓
<script src="https://api.tagfab.jp/live.js"></script>
ライブ動画タグ
ライブ動画タグの例：
<div id="tagfab" data-width="1000" data-recent="next" data-shop="xxxxxx"></div>
設定できる変数の種類
| 必須 | 指定可能な値 | 説明 | |
| data-width | ◯ | 720~1000(px) | PCで表示した際の横幅を決定する変数です。720~1000(px)の値を入力することができます。 |
| data-recent |
next もしくは prev |
data-shopで指定したSellerアカウントに紐づくライブのうち最新のライブを自動表示するための機能です。 – next：配信予定の直近のライブを表示いたします。 詳しくはこちら |
|
| data-shop |
SHOP ID |
data-recentの検索対象のSHOP IDを指定するために利用します。SHOP IDの確認方法はこちら |
|
| data-liveId |
LIVE ID |
data-liveIdを指定することで、ライブページのURLにLIVE IDを指定するパラメータがなくても任意のライブを表示することができます。 |
|
| data-theme |
テーマID |
Sellerにて発行したテーマ情報をライブページに反映することができます。テーマの発行方法はこちら |
|
| data-liveSs |
数値 |
動画の再生開始時間（秒）を指定することができます。 |
表示するライブ動画の決定方法
表示するライブ動画の決定方法は前述のdata-liveId変数とdata-recent変数の他にURLパラメータで指定する方法がある。
①URLパラメータで指定する方法
URLの末尾にパラメーターとしてlive_idを設定します。引数にはライブIDを設定してください。疑問符を使用して URL とパラメータを区切ります。
例）a.com/live/にライブ動画タグを実装し、ライブIDがxxxのライブを表示する場合
https://a.com/live/?live_id=xxx とパラメーターを設定する
ライブごとにライブ動画タグを書き換える必要はありません。
どのライブを表示するかは、URL末尾にパラメータとして設定するライブIDを元にlive.jsが判定します。
②各指定方法の優先順位
URLパラメータ>data_liveId>data_recent の順番で優先的に決定されます
実装例
<div id="tagfab" data-width="1000" data-theme="moffly-theme" data-shop="xihdkslanes" data-recent="next" ></div>
<script src="https://api.tagfab.jp/live.js"></script>
data-widthに関する補足
- PC・モバイルともに同じタグをご利用ください。（デバイスに応じてUIを自動調整します。）
- PCにおいてライブウインドウの幅を指定するには、タグ内の data-width を使用してください。data-widthには700から1000までの数値を設定できます。縦横比は横：縦=1000:720の固定です。モバイルにおけるライブウインドウのサイズはデバイスに応じて自動調整されます。
