プレーヤ テンプレート

Product
Video Cloud
対象となる役割
パブリッシャ
バージョン
Brightcove 5
モジュール
Publishing モジュール
エディション
すべて

このトピックでは、Video Cloud の標準プレーヤ テンプレートすべてへのリファレンスを提供します。Video Cloud Studio でプレーヤを作成するとき、プレーヤのベースとなるプレーヤ テンプレートを選択します。このリファレンスでは、各プレーヤ テンプレートについて、プレーヤ テンプレートの BEML 定義のダウンロード、機能するプレーヤ例の表示、標準プレーヤのサイズおよび Photoshop のレイアウトについての学習ができます。

クロムレス プレーヤの外観、またはプレーヤの動画プレイリストの水平レイアウトと垂直レイアウトとの違いに関心があるかもしれません。これらの動作例を確認することによって、Video Cloud Studio で作成するプレーヤのタイプ、サイズ、およびレイアウトについて考えることができます。標準プレーヤ テンプレートおよび Photoshop レイアウト ファイルをダウンロードすると、プレーヤのルック アンド フィールをさらにカスタマイズできます。

プレーヤを作成していない場合は、「Publishing モジュールでプレーヤを作成する」を参照してください。Video Cloud Pro および Enterprise のパブリッシャは、Brightcove Experience Markup Language(BEML)を使用してプレーヤをカスタマイズすることもできます。「プレーヤ テンプレートの機能とレイアウトに関する注意事項」も参照してください。

このドキュメントには、各標準プレーヤ テンプレートについての情報が記載されています。

標準プレーヤ テンプレートの PSD ファイルをダウンロードする

各標準プレーヤ テンプレートに対し Photoshop テンプレートが提供されています。アーカイブにはテンプレートの説明、サンプル プレーヤ、および Photoshop テンプレートが含まれます。テンプレートを使用して、プレーヤのカスタム背景の構築に役立てることができます。下記の個々のテンプレートの代わりに、PSD ファイルをまとめて 1 つの .zip ファイル(614 KB)としてダウンロードすることも可能です。

標準プレーヤ テンプレート リファレンス

各標準プレーヤ テンプレートに対し、説明、レイアウト画像、サンプル プレーヤ、および Photoshop テンプレートが含まれます。

スマート プレーヤ: 標準プレーヤはすべてスマート プレーヤです。HTML5 モードでは、標準のマルチ プレイリスト テンプレートは最初のプレイリストだけを表示します。または、優先プレイリストが割り当てられているときは、優先プレイリストだけを表示します。スマート プレーヤは、現在の環境を検出します。そして、Flash をサポートする機器では Flash Player として、それ以外の場合、通常は iOS 機器には HTML5 プレーヤとして動作します。Video Cloud スマート プレーヤの詳細については、「HTML5 およびスマート プレーヤを使って動画を配信する」を参照してください。

Single Video Player

これはシンプルなシングル動画プレーヤで、動画の下に動画コントロールを表示します。このプレーヤは、動画ファイルの表示寸法に合わせて大きさを変更できるので、縦横比 16:9 の動画をレターボックスなしで表示する際に便利です。このプレーヤにコンテンツを割り当てるには、Media モジュールのクイック動画公開を使用する、プレーヤのパブリッシング コードの構成パラメータを変更する(ヘルプの「パラメータを指定してコンテンツをプレーヤに割り当てる」を参照)、またはプレーヤ API を使用する、といった方法があります。

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 486 x 412。Video Player の最小サイズは 180 x 176 です。これよりサイズが小さいと、コントロールやメニューが正しくレンダリングされません。
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 6 x 52
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー

Video Player with Logo

これは、動画ディスプレイの上に 480 x 55 ピクセルのブランディング領域を設けたシンプルなシングル動画プレーヤです。このプレーヤは、動画ファイルの表示寸法に合わせて大きさを変更できるので、縦横比 16:9 の動画をレターボックスなしで表示する際に便利です。このプレーヤには、Media モジュールを使用してコンテンツを割り当てることはできません。クイック動画公開を使用するか、プレーヤのパブリッシング コードの構成パラメータを変更する(ヘルプの「パラメータを指定してコンテンツをプレーヤに割り当てる」を参照)か、またはプレーヤ API を使用します。

Video player with logo

Chromeless Video Player

Chromeless Video Player は Video Display コンポーネントと外観が似ていますが、「クローム」プレーヤ コントロールがありません。視聴者がマウス カーソルを動画表示領域上に置くと、プレーヤ コントロールが動画表示の下部に現れます。このプレーヤは動画ファイルの表示寸法に合わせて大きさを変更できるので、動画をレターボックスなしで表示するのに便利です。このプレーヤには、Media モジュールを使用してコンテンツを割り当てることはできません。クイック動画公開を使用するか、プレーヤのパブリッシング コードの構成パラメータを変更する(ヘルプの「パラメータを指定してコンテンツをプレーヤに割り当てる」を参照)か、またはプレーヤ API を使用します。詳細は、「新しいクロムレス動画プレーヤをカスタマイズするための 3 つの簡単なヒント」を参照してください。

