Brightcove Playerサンプル：

オーディオプレーヤーシミュレートこのトピックでは、オーディオのみの再生用に設計されたミニマリストの Brightcove Player を作成する方法を学習します。目的は、オーディオプレーヤーのように見えるプレーヤーを作成することです。

開発シーケンス

推奨される開発順序は次のとおりです。

インページ埋め込みプレーヤーの実装を使用して、プレーヤー、プラグイン、CSS の機能をテストします (CSS が必要な場合)
ローカルテストのためにプラグインのJavaScriptとCSSを別々のファイルに置く
エラーを解決したら、プラグインコードとCSSをサーバーにデプロイします
Studio を使用してプラグインと CSS をプレイヤーに追加する
iframe の実装が適切であると判断した場合は、インページ埋め込みプレーヤーの実装を置き換えます (次のセクションで詳しく説明します)。

これらの手順の詳細については、「ステップバイステップ」を参照してください。プラグイン開発ガイド。

iframe またはページ内埋め込み

Brightcove Player の拡張機能を開発する際には、コードが iframe 実装またはページ内埋め込み実装に最も適しているかどうかを判断する必要があります。ベストプラクティスの推奨事項は、iframe 実装で使用するプラグインを構築することです。iframe プレーヤーを使用する利点は次のとおりです。

既存のJavaScriptおよび/またはCSSとの衝突はありません
自動応答性
iframe は、ソーシャルメディアアプリ（または動画が他のアプリに「移動」する必要があるとき）での使用を容易にします。

インページ埋め込みプレーヤーの統合はより複雑になりますが、その実装に関するコードを計画する場合もあります。一般化するために、このアプローチは、包含ページがプレイヤーと通信する必要がある場合に最適です。具体的には、いくつかの例を挙げます。

含まれているページのコードは、プレイヤーイベントをリッスンして行動する必要があります
プレーヤーは包含ページのスタイルを使用します
iframe は、含まれているページからのリダイレクトのように、アプリロジックが失敗します。

最終実装で iframe コードを使用しない場合でも、JavaScript 用のプラグインと CSS 用の別のファイルを使用して、ページ内埋め込みコードを使用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで簡単に使用できます。

実装を選択

ここで説明するプレーヤーは iframe 埋め込みで動作しますが、コーナーを丸めてコントロールを表示したままにするために CSS がプレーヤーに適用されています。このスタイリングは、IDを持っているプレーヤーに依存し、ページ内埋め込みでのみ動作します。ここでは、ページ内埋め込みを使用します。

プレイヤーは

サンプルプレーヤーは、以下の jsFiddle にあります。[CSS] タブをクリックして、プレーヤーに適用されている CSS を確認します。

それはどのように動作するか

以下のセクションでは、例で使用されているプレーヤーと CSS コードについて説明します。

このプレーヤーには、オーディオのみのコンテンツも必要です。Video Cloud にオーディオコンテンツを追加する方法については、「オーディオコンテンツ」を参照してください。

このプレーヤーには、ビデオトラックのないMP4ファイルの形式のオーディオのみのコンテンツも必要です。オーディオのポスターはオプションですが、このサンプルプレーヤーに示すように、オーディオのタイトルを表示するために使用できます。

プレーヤーを作成する

プレーヤーを作成し、そのプレーヤーにビデオを割り当てるには、次の手順に従います。

Players モジュールで、新しいプレーヤーを作成するか、既存のプレーヤーを使用します。
プレーヤーの設定を編集してサイズを変更します。
- 固定サイズを選ぶ
- カスタム縦横比を選択する
- 幅を好きなものに設定しますが、高さは80ピクセルに設定します
プレーヤーのサイズ変更
Media モジュールで、オーディオのみの項目を選択し、このプレーヤーで公開します。プレーヤーにオーディオのみのコンテンツを割り当て、公開します。
ページ内埋め込みコードをコピーし、新しい HTML ファイルに貼り付けます。
プレーヤーにid AudioOnly を追加します。

埋め込みコードは次のようになります。

<video-js id="audioOnly" data-video-id="4841158458001" data-account="1752604059001" data-player="rkgpS9K" data-embed="default" class="video-js" controls style="width: 480px; height: 80px;"></video-js>
<script src="https://players.brightcove.net/1752604059001/rkgpS9K_default/index.min.js"\></script>

<video-js id="audioOnly" data-account="3676484086001" data-player="B1doF3j" data-embed="default" class="video-js" controls style="width: 480px; height: 80px;"></video-js>
<script src="https://players.brightcove.net/3676484086001/B1doF3j_default/index.min.js"></script>

カスタム CSS を追加する

今、ページのヘッドセクションのスタイルブロックにいくつかのカスタム CSS を追加します。スタイルは3つのことを行います：

大きな再生ボタンの背景を削除します（プレーヤーの高さに対して大きすぎるため）
ユーザーがマウスがオフでも再生中にコントロールバーを表示したままにする
プレーヤーの角を丸め、もう少しオーディオプレーヤーのように見えます

追加する必要がある CSS コードを以下に示します。

/* keep the controls visible during playback */
#audioOnly .vjs-control-bar {
    transform: none;
    background-color: transparent;
}
/* round the corners of the player */
#audioOnly {
    border-radius: 1em;
    width: 480px;
    height: 80px;
}
/* remove the background from the big play button */
.video-js.vjs-mouse .vjs-big-play-button {
    background: none;
}
/* round the corners of the dock */
#audioOnly .vjs-dock-text {
    border-radius: 1em 1em 0 0;
}