Adobe-AEM-Brightcoveコネクタ：コネクタの使用
はじめに
Adobe-AEM Brightcove コネクタを使用すると、AEM 内で Brightcove ビデオクラウドの動画とプレーヤーを管理し、AEM ページに動画を簡単に埋め込むことができます。
Brightcove AEM コネクタは、次のコンポーネントで構成されています。
ビデオプレーヤーの公開
動画プレーヤーを公開すると、ユーザーは Brightcove Player コンポーネントを Web ページにドラッグし、そのコンポーネントの Brightcove アカウント、動画、およびプレーヤーを選択できます。このコンポーネントは、クラシック UI モードの v4.2 コネクタでのみ使用可能です。v5.1 コネクタでは、このコンポーネントはクラシック UI モードとタッチ UI モードの両方で使用できます。v4.2 からの別の変更点として、従来の Smartplayer コンポーネントは使用できなくなっています。HTML5 ブライトコーブプレーヤーコンポーネントのみが利用可能になりました。従来の SmartPlayer コンポーネントを含む既存の Web ページには、これらのコンポーネントが含まれている可能性がありますが、新しい SmartPlayer コンポーネントを Web ページに追加することはできません。
- 次のようなサイトページを参照します。
/editor.html/content/we-retail/us/en.html
このサイトページの Brightcove Player コンポーネントを有効にします。
- [テンプレートを編集] ダイアログを開きます。
テンプレートの編集を開く - 右上隅の [構造] メニューから、[構造] を選択します。
構造を選択 - [ コンポーネントをここにドラッグするレイアウトコンテナ]領域をクリックして上部にメニューを表示し、[ポリシー] アイコンをクリックします。
レイアウトコンテナメニューを開く - 許可するコンポーネントリストで Brightcoveを検索し、Brightcove ビデオプレーヤーおよびプレイリストプレーヤーコンポーネントを選択します。
Brightcoveプレーヤーのコンポーネントを許可する - クリック
変更を保存するためのアイコン。 - 左側のコンポーネントリストからテンプレートに Brightcove プレーヤーをドラッグできるようになりました。
Brightcoveプレーヤーをテンプレートに追加する - Embedded Player コンポーネントを選択し、[ 構成]アイコンをクリックします。
コンポーネントアイコンの設定 - [構成]ダイアログで、アカウント、ビデオ、およびプレーヤーを選択し、[ :
[プレーヤーの設定] ダイアログ - 場合によっては、Brightcove プレーヤーの詳細オプションを設定する必要がある場合があります。 最も一般的な状況は、ブライトコーブのプレイリストプレーヤーを使用する場合、プレイリストのルックアンドフィールを設定するために CSS を追加する必要があります。
[プレーヤーの設定] ダイアログの詳細オプション
以下は、プレイリストをフォーマットするためのサンプルCSSです。サムネイルの高さと幅を計算する必要があることに注意してください。開始点として、以下の数式を使用できます。
THUMBNAILWIDTH = Round((PLAYERWIDTH - NUMTHUMBNAILS * 4)/ NUMTHUMBNAILS);
THUMBNAILHEIGHT = Round(THUMBNAILWIDTH * PLAYERHEIGHT / PLAYERWIDTH);CSSの例:
<style type="text/css"> .vjs-playlist { background-color: #000000; width: PLAYERWIDTH; 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> - 最初に、ビデオが再生できないことを示すエラーが表示されることがあります。これは、プレーヤーが編集モードで正常に機能しないためです。 プレビューモードに切り替えてビデオを再生します。
ビデオクラウドエラー
ビデオコンテンツ管理
v5.x コネクタのビデオコンテンツ管理では、AEM DAM を使用して Brightcove にビデオをアップロードし、ブライトコーブのメタデータを更新します。以前のバージョンのコネクタでは、の管理ページを使用して Brightcove /brightcove/adminにビデオをアップロードしていました。
AEM DAM セットアップ
Brightcove で AEM DAM を初めて使用する前に、ブライトコーブの設定ページで指定された DAM 統合パスフォルダー構造を作成する必要があります。/system/console/configMgrデフォルトは、/content/dam/brightcove_assets設定ページで変更しない場合です。 このフォルダの下には、Brightcove アカウントごとにフォルダを作成する必要があります。フォルダ名は、Brightcove 設定のアカウント ID の数値で、フォルダタイトルは Brightcove 設定のアカウントエイリアスである必要があります。
クラシック UI では、フォルダはで作成できます/damadmin#/content/dam。Touch UI では、/assets.html/content/damフォルダはで作成されます。または、の管理ページの「データベースの同期」ボタンによって、設定された Brightcove アカウントごとに必要なフォルダーが AEM DAM に作成され、/brightcove/adminインポートされます。Brightcove アカウントにすでに存在するすべての動画。ブライトコーブ内の一部またはすべての動画を同期したくない場合、 ブライトコーブタグが AEM NO_DAM の動画は AEM DAM に同期されません。
また、クラシック UI で AEM DAM を使用している場合は、表示時に以下に示すように「タイトル」フィールドを有効にします/damadmin#/content/dam。
動画を AEM DAM にアップロードしてからブライトコーブに公開すると、 元の動画ファイルは AEM DAM に保持されます。実装によっては、AEM データベースに「master」ビデオを保持することをお勧めしますが、他の実装では AEM データベースのサイズが大きくなりすぎるので好ましいものではありません。元のビデオを AEM DAM に保存したくないが、Brightcove Studio インターフェイスを使用してビデオをアップロードしたくない場合は、Brightcove に一度公開した後に AEM DAM 内のビデオを削除するだけで、Brightcove から Brightcove からインポートされます。SYNC DATABASE操作によってトリガーされる、次の同期中のサムネイルイメージのプレースホルダ。
また、AEM DAM 経由でビデオをアップロードして Brightcove に公開し、後で Brightcove Studio でそのビデオのソースファイルを置き換えると、次回の同期データベース中に AEM DAM に新しいアセットが作成されます。 ソースファイルが置換されると、Brightcove に新しい VideoID が作成されるためです。 ただし、AEM DAM から公開されたビデオのメタデータをブライトコーブ Studio で更新すると、AEM DAM の既存アセットのメタデータが予想どおりに更新されます。
クラシック UI で新しい動画をアップロードする
- クラシック UI で新しいビデオをアップロードするには
/damadmin#/content/dam/brightcove_assets、使用する Brightcove アカウントのフォルダを参照して開き、[新規] > [新規ファイル] をクリックします。
新しいビデオを追加 - アップロード後、タイトルフィールドを編集するか、空白のままにすると、アセットを公開するときに DAM にアップロードされたビデオファイルの名前が設定され、 ブライトコーブにアップロードされます。[タイトル] フィールドは、新しい資産の [タイトル] フィールドをクリックすると、DAM 資産リストビューで編集できます。
ビデオタイトルの編集 - または、新しいアセットを開き、[ タイトル]フィールドを編集して変更を保存することもできます。
アセットプロパティでタイトルを編集する - その他のメタデータフィールドはオプションです。ただし、ブライトコーブのカスタムフィールドの場合もあります。ただし、AEM Classic UI の制限により、5.x バージョンの Connector でサポートが追加された Brightcove カスタムフィールドは、クラシック UI では編集できず、代わりにタッチ UI を使用する必要があります。
- この時点で、ビデオは AEM DAM にのみ存在します。動画を Brightcove と同期するには、アセットリストビューで新しいアセットを選択し、[アクティブ化] をクリックして Brightcove に動画を公開します。
Brightcoveに動画を送信
タッチ UI でのファイルのアップロード
- Touch UI で新しいビデオをアップロードするには
/assets.html/content/dam/brightcove_assets/、使用する Brightcove アカウントのフォルダーを参照して開き、[ 作成] > [ファイル] をクリックします。
ビデオタッチUIの追加 - 動画をアップロードしたら、必要に応じて [ タイトル ] フィールドを編集します。タイトルフィールドを編集するには、新しいアセットを開き、「プロパティを表示」を選択し、「基本プロパティ」ページで「タイトル」を編集します。
アセットのプロパティ 
タイトルの編集-タッチUI - その他のメタデータフィールドはオプションです。ただし、ブライトコーブのカスタムフィールドの場合もあります。
- 動画を Brightcove と同期するには、アセットビュー内で [公開] を選択します。
Brightcoveに動画を送信-アセットビュー - または、リスト、カード、列ビューで新しいアセットを選択し、[公開] をクリックして Brightcove に動画を公開することもできます。
Brightcoveに動画を送信-アセットリスト
AEM DAM でのサムネイルとポスター画像の変更
DAM の動画アセットにある brc_thumbnail.png と brc_poster.png という名前のレンディションを上書きすることで、ブライトコーブでサムネイル画像とポスター画像を更新できます。クラシック UI で、/damadmin #/content/dam/brightcove_assets を参照してビデオアセットを開き、[レンディション] タブの [アップロード] をクリックします。
brc_thumbnail.png または brc_poster.png をアップロードしたら、アセットを保存してアクティブ化し、新しいサムネイルとポスター画像をブライトコーブにアップロードします。Touch UI で、/assets.html/content/dam/brightcove_assets/ビデオアセットを参照して開きます。クリックレンディション以下に示すように：
次に [レンディションを追加] をクリックし、brc_thumbnail.png または brc_poster.png という名前のファイルをアップロードし、アセットを公開して、新しいサムネイルとポスター画像をBrightcoveにアップロードします。
AEM からブライトコーブへのビデオのインポート
新しいビデオがBrightcoveStudioに直接アップロードされている場合、および/またはメタデータがBrightcove Studioで直接編集されている場合、 NS SYNCデータベース Brightcove管理ページのボタン/brightcove/admin BrightcoveからAEMDAMに新しいビデオまたは更新されたメタデータを同期するために使用されます。 ブライトコーブから DAM にインポートされたビデオアセットは、元のビデオファイルを AEM DAM にコピーするのではなく、Brightcove サムネイルをアセットのプレースホルダーとして使用することに注意してください。したがって、ブライトコーブから動画をインポートしても、AEM データベースのサイズは大幅に増加しません。
データベース同期は、スケジュールに従って実行するようにセットアップすることもできます。で設定コンソールを開き、「ブライトコーブアセットインテグレーション Cronjob スケジューラ構成」を見つけて開きます。/system/console/configMgr
「CRON 有効化」をクリックし、「CRON スケジューラ」フィールドに有効な CRON 式を入力します。
次のコマンドは、OS から手動で使用して、同期プロセスをトリガーすることもできます。
/usr/bin/curl —anyauth < —ユーザーユーザー名>: < PASSWORD> —サイレント < —圧縮されたインスタンス>/bin/bin/brightCove/Dataload.html
ご了承ください <ユーザー名>：<パスワード> タグとコンテンツを作成するには、Brightcove アカウントへのアクセス権と権限を持つ有効な AEM ユーザーである必要があります。
Brightcoveの管理
以前のバージョンのコネクタでは、の [ブライトコーブの管理] ページを使用して、ビデオをブライトコーブにアップロードし、/brightcove/adminそれらのビデオのメタデータを編集していました。AEM DAM の新しいサポートにより、Brightcove Admin ページは通常、ブライトコーブアカウントのデータのみを表示するために使用されました。たとえば、ブライトコーブの管理者ページには、ブライトコーブへの直接の API 呼び出しを使用して、ブライトコーブアカウントの動画がリアルタイムに表示され、新しい動画がブライトコーブにアップロードされたか、AEM DAM での公開プロセスによってメタデータがブライトコーブに同期されたことを確認できます。
Brightcoveからの再生を確認するには、/system/console/ConfigMgr の Brightcove 設定ページで指定されているデフォルトの動画およびプレイリストプレーヤーを使用して、この Brightcove の管理ページで動画をプレビューできます。
Brightcove管理ページには、 SYNCデータベース BrightcoveからAEMDAMへの同期プロセスを開始するボタン。同期データベースボタンを押して、設定されているすべての Brightcove アカウントを AEM DAM と同期します。 Brightcove内の一部またはすべての動画を同期したくない場合、 Brightcoveタグが AEM NO_DAM の動画は AEM DAM に同期されません。
この同期プロセスは、cron ジョブを介して自動化できるため、手動操作は不要です。
ビデオへのテキストトラックの追加
現在、テキストトラックは、/brightcove/adminのブライトコーブの管理ページからのみビデオに追加できます。テキストトラックは、[ 新しいテキストトラックをアップロード ] ボタンを使用して追加されます。
DAM でレンディションとしてアップロードされたテキストトラックをサポートすることは、後で実装されるロードマップにあります。
ポスター画像の更新
AEM DAM でポスターおよびサムネイル画像を更新する以外に、 次の場所にあるリモート HTTP URL から Brightcove /brightcove/adminにアップロードすることもできます。
