サポート サポート問い合わせ先 | システムステータス システムステータス

ブライトコーブプレーヤーをCMSに埋め込む

このトピックでは、CMSユーザーが Brightcove Player ページ内に

概要

CMSユーザーがビデオまたはプレイリストを埋め込むとき player ページでは、Brightcoveの生成で可能な限り多くの柔軟性を提供したい player Brightcoveのルックアンドフィールを制御できるようにコードを埋め込む player Webページでは、HTMLまたはJavaScriptの専門家であるとは限りません。

このトピックでは、その方法に関するガイドラインを示します。 このドキュメントの対象読者は主にブライトコーブパートナーですが、統合するすべての人に役立ちます Video Cloud またはスタンドアローン Brightcove Player CMSで。

Player 埋め込みダイアログの動作

ユーザーがのフォーマットを制御できるダイアログが必要です player ウェブページで。 このダイアログでは、ユーザーは以下にリストされているフィールドを設定できます。 このダイアログが表示される前に、ユーザーがすでにBrightcoveアカウントと動画または再生リストを選択していることが前提です。 それ以外の場合は、Brightcoveアカウントと動画またはプレイリストの選択を最初に行う必要があります。 付録A 以下。

  1. Player:ユーザーは、 player 利用可能なBrightcoveから players。 動画を埋め込んでいる場合 player、次に非プレイリストのみが有効 playerから選択できるようにする必要があります。 プレイリストを埋め込んでいる場合 player、次にプレイリストのみ有効 playerから選択できるようにする必要があります。
  2. 自動再生:ユーザーは自動再生を有効/無効にできる必要があります。 デフォルトは無効です。
  3. ミュート:ユーザーはミュートを有効/無効にできるはずです。 デフォルトは無効です。
  4. 埋め込みタイプ:ユーザーは、iFrameとJavascriptの組み込みコードを選択できる必要があります。
    1. ビデオ用 player、デフォルトはJavaScriptです。
    2. プレイリストの場合 player、デフォルトはiFrameです。
  5. サイジング:ユーザーは、レスポンシブ[1-1] または固定サイズ設定[1-2].
    1. ビデオ用 player、デフォルトはResponsiveです。
    2. プレイリストの場合 player:
      1. iFrameの場合、デフォルトは[応答]です。
      2. Javascriptの場合、デフォルトは[固定]にする必要があります。
  6. アスペクト比:ユーザーはアスペクト比を選択できる必要があります[1-1].
    1. 選択肢は次のとおりです。
      • 16:9
      • 4:3
      • Custom
    2. デフォルトは 16:9.
  7. 幅高さ:ユーザーは幅と高さを入力できる必要があります[1-1].
    1. アスペクト比が 16:9 or 4:3 身長 フィールドは灰色で表示され、 アスペクト比.
    2. デフォルト値は 640 for 360 for 身長 アスペクト比がカスタムの場合。

ノート

  • [1-1] CMSが埋め込みコード用のネイティブコンテナーを提供し、ユーザーがレスポンシブvs固定および幅/高さを指定できるようにする場合、サイズ変更にコンテナーを使用し、Brightcove埋め込みコードが常に応答するようにする方が理にかなっています。
  • [1-2] 以下に含まれるレスポンシブル埋め込みコードは、幅を最大幅として使用します。

統合に関する一般的なヘルプ Video Cloud あなたのCMSで

ビデオクラウドをCMSと統合する

のリストを取得する players

Player Management API 参照