クロムレス動画プレーヤ

  • プレーヤを表示する
  • デフォルト表示寸法: 480 x 270
  • コンポーネント: 動画プレーヤ(プレーヤ コントロールをマウスオーバー時に表示)

Accessible Video Player

このテンプレートはシングル動画プレーヤで、クローズド キャプション、キーボードのナビゲーション、スクリーンリーダーのサポートなど、視聴覚が不自由なユーザーがアクセスすることをサポートします。Accessible Video Player はシングル動画プレーヤです。そのため、プレイリストを直接サポートしません

Accessible Video Player は、すべての Video Cloud パブリッシャが利用できますが、クローズド キャプション機能は Video Cloud Pro および Enterprise パブリッシャのみが利用可能です。これは、動画でカスタム メタデータ フィールドを使用する必要があるためです。あるいは、スマート プレーヤ API の Captions API または Flash 専用プレーヤ API を使用できます。これらは、すべての Video Cloud パブリッシャが利用でき、任意のプレーヤ テンプレートと使用できます。ただし、Accessible Video Player を使用するよりも複雑になります。Accessible Video Player の使用方法については、「Accessible Video Player テンプレート」を参照してください。

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 500 x 470
    動画表示領域: 480 x 360
  • コンポーネント
    動画表示
    プレーヤ コントロール バー: 高さ 38 px
    クローズド キャプション メニュー
    タイトル ラベルおよび短い説明文のラベル
    右上画像: 180 x 52
    ボーダー: 10 px

Widescreen with Horizontal List 3.0

このテンプレートでは、プレイリストを 1 つだけ使用できます。標準の 16:9 または 4:3 の動画をレターボックス付きで表示できます。動画プレーヤの下部にあるスクロール リストに、各動画の名前とサムネイルが表示されます。

Widescreen with Horizontal List 3.0

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 650 x 630
    動画表示領域: 630 x 354
    動画表示領域を除くプレーヤ: 20 x 276
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タイトル ラベル
    右上画像: 300 x 60
    水平スクロール動画リスト

Widescreen with Vertical Video List

このテンプレートでは、プレイリストを 1 つだけ使用できます。デフォルトでは、プレーヤのサイズは 16:9 ですが、パブリッシング コードを使用して 4:3 にサイズを変更できます。動画プレーヤの横にあるスクロール リストに、各動画のサムネイルが表示されます。

Widescreen with Vertical Video List

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 588 x 410
    動画表示領域: 480 x 270
    動画表示領域を除くプレーヤ: 108 x 140
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タイトル ラベル
    右下画像: 300 x 60
    サムネイル付き垂直スクロール動画リスト

Widescreen with Video Text List

このプレーヤ テンプレートでは、プレイリストを 1 つだけ使用できます。デフォルトでは、プレーヤのサイズは 16:9 ですが、パブリッシング コードを使用して 4:3 にサイズを変更できます。動画プレーヤの横にあるスクロール リストに、各動画の名前と説明が表示されます。

Widescreen with Video Text List

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 480 x 215
    動画表示領域: 302 x 170
    動画表示領域を除くプレーヤ: 178 x 45
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タイトル ラベル
    垂直スクロール動画リスト(動画タイトル、短い説明付き)

Video Player with Horizontal Video List

このプレーヤ テンプレートでは、プレイリストを 1 つだけ使用できます。デフォルトでは、プレーヤのサイズは 4:3 ですが、パブリッシング コードを使用して 16:9 にサイズを変更できます。動画プレーヤの下部にあるスクロール リストに、各動画のサムネイルが表示されます。

Video Player with Horizontal Video List

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 300 x 340
    動画表示領域: 300 x 230
    動画表示領域を除くプレーヤ: 0 x 110
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タイトル ラベル
    サムネイル付き水平スクロール動画リスト

Tabbed Navigation 3.0

このプレーヤでは、視聴者がプレイリスト領域の上部にあるタブを選択して、複数のプレイリスト間で切り替えをすることができます。右側のスクロール リストには、各動画の短い説明文とサムネイルが表示されます。

クリックで拡大します

Tabbed Navigation 3.0

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 966 x 546
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 486 x 186
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    左上画像: 480 x 55
    右下画像: 468 x 60
    動画リスト(サムネイル、短い説明付き)
    タブ バー付きプレイリスト
    追加プレイリスト付きドロップダウン メニュー

Compact Tabbed Navigation 3.0

このプレーヤは、Tabbed Navigation 3.0 プレーヤと似ています。1,024 x 768 のディスプレイでの表示に合わせたサイズで、標準の Tabbed Navigation テンプレートよりも幅が狭くなっています。このプレーヤでは、視聴者がプレイリスト領域の上部にあるタブを選択して、複数のプレイリスト間で切り替えをすることができます。右側のスクロール リストには、各動画の短い説明文とサムネイルが表示されます。

クリックで拡大します

Compact Tabbed Navigation 3.0

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 798 x 603
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 318 x 243
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    左上画像: 300 x 40
    下画像: 728 x 90
    動画リスト(サムネイル、短い説明付き)
    タブ バー付きプレイリスト
    追加プレイリスト付きドロップダウン メニュー

