Videoタグ埋め込みコードで利用可能なオプション

このトピックでは、Videoタグ 埋め込みコードの使用方法と設定について説明します。 このプレーヤー実装は In-Page または embed_in_page 埋め込みコードとも呼ばれます。

概要

Videoタグ埋め込みコードを使用すると、プレーヤーを iframe ではなく HTML ページ内に直接配置できます。 これにより、プレーヤーや関連プロパティ／イベントへのアクセスが容易になるというメリットがあります。 一方で、非 iframe プレーヤーを使用すると、ソーシャルメディア アプリケーションや共有において 「プレーヤーを 1 つのコンポーネントとして利用できる利便性」が失われます。 詳細は 適切な埋め込みコードを選択する を参照してください。

利用方法

Videoタグ埋め込みコードを使用するには、以下の手順に従ってください。

  1. PLAYERS モジュールを使用してプレーヤーを作成する。
  2. MEDIA モジュールで、作成したプレーヤーを使用して動画を公開する。
  3. Videoタグ 埋め込みコードをコピーする。 HTML は次のような形式になります: 
        <video-js data-video-id="4093372393001"
      data-account="1507807800001"
      data-player="ry3j6rsze"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/ry3j6rsze_default/index.min.js"></script>
  4. ブラウザからコピーした HTML を body タグ内へ貼り付ける。
  5. HTML ページを表示して、プレーヤーが動作することを確認する。

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

注意：プレビュー URL の横にある 短縮 ボタンをクリックすると、短縮プレビュー URL が生成されます。

iframe リンクは iframe 埋め込みコードを表示し、 Videoタグ リンクは In-Page 埋め込みコードを表示します。 Player Management API の観点では、Videoタグ プレーヤー コードは embed_in_page 実装とも呼ばれます。

Videoタグ埋め込みコード

典型的な Videoタグ埋め込みコードは次のようになります:

    <video-js data-video-id="5076962725001"
    data-account="1507807800001"
    data-player="BkTGbgSq"
    data-embed="default"
    data-application-id=""
    controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>

Videoタグ埋め込みコードの統合は多少複雑になる場合がありますが、 プレーヤーを含むページがプレーヤーと通信する必要がある場合には最適です。 Videoタグ埋め込みコードを使用すべき主なケースの例は次のとおりです:

  • ページ内のコードがプレーヤーのイベントを監視し、処理する必要がある場合
  • プレーヤーが親ページのスタイルを利用する必要がある場合
  • iframe を使用すると、リダイレクトなどのアプリケーション ロジックが正しく動作しない場合

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

推奨事項

特定のアプリケーション ロジックで Videoタグコードが必須でない限り、 通常は iframe 実装を使用することが推奨されます。 なお、Campaign モジュールを使用して視聴者エンゲージメントを追跡する場合は、 Videoタグ埋め込みコードを使用する必要があります。

属性

<video-js> タグには、プレーヤーの動作を制御するための多数の属性を指定できます。以下の表に利用可能な属性を示します。

Attribute Description Data Type
autoplay

許可されているプラットフォームでは、プレーヤーが自動的に再生を開始することを示します。

autoplay に Boolean 値を設定した場合、ブラウザのネイティブな自動再生動作が使用されます。

上記の試行がすべて失敗した場合、autoplay が false のときと同様に、プレーヤーには「大きな再生ボタン」が表示されます。

自動再生を確実に動作させるには多くの条件が関わります。詳細は Autoplay Considerations を参照してください。

 Boolean
class 標準的な HTML 属性で、デフォルトでは video-js が設定されます。 String
controls プレーヤーにコントロールバーを表示するかどうかを指定します。 Boolean
crossorigin

true の場合、基盤となる <video-js> 要素に crossorigin="anonymous" が設定されます。

この場合、プレーヤーが取得するすべての動画およびテキスト トラックに CORS ヘッダーが付与されている必要があります。

 Boolean
data-account アカウント ID（Publisher ID と呼ばれることもあります）。 String
data-ad-config-id Dynamic Delivery SSAI の広告設定 ID。 String
data-application-id 単一のプレーヤーを複数の場所で再利用しつつ、サイト単位またはアプリケーション単位でアナリティクスを区別するために使用します。 詳細は プレーヤー埋め込みコードへのアプリケーション ID の追加 を参照してください。 String
data-delivery-config-id Dynamic Delivery Rules の設定 ID。 String
data-embed 埋め込み（親子関係を持つプレーヤー）を使用している場合の情報を表示します。 詳細については Embed APIs を参照してください。 このリンクは別ドメインの新しいタブで開きます。 String
data-player プレーヤー ID を設定します。 String
data-playlist-id プレーヤー内で使用するプレイリストの ID または参照 ID を設定します。 String
data-playlist-video-id 最初に再生される動画の ID を設定します。この動画は指定したプレイリスト内に存在している必要があります。 String
data-start-time 動画の再生開始位置（オフセット）を指定します。詳細は ディープリンク を参照してください。 String
data-video-id プレーヤー内で使用する動画の ID または参照 ID を設定します。 String
height 動画の表示高さをピクセル単位のみで指定します。 高さにパーセンテージを使用する方法については、プレーヤーのサイズ設定 を参照してください。 Number
language プレーヤーで使用する言語コード（通常は 2 文字）を指定します。 String
languages プレーヤーに含める言語を指定する文字列の配列。 Array
loop 動画が終了した時点で、最初から再生をやり直します。 Boolean
muted 動画の音声をミュートします。 Boolean
playsinline プラットフォームと OS が対応している場合、動画をフルスクリーンや独立したリサイズ可能ウィンドウではなく、 プレーヤー内の再生領域にインライン表示します。iPhone や iPad でも動作します。 Boolean
preload ブラウザに対して、<video> タグが読み込まれた時点で動画データのダウンロードを開始すべきかどうかを指示します。 指定可能な値は none、metadata、auto です。 詳細は次のセクションで説明します。 String
techOrder 使用する再生テクノロジー（tech）の優先順序を指定します。 Array
width 動画の表示幅をピクセル単位のみで指定します。 幅にパーセンテージを使用する方法については、プレーヤーのサイズ設定 を参照してください。 Number

preload の詳細

preload 属性は、<video> タグが読み込まれた時点で動画データのダウンロードを開始するかどうかをブラウザに指示します。 指定できる値は auto、metadata、none の3種類です。 利用される再生テクノロジーにより挙動が若干異なるため、以下に詳細を示します。

  • auto（デフォルト）:

    HLS/DASH の場合、プレーヤーは m3u8 マニフェスト ファイルと 1〜2 つのセグメントをダウンロードします。

    MP4 の場合、auto は「ブラウザが許可すれば即座に動画を読み込む」ことを意味します。 ただし、iPhone や iPad など一部のモバイル デバイスでは、ユーザの帯域を保護するため動画がプリロードされない場合があります。

  • metadata:

    HLS/DASH の場合、metadata は auto と同じ動作になります。

    MP4 の場合、動画の duration（再生時間）や dimensions（サイズ）などのメタデータのみを読み込みます。

  • none:

    HLS/DASH の場合、動画の duration を計算するために m3u8 マニフェストのみをダウンロードします。

    MP4 の場合、動画データは一切プリロードされず、ユーザーが再生ボタンを押すまでダウンロードは開始されません。 

      <video-js preload ...>
      or
      { "preload": "auto" }