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

    1ページので複数のプレーヤーを使用する

    このトピックでは、1つのHTMLページで複数のBrightcoveプレーヤーを使用する方法を学習します。

    複数のプレイヤー

    同じページで複数のプレイヤーを使用している場合、特別なことは何もありません。例えば、同じページに次のプレイヤーを持つことは完全に受け入れられます。

    <video-js data-video-id="4093372393001"
  data-account="1507807800001"
  data-player="ry3j6rsze"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script>

<video-js data-video-id="5076962725001"
  data-account="1507807800001"
  data-player="BkTGbgSq"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>

     

    特別な考慮事項

    同じ HTML ページに複数のプレーヤーを配置する場合は、次の点に注意してください。

    • 単一の index.min.jsファイルを使用して、同じページで同じプレーヤーの複数のインスタンスを使用できます。可能であれば、1 つの index.min.jsファイルを使用することを強くお勧めします。これにより、ページの読み込み時間が大幅に短縮されます。
    • ページに複数のプレイヤーを抱え、preloadをに設定することは、帯域幅的に非常に高価になる可能性がありますauto。これは一般的に推奨されません。
    • 同じページで、両方のプレイヤーがのプレイヤー ID 値を使用する異なるアカウントの複数のプレイヤーを使用することはできませんdefault。（注意として、アドバンスプレイヤーコードでは、data-player属性でプレイヤー ID が使用されます）。回避策は、デフォルトのプレーヤーの 1 つを複製して、一意の識別子を持つことです。
    • IE11  を使用しており、ページ上に同じプレーヤーの複数のインスタンスがある場合は、id 各プレイヤーインスタンスがその属性に対して一意の値を持っていることを確認する必要があります。id属性は使用しません。
    • 異なるバージョンのページ内プレーヤーの混在はサポートされていません。同様のバージョンで動作する可能性がありますが、簡単に問題を引き起こす可能性があります。異なるバージョンのプレーヤーを混在させる必要がある場合は、iframeを使用します。プレイヤーが同じバージョンの場合、それは問題ないはずです。
    • ページ内プレーヤーを混在させる場合、グローバル bc はページの最後のプレーヤーを参照します。
    • RequireJSや複数のページ内プレーヤーのようなAMDモジュールローダーを使用しようとすると、既知の問題があります。現時点では、この回避策はありません。
    • 高度な埋め込みコードを使用してページに複数の 360 ビデオを埋め込む場合、360 度のインタラクティブ機能を持つことができるのは最初の動画だけです。回避策は、基本（iframe）埋め込みを使用して、複数の 360 動画にインタラクティブ機能を持たせるようにすることです。
    • 360 動画とプレーヤーと 360 以外のビデオとの混合はサポートされていません。

    • 複数のプレイヤーが 1 つのページに同じ ID を持ち、<video>タグ内で異なるサイズを指定する場合は、widthおよびを使用します。height属性を使用すると、最後のプレーヤーのプレイヤー CSS がすべてのプレイヤーに適用されます。

      回避策

      • 異なるサイズやスタイリングにしたい場合は、異なるプレイヤー ID を持つプレーヤーを使用してください
      • CSS を使用してプレーヤーのサイジングを提供するプレーヤーのクラスを定義し、そのクラスを異なるプレーヤーのビデオタグに追加します
    ページの最終更新日26 Oct 2021