ビデオの追加

概要

SXA ページにビデオを追加する方法について説明します。

ページにビデオを追加するには、さまざまな方法があります。このトピックでは、メディア ライブラリからビデオを追加する方法と、他のプロバイダーからビデオを追加する方法について説明します。

既定の SXA ビデオ コンポーネントには、メディア ライブラリに保存されているか、Web サーバーで直接ホストされている MP4、ogg、WebM ビデオを視聴するためのプレーヤーが組み込まれています。または、YouTube ビデオ ID を指定できます。

ビデオを追加するには、次の手順に従います。

  1. ツールボックスを開きます。[メディア] グループで、[ビデオ] をクリックしてページにドラッグします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[作成] をクリックします。

  3. [アイテムの挿入] ダイアログ ボックスで、[ビデオ] をクリックし、[OK] をクリックします。

  4. ページ上のコンポーネントをクリックし、[ビデオ] ツールバーで [ビデオ プロパティの編集] をクリックします。

    次の表は、ページでビデオを表示する方法を設定するために指定できるフィールドについて説明しています。

    フィールド

    説明

    YouTube ビデオ ID

    YouTube ビデオの一意の ID を追加します。YouTube ビデオは、ホストされているビデオよりも優先されます。

    ポスター画像

    ビデオが始まる前に表示される画像を追加します。

    ラベル

    追跡中に使用するタイトルを追加します。

    長さ

    ビデオを追いかける時間を秒単位で指定します。このパラメーターは、エンディング タイトルなどが原因で、映画が最後まで視聴されない可能性が高い場合に役立ちます。

    mp4 形式のムービー

    mp4 形式のビデオを追加します。

    WebM 形式のムービー

    WebM 形式のビデオを追加します。

    ogg 形式のムービー

    ogg 形式のビデオを追加します。

    ビデオがないときに表示される画像

    訪問者がビデオを再生できないときに表示される画像を追加します。

    ビデオを利用できないときに表示されるテキスト

    訪問者がビデオを再生できないときに表示されるエラー メッセージを追加します。

    自動再生

    ビデオを自動的に開始する場合に選択します。

    注記

    YouTube のポスター画像機能のため、YouTube のビデオはモバイル デバイスで自動再生できません。

他のプロバイダーからビデオを追加するには、いくつかの方法があります。たとえば、この手順では、Vimeo ビデオを追加する方法の 1 つについて説明します。

ギャラリー コンポーネントを使用して Vimeo ビデオを追加するには、次の手順に従います。

  1. ツールボックスを開きます。[メディア] グループで、[ギャラリー] をクリックしてページにドラッグします。

  2. 保存します。

  3. [ギャラリー] ツールバーで、SXA-Gallery-Insertnewitem.png[新規アイテムの挿入] をクリックします。

  4. [アイテムの挿入] ダイアログ ウィンドウで、[ギャラリー ビデオ] をクリックし、名前を入力して [OK] をクリックします。

  5. [ギャラリー ビデオ] ツールバーで、[ギャラリー ビデオ プロパティの編集] をクリックします。

  6. 次のフィールドに入力します。

    フィールド

    説明

    プロバイダー

    ビデオ プロバイダーを選択します。オプションは、YouTube、DailyMotion、Vimeo (公開ビデオのみ) です。

    ビデオ ID

    ビデオ ID または URL を入力します。

    タイトル

    ビデオのタイトルを入力します。

    説明

    ビデオの説明を入力します。

    カスタム ローカル サムネイル

    ビデオのサムネイルを追加します。指定しない場合、サムネイルはビデオ プロバイダーから取得されます。

プレーン HTML コンポーネントを使用してビデオを追加するには、次の手順に従います。

  1. ツールボックスを開きます。[ページ コンテンツ] グループで、[プレーン HTML] をクリックしてページにドラッグします。

  2. 保存します。

  3. [プレーン HTML] ツールバーで、[コンテンツ エディターで HTML ソースを編集する] をクリックします。

  4. HTML コード アイテムがコンテンツ エディターで開きます。[HTML] セクションの "コード" フィールドに、サービス プロバイダーから提供された HTML コードを入力します。