識別プレイリスト players

  1. リストの反復 playerによって返された Player Management API 上記の参照要求。
  2. 探して playlist フィールド:
    1. フィールドが存在し、値が true、それはプレイリストです player
    2. 値が false または playlist 存在しない場合は、次の手順を実行します。
  3. を繰り返す plugins リスト(もしあれば)を探して registry_id 〜と等しいフィールド @brightcove/videojs-bc-playlist-ui; それが存在する場合、それはプレイリストです player; そうでない場合は、そうではありません。 ここに戻り値のサンプルがあります playersリスト:
    "items": [
       {
          {
          "account_id": "4031511818001",
          "branches": {
            "master": { "configuration": {
              "playlist": true, "plugins": [
                  {
                    "options": {
                      "account_id": "4031511818001",
                      "branches": {
                        "master": { "configuration": {
                          "id": "NkVhrXzug",
                          "playlist": true,
                          "plugins": [], // this is a v1 playlist player ...
            {
              "account_id": "4031511818001",
              "branches": {
                "master": { "configuration": {
                  "playlist": true,
                  "plugins": [
                    {
                      "options": {
                        "playOnSelect": true
                      },
                      "registry_id": "@brightcove/videojs-bc-playlist-ui",
                      "version": "2.x" // this is a v2 playlist player
                      }
                    }
                  ] ...
    

パラメータとコードを埋め込む

以下のセクションでは、Brightcoveを生成する方法について説明します player ユーザーの選択に基づいてコードを埋め込みます。 の %XYZ% 以下のように埋め込みコードに値が代入されます。

共通パラメータ

  • %AUTOPLAY% =自動再生if Autoplay 有効にしてください。それ以外の場合は null 文字列
  • %MUTED% =ミュートされている場合 Muted 有効にしてください。それ以外の場合は null 文字列
  • %ACCOUNTID% =ユーザーが選択したBrightcoveアカウントID
  • %VIDEOID% =ユーザーが選択したビデオID
  • %PLAYLISTID% =ユーザーが選択したプレイリストID
  • %PLAYERID% =ユーザーが選択したビデオ player IDまたはプレイリスト player ID
  • %CMS% = CMSの名前
  • %CMSVERSION% = CMSのバージョン
  • %CONNECTORVERSION% =コネクタのバージョン

iFrameビデオ player 埋め込みます

応答サイズのパラメータ(最大サイズ)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

固定サイズのパラメータ

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Brightcove埋め込みコード

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?videoId=%VIDEOID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style= width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div

実装例

サンプル実装
Iframeサンプルの実装

JavaScript(ページはめ込み) player 埋め込みます

応答サイズのパラメータ(最大サイズ)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

固定サイズのパラメータ

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Brightcove埋め込みコード

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%; ">
    <video-js data-video-id="%VIDEOID%"
      data-account="%ACCOUNTID%"
      data-player="%PLAYERID%"
      data-embed="default"
      data-usage="cms: :%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript" class="video-js"
      controls %AUTOPLAY% %MUTED%
      style="width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </video-js>
    <script src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.min.js"></script>
  </div>
</div>

実装例

ページはめ込みサンプルの実装
ページはめ込みサンプルの実装

iFrameプレイリスト Player 埋め込む

応答サイズのパラメータ(最大サイズ)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

固定サイズのパラメータ

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Brightcove埋め込みコード

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?playlistId=%PLAYLISTID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style=" width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div>

実装例

ページはめ込みサンプルの実装
ページはめ込みサンプルの実装

JavaScript(ページはめ込み)プレイリスト player 埋め込みます

応答サイズのパラメータ(最大サイズ)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%PADDINGTOP% = na
%WIDTH% = 100%
%HEIGHT% = 65%
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% = Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

固定サイズのパラメータ

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = Width . ‘px’
%PADDINGTOP% = na
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% =Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Brightcove埋め込みコード

<style type="text/css">
  .vjs-playlist {
    background-color: #000000;
    width: %WIDTH%;
    height: calc (%THUMBNAILHEIGHT% + 16px);
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .vjs-playlist-title-container {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-playlist-now-playing-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-up-next-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
    text-align: right;
  }

  .vjs-playlist-duration {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-mouse.vjs-playlist {
    background-color: #000000;
  }

  li.vjs-playlist-item {
    background-color: #000000;
    height: %THUMBNAILHEIGHT%;
    width: %THUMBNAILWIDTH%;
    display: inline-block;
    border: 2px solid #000000;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
  }

  li.vjs-playlist-item:hover {
    border-color: #FFFFFF;
  }
</style>
<div style="
display: block; position: relative; width: %WIDTH%; height: ; min-width:
%MINWIDTH%; max-width: %MAXWIDTH%; ">
  <video-js data-playlist-id="%PLAYLISTID%" data-account="%ACCOUNTID%" data-player="%PLAYERID%" data-embed="default" data- usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript " class="video-js" controls %AUTOPLAY% %MUTED% style="
width: %WIDTH%; height: %HEIGHT%; position: relative;
top: 0px; bottom: 0px; right: 0px; left: 0px;
“> </video-js> <script
src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index .min.js "></script>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse "></ol> </div>

実装例

ページはめ込みサンプルの実装
ページはめ込みサンプルの実装

付録A

開く前にビデオまたはプレイリストが選択されていない場合 player 埋め込みダイアログでは、動画またはプレイリスト(および必要に応じてBrightcoveアカウント)をダイアログで選択できる必要があります。 ダイアログは、以下にリストされたフィールドをユーザーに提示する必要があります。

  1. ブライトコーブアカウント: まだ選択されていない場合、ユーザーはBrightcoveアカウントを選択できるはずです。
  2. 検索フィルター: ユーザーは、検索文字列を入力して、表示されている動画または再生リストのリストをフィルタリングできる必要があります。 Brightcove検索APIを使用する場合、検索文字列はURIエンコードする必要があります(以下の例を参照)。
  3. フォルダ: ユーザーは、Brightcoveアカウントからフォルダ名を選択して、表示された動画のリストをフィルタリングできる必要があります。 Brightcove APIにはフォルダーの組み込みフィルターが用意されていないため、クライアントコードはすべての動画を取得してからフォルダーでフィルターする必要があります。 (プレイリストには適用されません)
  4. 制限: ユーザーは、主に検索のパフォーマンスを向上させるために、返される動画の数を制限できる必要があります。 Brightcove検索を使用する場合、指定できる最大制限は100です。100を超える動画を返すには、ページングメカニズムを実装する必要があります。 また、ユーザーがフィルタリングするフォルダーを選択した場合、クライアントはページングメカニズムを使用してアカウント内のすべての動画をリクエストし、そのリストをフォルダーでローカルにフィルタリングして、ユーザー制限で指定された動画の数を返す必要があります。 (プレイリストには適用されません)
  5. 並べ替え: ユーザーはソートフィールドを選択できる必要があります。
    1. 動画の場合、ユーザーは動画名、更新日、作成日、開始日、合計再生回数を選択できる必要があります。 デフォルトは更新された日付でなければなりません。
    2. プレイリストの場合、ユーザーは名前と変更日のいずれかを選択します。 デフォルトは変更日である必要があります。
  6. ソート順: ユーザーは昇順または降順のソート順を選択できます。 デフォルトは降順である必要があります。

ダイアログの動作は次のとおりです。

  1. 上記のユーザーの選択に基づいてビデオまたはプレイリストのリストを表示します。 ユーザーが1つのビデオまたは1つのプレイリストを選択できるようにします。
  2. ビデオのリストを表示するとき:
    1. アクティブな動画のみがリストに表示されます。
    2. サムネイル画像、動画名、IDを表示する必要があります。
    3. 選択できるビデオは1つだけです。
  3. プレイリストのリストを表示するとき:
    1. プレイリストが手動プレイリストの場合は、プレイリストにプレイリスト名、ID、およびビデオ数を表示します。
    2. プレイリストがスマートプレイリストの場合は、ビデオ数の代わりにプレイリスト名、IDおよび - を表示します。
    3. 1つのプレイリストしか選択できません。
  4. 動画または再生リストを開くクリック可能なリンクを表示する player 新しいブラウザタブで。

関連するBrightcoveのドキュメント

ダイアログの実装例

ビデオの選択

ビデオ選択ダイアログ
ビデオ選択ダイアログ

プレイリストの選択

プレイリスト選択ダイアログ
プレイリスト選択ダイアログ

URIエンコードの例

  1. 検索文字列: great+blue

    の文字列 CMS API コールは次のようになります。 great%2Bblue

    返された動画:すべての語句が含まれます: great そして blue[2-1]

  2. 検索文字列: great blue

    の文字列 CMS API コールは次のようになります。 great%20blue

    返される動画にはすべて次の単語が含まれます: great OR blue[2-1]

  3. 検索文字列: "great blue"

    の文字列 CMS API コールは次のようになります。 %22great%20blue%22

    返される動画は、完全なフレーズを含むすべてです: great blue[2-1]

ノート

  • [2-1] ステミング すべての場合に適用されます。 上記のような検索はタイトルの動画と一致します Great Blues と同様 Great Blue Heron.

ページの最終更新日:12年2020月XNUMX日