サポート サポートへのお問い合わせ | システムステータス システムステータス
ページコンテンツ

    CMS へのページ内エクスペリエンスの埋め込み

    このトピックでは、Brightcove のページ内エクスペリエンスを CMS に統合するためのガイドラインを示します。

    はじめに

    Brightcove では、基本的な 1 つの動画プレーヤーとプレイリストプレーヤーに加えて、ページ内エクスペリエンスと呼ばれるマルチ動画プレイヤータイプも提供しています。ユーザーは、エクスペリエンスを簡単に埋め込み、Brightcove エクスペリエンスの埋め込みコードの生成に可能な限り柔軟性を提供して、HTML や JavaScript のエキスパートなしでルックアンドフィールを制御できるようにしたいと考えています。

    ページ内エクスペリエンスは、 Video Marketing Suite および Enterprise Video Suite に含まれている Gallery の一部であり、Video Cloud のアドオンパッケージとしても購入できます。詳細はアカウントマネージャーにお問い合わせください。

    ページ内エクスペリエンスの選択ダイアログ

    ユーザーがページ内エクスペリエンスを選択できるダイアログがあるはずです。このダイアログでは、ユーザーが以下のフィールドを設定できるようになります。

    1. Brightcove のアカウント:Brightcove アカウントが選択されていない場合、ユーザは選択できるはずです。
    2. 検索フィルタ:ユーザーは検索文字列を入力して、表示されるエクスペリエンスのリストをフィルタリングできる必要があります。Brightcove の検索 API を使用する場合は、検索文字列を URI エンコードする必要があります。
    3. 注文:表示されるエクスペリエンスのリストは、名前でソートする必要があります。ユーザーは、昇順または降順を選択できる必要があります。デフォルトは昇順である必要があります。

    このダイアログには次の動作が必要です。

    1. 上記のユーザー選択に基づいて、エクスペリエンスのリストを表示します。ユーザーが 1 つのエクスペリエンスを選択できるようにします。
    2. 表示されるエクスペリエンスのリスト:
      1. 公開されたエクスペリエンスのみを表示する必要があります
      2. エクスペリエンスの名前、テンプレート、および ID が表示されます。
    3. エクスペリエンスプレーヤーを新しいブラウザータブで開くクリック可能なリンクを表示します。

    ダイアログの実装例

    エクスペリエンスの選択ダイアログの例
    エクスペリエンスの選択ダイアログの例

    ページ内エクスペリエンスの埋め込みダイアログ

    Web ページ上のインページエクスペリエンスの書式設定をユーザーが制御できるダイアログがあるはずです。このダイアログでは、ユーザーが以下のフィールドを設定できるようになります。

    1. 埋め込みタイプ:ユーザーは、iFrameとJavaScriptの埋め込みコードのいずれかを選択できるはずです。デフォルトは JavaScript である必要があります。
    2. サイズ:ユーザーは、レスポンシブサイズまたは固定サイズのいずれかを選択できる必要があります。[ 1-1]
      1. iFrameの場合、デフォルトは固定され、レスポンシブは無効にする必要があります。
      2. Javascriptの場合、デフォルトはレスポンシブでなければなりません。
    3. 幅、高さ:ユーザーは [幅] と [高さ] を入力できる必要があります。[ 1-1]
      1. iFrameの場合、デフォルトは固定され、レスポンシブは無効にする必要があります。
      2. 応答する場合は、幅と高さを無効にする必要があります。
    4. エクスペリエンス動画の上書き:ユーザーは、動画のリストまたは再生リストを使用して、エクスペリエンスの既定の動画を上書きできる必要があります。ユーザーがエクスペリエンス動画を上書きすることを選択した場合は、以下の「エクスペリエンス動画の上書き」セクションに従って動画または再生リストを選択できます。

    このダイアログには、次の追加の動作が必要です。

    1. 生成された Brightcove 埋め込みコードは、ダイアログでユーザに表示されます。
    2. ユーザーは、埋め込みコードを編集できる必要があります。埋め込みコードの設定にできるだけ柔軟にユーザーを提供しようとしていますが、自動的に生成されるものをオーバーライドする必要がある場合があります。
    3. ユーザーがダイアログで以前の選択の1つを変更した場合、ユーザーの編集は新しく生成されたコードで上書きされます。

    • [ 1-1] CMS がコードを埋め込むためのネイティブコンテナを提供しており、ユーザーがレスポンシブ対固定および幅/高さを指定できる場合は、コンテナをサイジングに使用し、Brightcove の埋め込みコードを常にレスポンシブにする方が理にかなっています。

    エクスペリエンス動画の上書き

    ユーザーがエクスペリエンスビデオを上書きすることを選択した場合、ダイアログでユーザーが以下のフィールドを設定できるようになります。

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

    このダイアログには次の動作が必要です。

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

    ビデオオーバーライドダイアログの実装例

    サンプルビデオオーバーライドダイアログ
    サンプルビデオオーバーライドダイアログ

    プレイリストオーバーライドダイアログの実装例

    サンプルビデオオーバーライドダイアログ
    サンプルビデオオーバーライドダイアログ

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

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

    共通パラメータ

    • %ACCOUNTID% = ユーザーが選択したBrightcove のアカウント ID
    • %VIDEOIDLIST% = ユーザーが選択した動画 ID(スペースなしでカンマ区切り)
    • %PLAYLISTID% = ユーザーが選択したプレイリスト ID
    • %EXPERIENCEID% = ユーザーが選択したビデオプレーヤーIDまたはプレイリストプレーヤー ID
    • %CMS% = CMS の名前
    • %CMSVERSION% = CMS のバージョン
    • %CONNECTORVERSION% = コネクタのバージョン

    iFrame エクスペリエンスプレーヤーの埋め込み

    レスポンシブサイジングのパラメータ

    該当なし-レスポンシブオプションは選択できません

    固定サイズのパラメータ

        %MAXWIDTH% = ‘’
        %MINWIDTH% = ‘’
        %WIDTH% = Width . ‘px’
        %HEIGHT% = Height . ‘px’

    Brightcove の埋め込みコード

        <div style="display:block;position:relative;width:%WIDTH%;height:%HEIGHT%">
          <iframe src="https://players.brightcove.net/%ACCOUNTID%/experience_%EXPERIENCEID%/index.html?videoIds=%VIDEOIDLIST%
            &playlistId=%PLAYLISTID%
            &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:experienceiframe" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" style="width:100%;height:100%;top:0px;bottom:0px;right:0px;left:0px;border:none;margin-left:auto;margin-right:auto;position:absolute">
          </iframe>
        </div>

    実装例

    実装例
    実装例

    JavaScript (ページ内) エクスペリエンスプレーヤーの埋め込み

    レスポンシブサイジングのパラメータ

        
          %WIDTH% = ‘’[2-1]
          %HEIGHT% = ‘’[2-1]
        

    • [ 2-1] 幅と高さはユーザーが選択できない

    固定サイズのパラメータ

        
          %WIDTH% = Width . ‘px’
          %HEIGHT% = Height . ‘px’
        

    Brightcove の埋め込みコード

        <div style="display:block;position:relative;width:%WIDTH%;height:%HEIGHT" data-experience="%EXPERIENCEID%" data-video-ids=”%VIDEOIDLIST% "
          data-playlist-id=”%PLAYLISTID%" data-usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:experiencejavascript" style="
          display: block;
          position: relative; ">
        </div>
        <script src="//players.brightcove.net/%ACCOUNTID%/experience_%EXPERIENCEID%/live.js "></script>

    実装例

    実装例
    実装例