8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-03-02

※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で埋め込み。

参考

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?