Brightcove Playerサンプル：

プレーヤーの例

次のビデオは、ビデオを実行するブラウザ/プラットフォームによって動作が異なります。ビデオがオーディオで自動再生される場合は、自動再生されます。そうでない場合は、ビデオの再生が開始されますが、ミュート解除ボタンが表示されます。このボタンをクリックすると、ビデオのオーディオが聞こえます。一般的に、iOS、Safari、Chrome を使用している場合、ビデオがミュートされていないと、動画は自動再生されません。このサンプルでは、ビデオを自動再生する方法を示し、ミュートを解除するための明らかなボタンを示します。

IMA3 プリロールを使用している場合は、このドキュメントの「プリロール広告を使用する」セクションを参照してください。このセクションでは、IMA プリロール広告で機能を機能させるには、次の CodePen に示すコードに適用する必要がある小さな変更について詳しく説明します。

ペンを見るミュート解除ボタンによる自動再生 Brightcove Learning Services（ @ rcrooks1969） オンCodePen。

ソースコード

GitHubで完全なソリューションを表示します。

API/プラグインリソースを使用

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

標準の包含に加えてidの中にvideoタグ、playsinline iOS機能に属性が追加されました：

<div id="playerContainer" class="outer">
   <video-js id="myPlayerID"
     data-video-id="5755775186001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     data-application-id
     class="video-js"
     controls
     playsinline></video-js>
</div>

その他のHTML

前のセクションで説明した以外の他の HTML 要素はページに追加されません。

アプリケーションフロー

このアプリケーションの背後にある基本的なロジックは次のとおりです。

• play()メソッドを使用して、ビデオの再生を試みます。メソッドへの呼び出しは、JavaScript の約束によって返された値を保持する変数に割り当てられます。
• 約束が解決された場合（ビデオが再生中）、プレーヤーのミュートを解除し、音量レベルを設定します。
• 約束が拒否された場合（ビデオが再生されていない）場合は、次の手順を実行します。
  • プレーヤーをミュートし、ビデオの再生を開始します（プレーヤーがミュートされてから今やります）。
  • ミュート解除ボタンとして機能する HTML ボタン要素を動的に作成します。
  •  clickボタンにイベントリスナーを追加します。
  • ボタンのテキスト、スタイルなどを設定します。
  • プレーヤーの上にボタンを置きます。

動画を再生してみる

ラベルが付いたコードを見つけます。

// ### Wait for loadedmetadata then try to play video ###

標準的な手順に従って、loadedmetadataplay()メソッドを使用する前にイベントを待機します。メソッド呼び出しから返された約束は、promise変数に格納されます。ビデオが再生されている場合は、プレーヤーのミュートを解除して音量を設定できます。

自動再生ができないときは、プレーヤーをミュートしてビデオを再生します。

ラベルが付いたコードを見つけます。

// ### If autoplay prevented: mute the video, play video and display unmute button ###

ここでは、catch約束のロジックは、ビデオがプレーヤーで開始されなかったときに行動することができます。プレーヤーはプログラムによってミュートされるため、ビデオが再生されます。play()メソッドが再び呼び出され、ビデオが開始されます。このコードの後に、ボタンは動的に作成され、設定されます。

clickイベントリスナーをボタンに追加する

ラベルが付いたコードを見つけます。

// ### Add button's event listener ###

JavaScriptを使用するとaddEventListener()、クリックのイベントハンドラが動的に作成されます。イベントハンドラでは、プレーヤーはミュート解除され、ボリュームレベルが設定され、最後にボタンが DOM から削除されます。

ボタンの設定

ラベルが付いたコードを見つけます。

// ###  Configure the button ###

このコードセクションでは、ボタンのラベルが設定され、ボタンの外観が設定され、ボタンを配置する CSS 参照用にが追加されます。class

コンテナにボタンを追加する

ラベルが付いたコードを見つけます。

// ### Add the button to the container ###

コードの 1 行では、divプレーヤーを制限するボタンが配置されます。

プレロール広告を使用する

ミュート解除ボタンが表示されたときに広告が再生されるため、コンテンツプレーヤーではなく広告プレーヤーのミュートを解除する必要があります。これを行うには、クリックハンドラーに以下を使用します。

button.addEventListener("click", function() {
  myPlayer.ima3.adPlayer.muted(false);
  myPlayer.ima3.adPlayer.volume(volumeLevel);
  //myPlayer.muted(false);
  //myPlayer.volume(volumeLevel);
  playerContainer.removeChild(button);
}

コンテンツプレーヤーボリュームコントロールの 2 行のコードはコメントアウトされ、比較のためにのみ残されます。

iOS/SAFARI/Chrome 以外のコードでも同じ変更を行う必要はありません。これは、広告がロードされる前（loadstartイベントで）ボリュームが変更され、その変更はロード時に広告プレーヤーに渡されます。

作業例については、この CodePen を参照してください。

アプリケーションのスタイリング

3 つの CSS セレクタは、次のことを実行します。

• heightwidthビデオとを 100% に設定すると、ビデオが配置されているコンテナがいっぱいになります。
• divプレーヤーを囲むで使用するクラスセレクターを作成します。使用される値は、プレーヤーのサイズに対応します。
• divプレイヤーを囲むの中央にミュート解除ボタンを配置する別のクラスセレクターを作成します。

プラグインコード

通常、JavaScript を Brightcove Player プラグインに変換する場合は、公称の変更が必要です。必要な変更の 1 つは、ready()メソッドの標準使用をプラグインを定義するコードに置き換えることです。

ここでは、プレーヤーで動作するJavaScriptコードへの非常に一般的に使用されるスタートです：

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

最初の行を変更して、標準の構文を使用して Brightcove Player プラグインを起動します。

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});   

前述のように、このドキュメントの対応する GitHub レポ: unmute-button.js には、プラグインの JavaScript コードが表示されます。

プレーヤーでプラグインを使用する

プラグインの CSS ファイルと JavaScript ファイルをインターネットでアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERSモジュールでは、プレーヤーを選択し、[ プラグイン ] セクションで CSS ファイルと JavaScript ファイルに URL を追加し、名前を追加することもできます。オプションが必要な場合は、[Options] と [Options]