サポートに連絡する| システムステータス
ページコンテンツ

    Brightcove Playerサンプル:

    動画の開始時にページ上の他のプレーヤーを停止このトピックでは、いずれかのプレーヤーでビデオ再生が開始されたときに、ページ上の他のすべてのBrightcove Playerを一時停止する方法を学習します。このドキュメントで説明されている機能には、Brightcove Player バージョン 5.0.3 以降が必要です。

    プレーヤーの例

    ビデオの1つを再生し始めます。次に、別のプレーヤーでビデオを再生し、再生していた他のプレーヤーでビデオの再生が停止することを確認します。

    ペンを見る18179-stopping-other-players-page-when-video-starts Brightcove Learning Services( @ rcrooks1969) オンCodePen

    ソースコード

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

    CodePen を使用する

    上記のCodePenを効果的に使用するためのヒントは次のとおりです。

    • [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
    • このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
      1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
      3. を見るプレーヤー/ 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 は、複数のプレーヤーのレイアウトを制御します。


    ページの最終更新日30 Sep 2021