プレーヤーの例
ビデオの1つを再生し始めます。次に、別のプレーヤーでビデオを再生し、再生していた他のプレーヤーでビデオの再生が停止することを確認します。
ペンを見る18179-stopping-other-players-page-when-video-starts Brightcove Learning Services( @ rcrooks1969) オンCodePen。
ソースコード
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
- このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
- CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
- CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
- を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。
開発シーケンス
通常、サンプルについては、このセクションは、あるページから Brightcove Player プラグインを使用する開発へのアプローチを提案します。この場合、コードはページ内のすべてのプレーヤーに連携して動作し、プラグインとして1つのプレーヤーに割り当てることはできません。したがって、プラグインコードは表示されません。
API/プラグインリソースを使用
API メソッド | API イベント |
---|---|
遊ぶ () | 遊ぶ |
一時停止 () |
プレーヤー/HTML構成
このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。
プレーヤーの設定
Brightcove Player に特別な設定は必要ありませんが、レイアウトコントロール用の HTML <div>
タグ内にページには 3 つの異なるプレーヤーがあります。
その他のHTML
他の HTML 要素はページに追加されません。
アプリケーションフロー
このアプリケーションの背後にある基本的なロジックは次のとおりです。
- ページに何人のプレイヤーがあるかを確認します。
- プレーヤーをループし、Brightcove Players として初期化し、
play
それぞれにイベントリスナーを設定します。 play
イベントが処理されるたびに、プレイヤーをループし、イベントを送出したプレイヤーの名前を持たないすべてのプレイヤーを一時停止します。
プレーヤーの上にループを作成し、イベントハンドラを各
ラベルが付いたコードを見つけます。
// ### Determine the available player IDs ###
ページに複数のプレーヤーがある場合、videojs.players
それらはプレイヤーの名前であるキーとともにオブジェクト名に保存されます。あなたは、実際のプレーヤーオブジェクトではなく、ループのためにしたい選手の名前を抽出するために、Object.keys()
JavaScriptメソッドを使用します。ループでは、イベントハンドラを割り当てて、プレーヤーを配列にプッシュします。
play
イベントを処理し、他のプレイヤーのプレイを停止する
ラベルが付いたコードを見つけます。
// ### Handle all players' play event ###
再生イベントが処理されるたびに、イベントオブジェクトからプレーヤー名(ID)を抽出し、すべてのプレーヤーをループしてすべてのプレーヤーを一時停止し、ビデオの再生を開始したばかりのプレーヤーの名前がありません。
アプリケーションのスタイリング
ページに使用される CSS は、複数のプレーヤーのレイアウトを制御します。