Chromeless Video Player with Tabbed Playlists

このテンプレートは、サイズ変更可能な Chromeless Video Player とタブ ナビゲーションを組み合わせたものです。視聴者は、プレイリスト領域の上部にあるタブを選択して、複数のプレイリスト間で切り替えをすることができます。右側のスクロール リストには、各動画の短い説明文とサムネイルが表示されます。

クリックで拡大します

Chromeless Video Player with Tabbed Playlists

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 960 x 445
    動画表示領域: 640 x 360
    動画表示領域を除くプレーヤ: 320 x 85
  • コンポーネント
    クロムレス動画プレーヤ
    動画リスト(サムネイル、短い説明付き)
    タブ バー付きプレイリスト
    追加プレイリスト付きドロップダウン メニュー

Thumbnail Navigation

このプレーヤでは、複数のプレイリストを使用できます。各プレイリストには、タブ形式ナビゲーションのタブがあります。各タブにはプレイリストに、スクロール可能なタイル リストが表示され、各動画のサムネイルとタイトルが示されます。

クリックで拡大します

Thumbnail Navigation プレーヤのテンプレート

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 956 x 654
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 476 x 294
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タブ バー付きプレイリスト
    スクロール タイル動画リスト(サムネイル、短い説明付き)
    上部ブランディング領域、480 x 40
    下部ブランディング領域、728 x 90

Video Player with Dropdown Navigation

このプレーヤでは、複数のプレイリストを使用できます。プレイリストは、ドロップダウン メニューから選択できます。デフォルトでは、プレーヤのサイズは 4:3 ですが、パブリッシング コードを使用して 16:9 にサイズを変更できます。動画プレーヤの下部にあるスクロール リストに、各動画の名前、説明、およびサムネイルが表示されます。

Video Player with Dropdown Navigation

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 300 x 540
    動画表示領域: 300 x 230
    動画表示領域を除くプレーヤ: 0 x 310
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    プレイリスト付きドロップダウン メニュー
    スクロール動画リスト(サムネイル、短い説明付き)

Widescreen with Dropdown Navigation

このプレーヤでは、複数のプレイリストを使用できます。デフォルトでは、プレーヤのサイズは 16:9 ですが、パブリッシング コードを使用して 4:3 にサイズを変更できます。動画プレーヤの横にあるスクロール リストに、各動画のサムネイルが表示されます。

Widescreen with Dropdown Navigation

  • プレーヤを表示する
  • PSD レイアウトをダウンロードする(.zip)
  • デフォルト表示寸法
    全体: 776 x 410
    動画表示領域: 630 x 354
    動画表示領域を除くプレーヤ: 146 x 56
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    プレイリスト付きドロップダウン メニュー
    サムネイル付き垂直スクロール動画リスト

モバイルに最適化したプレーヤ テンプレート

これらの 2 つの標準プレーヤ テンプレートは、モバイル機器での再生に最適化されています。ただし、どのスクリーンでも機能します。タッチ スクリーン上で使いやすい、より大きなコントロールを備えています。モバイルに最適化されたプレーヤ テンプレートは、スマート プレーヤとして機能しますが、HTML5 モードと Flash モード バージョンは異なります。モバイルに最適化されたテンプレートの HTML5 プレーヤは、ネイティブの動画プレーヤ コントロールを使用しますが、Flash Player は、モバイル機器でのタップに適した、テンプレートの大きなボタン コントロールを使用します。

Mobile Optimized Video Player

これはシンプルなシングル動画プレーヤで、動画の下に動画コントロールを表示します。タッチ スクリーン上で使いやすい、より大きなコントロールを備えています。このプレーヤは、動画ファイルの表示寸法に合わせて大きさを変更できるので、縦横比 16:9 の動画をレターボックスなしで表示する際に便利です。Media モジュールを使用して、このプレーヤにコンテンツを割り当てることはできません。クイック動画公開を使用するか、プレーヤのパブリッシング コードの構成パラメータを変更する(ヘルプの「パラメータを指定してコンテンツをプレーヤに割り当てる」を参照)か、またはプレーヤ API を使用します。

Mobile Optimized Video Player

  • プレーヤを表示する
  • デフォルト表示寸法
    全体: 480 x 450
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 0 x 90
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー

Mobile Optimized Video Player with Horizontal Video List

このテンプレートでは、プレイリストを 1 つだけ使用できます。タッチ スクリーン上で使いやすい、より大きなコントロールを備えています。デフォルトでは、プレーヤのサイズは 4:3 ですが、パブリッシング コードを使用して 16:9 にサイズを変更できます。動画プレーヤの下部にあるスクロール リストに、プレイリストにある各動画のサムネイルが表示されます。

Mobile-Optimized Video Player with Horizontal Video List

  • プレーヤを表示する
  • デフォルト表示寸法
    全体: 480 x 628
    動画表示領域: 480 x 360
    動画表示領域を除くプレーヤ: 0 x 268
  • コンポーネント
    動画プレーヤ
    プレーヤ コントロール バー
    タイトル ラベル
    サムネイル付き水平スクロール動画リスト

 

タグ
プレーヤ テンプレート