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

    ステップバイステップ:ページ内エクスペリエンスの作成と公開

    このクイックスタートの目的は、Brightcove ギャラリーを使用してページ内エクスペリエンスを作成する方法を示すことです。

    このクイックスタートを完了すると、次の事項ができるようになります。

    • ギャラリーを使用して新しいエクスペリエンスを作成する
    • ページ内エクスペリエンスに動画を追加する
    • ページ内エクスペリエンスのカスタマイズとスタイル設定
    • ページ内エクスペリエンスをプレビューして公開する

    Audience

    Web ページに埋め込むことができるページ内エクスペリエンスを作成する Video Cloud パブリッシャーです。

    前提条件

    クイックスタートアセットを使用する

    このクイックスタートで提供されるサンプル動画を使って説明を受けたい場合は、次の手順を行います。

    1. サンプルファイルをダウンロードします
    2. アップロードモジュールを使用してビデオを Video Cloud アカウントにアップロードします
    3. Media モジュールを使用して Animals プレイリストを作成し、その動画を再生リストに追加します。
    4. Playersモジュールを使用して、GalleryPlayerと呼ばれる新しいBrightcovePlayerを作成します

    ギャラリーを使用してページ内エクスペリエンスを作成する

    Brightcove ギャラリーを使用してページ内エクスペリエンスを作成するには、以下のタスクを実行します。

    アカウントを選択する

    Video Cloud サブスクリプションによっては、複数の Video Cloud アカウントにアクセスできる場合があります。開始する前に、正しいアカウントを使用していることを確認してください。

    1. ビデオクラウドスタジオにログインします
    2. お客様の現在のVideo Cloudアカウント名がページの右上隅に表示されます。複数のアカウントがある場合は、アカウント選択ドロップダウンをクリックし、ページ内エクスペリエンスを作成するアカウントを選択します。このアカウントには、使用したい動画が存在している必要があります。
    3. ナビゲーションヘッダーの [ ギャラリー ] をクリックします。

    新しいページ内エクスペリエンスの作成

    新しいページ内エクスペリエンスを作成するには、次の手順に従います。

    1. ページ上部の [ エクスペリエンス ] リンクをクリックします。
    2. エクスペリエンスを作成していない場合は、プロジェクトなしページが表示されます。[ インページ ] の横にある [ 作成 ] をクリックします。

      既存のエクスペリエンスがある場合は、[ 新しいエクスペリエンス ] をクリックし、ページ上部の [ページ内 ] リンクをクリックします。

    3. ページ内エクスペリエンステンプレートの一覧が表示されます。[ 垂直プレイリスト ] テンプレートを探し、[ 選択 ] をクリックします。
    4.  エクスペリエンスタイトルエクスペリエンスの説明を入力します。[ レイアウトサイズ ] で [ レスポンシブ ] を選択します。
    5. [ エクスペリエンスの作成 ] をクリックします。

    レイアウトエディタが開きます。エクスペリエンスのタイトルがページの上部に表示されます。タイトルはエクスペリエンスの詳細の一部として変更できます

    エクスペリエンスのカスタマイズ

    オブジェクトをエクスペリエンスに追加して、外観をカスタマイズできます。ページ内エクスペリエンスは異なる状態を持ち、各ステートをカスタマイズできます。次の状態をカスタマイズできます。

    • 再生前 -ビデオ再生が開始される前の最初のレンダリング時のエクスペリエンスの表示方法
    • プレイ中 -動画が再生されているときのエクスペリエンスの表示方法
    • プレイ後 -ビデオの再生後にエクスペリエンスがどのように表示されるか

    異なる状態を編集するには、ステートをクリックし、必要に応じてコンポーネントをエクスペリエンスに追加します。詳細については、「ページ内エクスペリエンスのカスタマイズ」を参照してください。

    ページ内エクスペリエンスにオブジェクトを追加するには、次の手順に従います。

    1. 左側のナビゲーションで [ レイアウト ] をクリックします。
    2. 再生前 (PLAY ) 状態をクリックします。プラスアイコン()は、コンポーネントをエクスペリエンスに追加できる場所を示します。エクスペリエンスの上部にあるプラスアイコンをクリックします。コンポーネントピッカーが開きます。
    3. [ イメージ ] コンポーネントをクリックします。参照リンクをクリックし、エクスペリエンスのヘッダーとして使用する画像を選択します。クイックスタートサンプルファイルには、使用できるイメージが含まれていることに注意してください。
    4. [保存]をクリックします。画像はエクスペリエンスに表示されます。
    5. 画像コンポーネントの上にあるプラスアイコンをクリックし、テキストコンポーネントをエクスペリエンスに追加します。テキストを入力し、[ 保存 ] をクリックします。
    6. エクスペリエンスに画像とテキストが表示されることを確認します。

    コンポーネントプロパティを編集したり、コンポーネントを削除するには、コンポーネントの上にカーソルを置き、編集アイコンまたは削除アイコンをクリックします。

    エクスペリエンスに動画を追加する

    選択したテンプレートによっては、エクスペリエンスに一度に 1 つまたは複数のビデオが表示される場合があります。動画はエクスペリエンスに手動で追加したり、プレイリストを選択したり、参照 ID を提供したりできます。ページ内エクスペリエンスに動画を追加する方法の詳細については、「ページ内エクスペリエンスに動画を追加する」を参照してください。

    ページ内エクスペリエンスに動画を追加するには、次の手順に従います。

    1. 左側のナビゲーションの [ 動画 ] アイコンをクリックします。
    2. [ ビデオを追加 ] をクリックします。
    3. 追加するビデオを手動で選択するには、 [ビデオを選択 ] の [ 方法 ] を選択します。または、[ プレイリストの選択] の [方法 ] を選択し、サンプル動画で作成した動物プレイリスト
    4. [選択]をクリックします。ビデオのリストが表示されます。

    ビデオへのインタラクティブ性の追加

    リンクとカードのやりとりは、動画に追加できます。インタラクションは、ビデオの再生と同時に表示されます。エクスペリエンスにインタラクティブ機能を追加する方法の詳細については、「ページ内エクスペリエンスへのインタラクションの追加」を参照してください。

    ビデオのインタラクティブ性を設定するには、次の手順に従います。

    1. 左側のナビゲーションの [ 動画 ] アイコンをクリックします。
    2. インタラクティブ機能を追加するビデオを選択し、[ アクション ] 列のリンクアイコン ( ) をクリックします。
    3. リンクテキストとリンク URL を追加します。プレビュープレーヤーには、リンクのプレビューが表示されます。
    4. [ 構成 ] リンクをクリックします。
    5. [ % への切り替え ] リンクをクリックします。開始時間を、ビデオの 50% ポイントに設定します。
    6. [ 再生時間 ] で、[ 動画が終了するまで] をオンにします。
    7. [ 設計 ] リンクをクリックします。プレイヤーの右下に表示されるようにリンクを設定します。
    8. [保存]をクリックします。ビデオに設定されているすべてのインタラクションのリストが表示されます。
    9. ダイアログのタイトルで [ X ] をクリックして、対話型エディタを閉じます。

    インタラクティブ機能を持つビデオは、[ インタラクティビティ ] 列に、設定されているインタラクションの種類を示すアイコンが表示されます。

    スタイルのカスタマイズ

    このスタイルは、エクスペリエンスで使用されるフォントと色を制御します。スタイルのカスタマイズの詳細については、「ページ内エクスペリエンスのスタイルのカスタマイズ」を参照してください。

    スタイルを設定するには、次の手順を実行します。

    1. 左側のナビゲーションで [ スタイル ] をクリックします。
    2. グローバルスタイルを見つけます。[ 文字の色 ] 円をクリックし、文字の色を赤に変更します。以前にエクスペリエンスに追加したテキストコンポーネントが赤に変わります。
    3. [ X ] をクリックして、カラーピッカーを閉じます。
    4. ビデオタイトルスタイルを見つけます。[ 文字の色 ] 円をクリックし、文字の色を青に変更します。[ X ] をクリックして、カラーピッカーを閉じます。
    5. 左側のナビゲーションを一番上にスクロールし、[ レイアウトに戻る ] リンクをクリックします。

    エクスペリエンス設定の構成

    エクスペリエンス設定は、使用するプレイヤー、ソーシャル設定、その他の設定など、エクスペリエンスのさまざまな側面を制御します。設定のカスタマイズの詳細については、「ページ内エクスペリエンスの設定を構成する」を参照してください。

    エクスペリエンスの設定を構成するには、次の手順を実行します。

    1. 左側のナビゲーションで [ 設定] [> プレーヤー ] をクリックします。
    2. [ 利用可能なプレーヤー ] ドロップダウンリストを使用して、以前に作成したギャラリープレーヤーを選択します。これは、ページ内エクスペリエンスで使用されるプレーヤーです。
    3. [ 次のビデオに自動的に進める ] オプションを選択します。
    4. [保存]をクリックします。
    5. 左側のナビゲーションで [ 設定] [> ソーシャル ] をクリックします。
    6. ソーシャル共有オプションの表示方法を選択します。
    7. 動画を共有できるソーシャルメディアサイトを選択します。サイトによっては、カスタムメッセージを投稿することもできます。
    8. [保存]をクリックします。

    エクスペリエンスの詳細を確認する

    エクスペリエンスの詳細には、エクスペリエンスのタイトルとサイズ設定が構成される場所です。エクスペリエンスの詳細のカスタマイズの詳細については、「ページ内エクスペリエンスの詳細の設定」を参照してください。

    エクスペリエンスの詳細を構成するには、次の手順を実行します。

    1. 左側のナビゲーションで [ OVERVIEW ] をクリックします。
    2. 必要に応じて、エクスペリエンスのタイトルと説明を編集します。
    3. [ レイアウトサイズ] が [ レスポンシブ ] に設定されていることを確認します。レイアウトサイズが [レスポンシブ] に設定されている場合、そのコンテナがページに収まるようにサイズが変更されます。
    4. 変更を加えた場合は、[ 保存 ] をクリックします。

    ページ内エクスペリエンスのプレビューと公開

    ページ内エクスペリエンスをプレビューすると、Gallery インターフェイス内で表示しなくても、エクスペリエンスがどのように表示されるかを確認できます。ページ内エクスペリエンスを公開すると、Web ページ内にエクスペリエンスを表示するために必要な埋め込みコードが生成されます。ページ内エクスペリエンスのプレビューと発行の詳細については、「ページ内エクスペリエンスのプレビューと公開」を参照してください。

    1. ページ内エクスペリエンスをプレビューするには、エクスペリエンスを編集し、[ プレビュー ] をクリックします。
    2. デスクトッププレビューが新しいブラウザタブで開きます。
    3. 左上隅のドロップダウンリストを使用して、さまざまなデバイスの種類やさまざまなエクスペリエンスの状態でのエクスペリエンスをプレビューできます。モバイルプレビューが下に表示されます。
    4. ページ内エクスペリエンスを公開するには、[ 公開と埋め込み ] をクリックします。
    5. [ 発行 ] または [ 変更を公開 ] をクリックします。
    6. 公開プロセスが開始され、完了すると、公開ステータスが [このエクスペリエンスは最新です ] に変わります。 エクスペリエンスが更新されるまで数分かかる場合があります。

    ページ内エクスペリエンスが公開された後、共有可能な URL を他のユーザーと共有して、エクスペリエンスをプレビューできます。埋め込みコードを使用して、ページ内エクスペリエンスを既存の Web ページに埋め込むことができます。