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

複数のプレーヤー

同じページに複数のプレーヤーを使用する場合、特別な設定は必要ありません。たとえば、以下のように複数のプレーヤーを同じページに配置しても問題ありません。

    <video-js data-video-id="4093372393001"
      data-account="1507807800001"
      data-player="7mmfg7NnNy"
      data-embed="default"
      data-application-id
      class="video-js"
      controls></video-js>
    <script src="https://players.brightcove.net/1507807800001/7mmfg7NnNy_default/index.min.js"></script>
    
    <video-js data-video-id="5076962725001"
      data-account="1507807800001"
      data-player="P0hzAkylr"
      data-embed="default"
      data-application-id
      class="video-js"
      controls></video-js>
    <script src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.min.js"></script>

特別な考慮事項

同じ HTML ページに複数のプレーヤーを配置する際は、以下の点に注意してください：

• 同じプレーヤーの複数インスタンスを同じページで使用する場合、1つの index.min.js ファイルを共有できます。可能であれば、1つの index.min.js ファイルを使用することを強く推奨します。これによりページの読み込み時間を大幅に短縮できます。
• preload が auto に設定されている複数のプレーヤーを 1 ページに配置すると、帯域幅の消費が非常に大きくなる可能性があります。一般的には推奨されません。
• 異なるアカウントからのプレーヤーで、両方とも default というプレーヤーID を使用している場合、それらを同じページに配置することはできません。（補足：Videoタグ プレーヤーコードでは、data-player 属性でプレーヤーID を指定します。）回避策としては、一方の default プレーヤーを複製し、固有の識別子を持たせることです。
• IE11 を使用していて、同じプレーヤーの複数インスタンスをページに配置する場合は、それぞれのプレーヤーに一意の id 属性を指定するか、id 属性を使用しないようにしてください。
• 異なるバージョンの Videoタグ プレーヤーを混在させることはサポートされていません。類似のバージョンでは動作する可能性もありますが、問題が発生しやすくなります。異なるバージョンのプレーヤーを混在させる必要がある場合は、iframeを使用してください。同じバージョンのプレーヤーであれば問題ありません。
• Videoタグ プレーヤーを混在させる場合、global bc はページ内の最後のプレーヤーを参照します。
• RequireJS のような AMD モジュールローダーと複数の Videoタグ プレーヤーを同時に使用する際に、既知の問題があります。現時点ではこの問題に対する回避策はありません。
• 高度な埋め込みコードを使用して複数の 360 度動画を1ページに配置する場合、インタラクティブ機能が有効なのは最初の動画のみです。回避策としては、基本（iframe）埋め込みコードを使用することで、複数の 360 度動画にインタラクティブ機能を持たせることが可能です。
• 360 度動画のプレーヤーと通常の動画のプレーヤーを混在させることはサポートされていません。
• 複数のプレーヤーが同じ id を持ち、それぞれの <video> タグ内で width および height 属性を使用して異なるサイズを指定している場合、最後のプレーヤーの CSS がすべてのプレーヤーに適用されます。

  回避策

  • 異なるサイズやスタイルにしたい場合は、異なるプレーヤーID を持つプレーヤーを使用してください。
  • CSS でサイズを指定したクラスを作成し、それぞれのプレーヤーの video タグにそのクラスを追加してください。