Brightcove NGP(新プレイヤー)の動画埋め込みコード比較

※NGP(Next Generation Player):
Brightcove(動画配信プラットフォーム)の最新プレイヤー。
読み込みが速い。

基本

プレイヤー管理画面で発行されるタグを貼り付ける。
発行されるタグにはiframe/インページの2種類ある。
※パフォーマンスには違いはないらしい。

iframeコード（基本的にはこちら推奨）

<iframe width='XXX' height='XXX' src='//players.brightcove.net/[アカウントID]/[プレイヤーID]_default/index.html?videoId=[ビデオID]' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

メリット

• iframeなので埋め込みページにあるJavaScript/CSSとの衝突がなく、扱いやすい。
  
• 確実にifrmaeタグで指定した大きさでプレーヤが描画される。
  

デメリット

• 埋め込みページからプラグインにパラメータを渡す公式的な仕組みは用意されていないので、プラグインでページ固有の値を受け取って処理をする、ということが困難。
  （プレイヤー共通のパラメータであれば管理画面から設定可能）
  ※プラグインとは→Brightcove NGP(新プレイヤー)のプラグイン作成方法

インページコード

<video
 id="allPlayer"
 width="XXX" 
 height="XXX" 
 data-account="[アカウントID]"
 data-player="[プレイヤーID]"
 data-embed="default"
 data-video-id="[ビデオID]"  
 class="video-js" controls
></video>
<script src="//players.brightcove.net/[アカウントID]/[プレイヤーID]_default/index.min.js"></script>

メリット

• 埋め込みページからプラグインにパラメータを渡せる。

デメリット

• 基本的には自動レスポンシブらしいが、iframeと異なり表示するページのJavaScript/CSSの影響を受けるので、意図しない表示や動作になる可能性がある。

どっちを使うか

• プラグインでページ固有の値を使わないならiframe、使うならインページ。
• 使う場合でも値が数種類に限定されるのであればプレイヤーをその分作成してiframeで埋め込み。

参考