正しい埋め込みコードの選択

このトピックでは、Brightcove Player を使用して動画を公開する際に利用可能な埋め込みコードの種類について概要を説明します。

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

標準リンクでは iframe 埋め込みコードが表示され、詳細リンクでは Videoタグ埋め込みコードが表示されます。Player Management API の観点では、詳細 プレーヤーコードは 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 を直接設置するよりも iframe の方が安全と認識されやすい)

Videoタグ埋め込みコード(詳細)

一般的な Videoタグ埋め込みコードは以下のようになります:

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

Videoタグ埋め込みコードの統合は多少複雑ですが、プレーヤーを含むページがプレーヤーと通信する必要がある場合には最適です。以下のようなケースでは Videoタグ埋め込みコードの使用が推奨されます:

  • プレーヤーイベントを受信・処理する必要がある
  • プレーヤーが親ページのスタイルを使用している
  • iframe コードではアプリケーション ロジックに支障をきたす(例:リダイレクトが機能しない)

最終的に iframe 埋め込みコードを使用しない場合でも、JavaScript 用プラグインと CSS 用の別ファイルを用いて Videoタグコードを活用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで再利用しやすくなります。

推奨事項

特別なアプリケーション ロジックにより Videoタグコードを使用する必要がない限り、iframe 実装を使用するのがベストプラクティスとされています。視聴者のエンゲージメントを追跡するために Campaign モジュールを使用する場合は、Videoタグ埋め込みコードを使用する必要があります。