適切な埋め込みコードの選択

製品(複数可)
Video Cloud
役割
Studio ユーザー
プレーヤー開発者
タスク
動画の公開
トピック)
Playback

このトピックでは、Mediaモジュールを使用して動画を公開する際に使用できる埋め込みコードの種類について説明します。

Mediaモジュールを使用して動画を公開する場合は、プレーヤーURLを使用して動画をプレビューするか、iframe 埋め込みコードまたはvideo タグ埋め込みコードをコピーしてウェブページやアプリケーションに貼り付けることができます。

注: 短縮 ボタンをクリックするとプレビューURLが短縮されます。

iframeタブにiframe埋め込みコード、video タグには video タグ埋め込みコードが表示されます。 Player Management API の場合は、 embed_in_page 属性は、video タグを示します。

注:レスポンシブプレーヤーの操作については、 Brightcove Player をレスポンシブにサイジングする をご参照ください。

iframe埋め込みコード

一般的な iframe 埋め込みコードは次のようになります。

<iframe src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.html?videoId=5076962725001"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen></iframe>

iframe 埋め込みコードを使用する利点

  • 既存の JavaScript および/または CSS との衝突なし
  • 自動的にプレーヤーがレスポンシブデザインになります
  • iframeは、ソーシャルメディアアプリケーションや、ビデオを外部環境で使用する必要があるときはいつでも使いやすくなります。 例えば、Facebookは、iframeを使用した場合よりもセキュリティの脅威がはるかに少ないと認識します。 <video> 自分のサイトのタグとそれに関連するJavaScript(Facebookでは許可されていません)

video タグ埋め込みコード

一般的な video タグ埋め込みコードが次のようになります。

<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>

video タグ埋め込みコードとの統合は複雑になる可能性がありますが、video タグ埋め込みコードを使用することがプレーヤーを含むページがプレーヤーと連携する必要がある場合に最適です。video タグ埋め込みコードを使用する場合の例は次のとおりです。

  • プレーヤーイベントをリッスンする必要がある
  • プレーヤーに親ページからスタイルを適用する
  • iframe 埋め込みコードの使うとアプリケーションロジックが失敗する(例:親ページから他のページへ遷移する)

iframe 埋め込みコードを使用しない場合でも、JavaScript のプラグインと CSS ファイルを追加した video タグ埋め込みコードを引き続き使用できます。 これによってロジックがカプセル化されるので、複数のプレーヤーでプラグインが簡単に使用できるようになります。

Chromeと「壊れた」HTML動画アイコン

Chrome版67 +では、壊れた動画アイコンが <video ...> タグは Brightcove Player。 アイコンは次のように表示されます。

クロム壊れたビデオアイコン

Brightcove Playerのバージョン6.11+ 以降をご利用の場合 <video-js ...=""> に変更することで、これを回避することができます。

推奨

一部のアプリケーションロジックでページ埋め込みコードを使用する必要がない限り、iframe実装を使用することをお勧めします。