Brightcove Player で音声のみを再生する

はじめに

Brightcove プレーヤーは、音声のみのアセットの再生をサポートしており、コントロールバーのみを表示して他のプレーヤー UI を非表示にする方法と、再生中もポスター画像を常に表示する方法があります。

音声のみモード

音声ポスターモード

例

次の例は、Brightcove プレーヤーを音声ポスターモードに設定した音声アセットを示しています。この例では、再生中もプレーヤー内にポスター画像が表示されます。

See the Pen Untitled by Brightcove Learning Services (@rcrooks1969) on CodePen.

CodePen の使用方法

上記 CodePen を効果的に使用するためのヒントを以下に示します。

Result ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
HTML/CSS/JS ボタンをクリックすると、いずれか 1 種類のコードが表示されます。
EDIT ON CODEPEN ボタンをクリックすると、別のブラウザまたはタブでコードを確認できます。

CodePen 内で表示するコードを調整できます。また、表示領域の幅も自由に変更できます。

要件

この機能を使用するには以下が必要です。

Brightcove Player v6.65.1 以降

実装に関する注意点

Brightcove プレーヤーで音声アセットを使用する場合、プレーヤーをカスタマイズするための次の 2 つのオプションがあります。

音声のみモード
音声ポスターモード

両方のモードを同時に有効にすることはできません。

audio_only_mode と audio_poster_mode の両方が true に設定されている場合は、音声のみモードが優先されます。
player.audioOnlyMode(true) または player.audioPosterMode(true) を使用してプログラム的にモードを有効にすると、もし他方のモードが有効であれば自動的に無効化されます。

音声のみモード

このモードでは、コントロールバー以外のすべてのプレーヤー UI が非表示になります。

このモードでは固定サイズの使用が必要です。カスタムアスペクト比を使用し、高さを 80px に設定できます。これを設定しないとプレーヤーが表示されません。詳細は音声のみコンテンツの利用を参照してください。

音声ポスターモード

このモードでは、再生中もポスター画像が常に表示されます。プレーヤーのサイズは通常の動画プレーヤーと同じです。

設定による実装

プレーヤー設定で音声再生モードを有効にできます。

Video Cloud Studio で Players モジュールを選択し、JSON エディタ を開きます。
エディター内で、次のいずれかを追加します。
```
"audio_only_mode": true
```
または
```
"audio_poster_mode": true
```
保存をクリックします。
プレーヤーの変更を公開します。

埋め込みコードを使用した実装

別の方法として、Web ページのプレーヤー埋め込みコードを更新することで音声モードを実装できます。

音声モードの有効化/無効化

音声モードは、次のメソッドを呼び出すことで非同期的に有効または無効にできます。これらは Promise を返します。

player.audioOnlyMode(true|false)

または

player.audioPosterMode(true|false)

音声モードの状態確認

引数なしで呼び出した場合、これらのメソッドは現在の音声モード状態を示す Boolean 値を返します。

player.audioOnlyMode()

または

player.audioPosterMode()

手順

Video Cloud Studio で Media モジュールを選択し、動画を選択します。
公開と埋め込み を選択し、Videoタグ 埋め込みコードをコピーします。

以下は、Videoタグ実装を使用してプレーヤーに音声モードを設定する例です。

      <div style="max-width: 960px;">
        <video-js id="myPlayerID"
          data-account="あなたのアカウント ID"
          data-player="あなたのプレーヤー ID"
          data-embed="default"
          controls=""
          data-video-id="あなたの動画 ID"
          data-playlist-id=""
          data-application-id=""
          class="vjs-fluid">
        </video-js>
      </div>
      <script src="https://players.brightcove.net/あなたのアカウント ID/あなたのプレーヤー ID_default/index.min.js"></script>
      
      <!-- custom script -->
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
      
          // Set either audio only mode OR audio poster mode
          myPlayer.audioOnlyMode(true);
          // myPlayer.audioPosterMode(true);
        });
      </script>