Media モジュールを使用して動画を公開する際は、プレーヤー URL を使って動画をプレビューしたり、iframe または In-Page 埋め込みコードをコピーして Web ページやアプリケーションに貼り付けることができます。
動画の Overview タブから、Embed to Web ボタンをクリックすると埋め込みダイアログが開きます。Iframe タブには iframe 埋め込みコードが表示され、JavaScript タブには In-Page 埋め込みコードが表示されます。Player Management API の観点では、JavaScript 埋め込みコードは embed_in_page 実装とも呼ばれます。
iframe 埋め込みコード
一般的な iframe 埋め込みコードは以下のようになります。
<iframe src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.html?videoId=6116779877001"
allowfullscreen=""
allow="encrypted-media"
width="960" height="540"></iframe>
iframe 埋め込みコードを使用する利点
- 既存の JavaScript や CSS と衝突しない
- 自動的にレスポンシブ対応
- ソーシャルメディアアプリや、動画を外部環境で使用する必要がある場合に iframe を使うと容易になります。たとえば Facebook では、サイトに
<video>タグおよび関連する JavaScript を配置する場合（Facebook はこれを許可していません）よりも、iframe を使用する方がセキュリティ上のリスクが大幅に少ないと認識されます。
In-Page 埋め込みコード（JavaScript）
一般的な In-Page 埋め込みコードは以下のようになります。
<video-js data-account="1507807800001"
data-player="rf1BTdKk6M"
data-embed="default"
controls=""
data-video-id="6116779877001"
data-playlist-id=""
data-application-id=""
width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>
In-Page 公開コードの組み込みはより複雑になることがありますが、プレーヤーを含むページがプレーヤーと通信する必要がある場合は In-Page コードを使用するのが最適です。In-Page 埋め込みコードを使用する例としては以下があります。
- 含めるページのコードがプレーヤーイベントを監視し、それに応じて動作する必要がある場合
- プレーヤーが親ページのスタイルを使用する場合
- iframe コードによってアプリケーションロジック（親ページからのリダイレクトなど）が機能しなくなる場合
最終的な実装で iframe 埋め込みコードを使用しない場合でも、JavaScript はプラグインで、CSS は別ファイルにすることで In-Page コードを利用できます。これによりロジックがカプセル化され、複数のプレーヤーで容易に再利用できます。
推奨事項
アプリケーションロジックで JavaScript（in-page）コードの使用が必要な場合を除き、iframe 実装を使用することがベストプラクティスです。多くの場合、アプリケーションロジックを追加したくなるため、JavaScript コードが最適な選択となることもよくあります。Audience モジュールを使用して視聴者のエンゲージメントを追跡している場合は、JavaScript（in-page）埋め込みコードを使用する必要があります。