foove⁺ ドキュメント

foove⁺は、NTTスマートコネクトが提供するライブコマースツールです。企業や団体が自社のWebサイトやアプリケーションに簡単にライブ配信機能を組み込むことができ、商品やサービスの魅力をリアルタイムで視聴者に伝えることが可能です。ライブ配信を通じた双方向コミュニケーションにより、購買意欲の向上とブランド価値の向上を支援します。

このドキュメントでは、foove⁺プレイヤーをWebサイトやWebアプリケーションに埋め込むための導入方法と基本的な使用方法について説明します。

プレイヤーの埋め込みサンプル

foove⁺プレイヤーをWebページに埋め込むための手順を説明します。必要なファイルの読み込みから実際の表示まで、順を追って解説します。

スクリプトとCSSの読み込み

プレイヤーを動作させるために必要なCSSとJavaScriptファイルを読み込みます。

HTMLヘッダータグ内にstyle.min.css、player.min.js、setup.jsを読み込む

<head>
....
<link rel="stylesheet" href="https://dist.foove-plus.com/player/latest/styles.min.css" />
<script src="https://dist.foove-plus.com/player/latest/player.min.js"></script>    
<script src="https://dist.foove-plus.com/player/latest/setup.js"></script>
...
</head>

プレイヤーの組み込み

必要なファイルを読み込んだ後、実際にプレイヤーをHTMLに配置します。

fp-containerの中にfp-playerを記載します
data-episode-idに番組ID(ストリームキー)を記載します

<div class="fp-container">
    <div class="fp-player" data-episode-id="2693ef92-2278-4a61-b274-82d796402964"></div>
</div>

補足：番組ID(ストリームキー)の取得方法

foove⁺の管理ページにログイン
配信一覧から対象の番組の「編集」をクリック
配信編集画面に記載されているストリームキーをコピー

例：2693ef92-2278-4a61-b274-82d796402964

プレイヤー表示例