このコンポーネントは、Google 広告、Google AdMob、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
動画コンポーネントを使用すると、動画をプロジェクトに埋め込んでインタラクティブな機能を追加できます。
YouTube 動画を表示したい場合は、YouTube コンポーネントを使用してください。
プロジェクトに動画コンポーネントを追加するには:
- [コンポーネント] パネル、[メディア] フォルダの順に開きます。
- 動画コンポーネント
をステージにドラッグします。広告を作成する場合は、[ファイル] > [アセットをインポート...] コマンドを使用して次の手順を省略することもできます。
- [プロパティ] パネルの [動画] 欄で、[ソース] フィールドに動画ソースファイルの URL を入力します。動画ソースファイルがローカルにある場合は、フィールドで参照ボタン
をクリックして、パソコンのファイル システムから動画を選択します。
- 動画をインタラクティブにするには、ホットスポットやキューポイントを追加します。ステージ上の動画コンポーネントをダブルクリックして、インタラクティブ動画ダイアログを開きます。
- ホットスポットは、指定した時間に動画コンポーネント上に表示されます。
- キューポイントを使用すると、動画の再生中、指定した時点でイベントを発生させることができます。
モバイル ブラウザでの動画
モバイル ブラウザでは、ユーザーがリクエストしていないコンテンツに対して通信料が発生しないように、動画の自動再生が無効になることがあります。モバイル ブラウザでは、自動再生をオフにし、代わりに動画コントロールをオンにすることをおすすめします。
[プロパティ] パネルで、次のように変更します。
- [自動再生] チェックボックスをオフにします。
- [コントロールを表示] チェックボックスをオンにします。
インタラクティブ動画ダイアログ
インタラクティブ動画ダイアログでは、動画をプレビューしたり、ホットスポットやキューポイントを設定したりすることができます。ダイアログには動画タイムラインが含まれているため、ホットスポットやキューポイントが発生するタイミングを確認できます。ホットスポットは、プレイヘッドがホットスポットの開始時間と終了時間の間にあるときに限り、動画のプレビューに表示されます。
インタラクティブ動画ダイアログ コントロール
動画のプレビューの下にある次のボタンを使用して、動画の再生とプレイヘッドの位置を調整できます。
後方にジャンプ(キューポイント、ホットスポットの開始位置や終了位置、動画の先頭に移動) | |
前のフレーム | |
再生 / 一時停止 | |
次のフレーム | |
前方にジャンプ(キューポイント、ホットスポットの開始位置や終了位置、動画の最後に移動) |
黄色で表示されている時間をクリックして秒数を入力することにより、現在の動画再生時点を直接編集することもできます。
キューポイントの追加
- キューポイントを追加する位置に動画タイムライン プレイヘッドがある場合、動画の下にあるキューポイントを作成ボタン
をクリックします。それ以外の場合は、動画タイムラインを右クリックし、ポップアップ メニューから [キューポイントの追加] を選択します。
- キューポイント マーカー
が動画タイムライン上に表示されます。
- キューポイント ID は、右側の [プロパティ] パネルで、またはキューポイントを右クリックして [ID の編集...] を選択することで、編集できます。
- キューポイントの時間を調整するには、動画タイムラインに沿ってキューポイント マーカーをドラッグするか、[プロパティ] パネルに新しい時間を入力します。キューポイントは互いに 0.5 秒以上離れている必要があります。
ダイアログを閉じると、イベントとアクションでキューポイントを参照できるようになります。
キューポイントの削除
キューポイント マーカーを右クリックし、[削除] を選択します。
ホットスポットの追加
- ホットスポットを追加する位置にタイムライン プレイヘッドを移動します。
- 動画タイムラインの左側にある [+ ホットスポット] ボタンをクリックします。新しいホットスポット トラックが動画タイムラインの下に表示されます。
- 右側の [プロパティ] パネルで、オーバーレイとして表示するアセットを選択します。
- ホットスポットを透明にする場合、この手順は省略します。
- 動画アセットを使用する場合、ホットスポットが表示されると動画がコントロールなしで自動的に再生されます。
- ホットスポットの配置、サイズ、タイミングを調整します。
- デフォルトでは、ホットスポットは動画の再生開始前や再生終了後を含め、動画の全期間にわたって表示されます。
- [プロパティ] パネルで変更したり、ホットスポット自体、ホットスポットのサイズ変更ハンドル、動画タイムラインのホットスポット バーをドラッグしたりすることもできます。
ユーザーによるホットスポットのクリックに対応するには、ダイアログを閉じた後に [マウス] > [クリック] を検出するイベントを設定します。
ホットスポットは全画面表示の動画では機能しません。
ホットスポットの削除
動画タイムラインの左側、ホットスポット ID の横にある [X] をクリックします。
プロパティ
動画コンポーネント プロパティ
動画コンポーネント プロパティは [プロパティ] パネルに表示されます(インタラクティブ動画ダイアログを終了する必要があります)。
プロパティ | 説明 |
---|---|
名前 | コンポーネント名。 |
自動再生 | オンにすると、ページが読み込まれたときに動画が自動的に再生されます。一部のモバイル ブラウザではサポートされていません。 |
ループ | オンにすると、動画が繰り返し再生されます。 |
ミュート | オンにすると、動画の再生がミュート状態で開始します。 |
コントロール | オンにすると、動画プレーヤーに標準の動画コントロール バーが表示されます。 |
ソース | 動画ソースの URL。さまざまな形式の複数のソースを含めるには、URL をカンマで区切ります。動的データにバインドできます。 |
ポスター | ユーザーが動画を再生またはシークするまで表示するポスター フレームの URL。動的データにバインドできます。 |
インタラクティブ動画ダイアログでは、キューポイントのプロパティの表示と編集ができます。
プロパティ | 説明 |
---|---|
ID | キューポイント ID。 |
時間 | キューポイントが設定されている時間(秒)。動的データにバインドできます。 |
インタラクティブ動画ダイアログでは、ホットスポットのプロパティの表示と編集ができます。
プロパティ | 説明 |
---|---|
ID | ホットスポット ID。 |
左 | ホットスポットの左端の位置。動画コンポーネントの幅に対する割合で指定します。動的データにバインドできます。 |
上 | ホットスポットの上端の位置。動画コンポーネントの高さに対する割合で指定します。動的データにバインドできます。 |
幅 | ホットスポットの幅。動画コンポーネントの幅に対する割合で指定します。動的データにバインドできます。 |
高さ | ホットスポットの高さ。動画コンポーネントの高さに対する割合で指定します。動的データにバインドできます。 |
表示時間 | ホットスポットが表示されるまでの時間(秒)。[再生前に表示] を選択した場合は適用されません。動的データにバインドできます。 |
再生前に表示 | 動画の再生開始前にホットスポットを表示するかどうか。 |
非表示時間 | ホットスポットが非表示になるまでの時間(秒)。[再生後も表示] を選択した場合は適用されません。動的データにバインドできます。 |
再生後も表示 | 動画の再生終了後にホットスポットを引き続き表示するかどうか。 |
アセット | オーバーレイとして表示する画像、動画、グループ。動的データにバインドできます。 |
スケーリング | アセットが画像の場合、ホットスポットとアセットのサイズが異なる場合に使用するスケーリング方法は次のとおりです。
|
イベントと操作
イベントを設定する方法をご確認ください。
イベント
動画コンポーネントから送信されるイベント以下の動画コンポーネントのイベントによってその他の操作をトリガーできます。
イベント | 説明 |
---|---|
一時停止後の再生 | 一時停止後にメディアの再生が開始すると(直前の一時停止イベント後に再生が再開すると)送信されます。 |
一時停止 | 再生が一時停止すると送信されます。 |
再生開始 | メディアの再生が開始すると(初回の開始、一時停止後の再開、終了後に最初から開始する場合のいずれでも)送信されます。 |
終了 | 再生が完了すると送信されます。 |
音量の変更 | 音量が変更されると(音量の設定時、ミュート属性の変更時のいずれでも)送信されます。 |
シーク済み | シーク動作の完了後に送信されます。 |
バッファ開始 | リクエストした操作(再生など)が、別の操作(シークなど)の完了待ちで遅れるときに送信されます。 |
[イベント] ダイアログでこうしたイベントのいずれかを選択するには、動画コンポーネントをターゲットに設定します。
キューポイントを動画に追加すると、以下のキューポイント イベントに基づいて他のアクションをトリガーできます。
イベント | 説明 |
---|---|
キューポイントに到達しました | メディアの再生がキューポイントで定義した時間に到達すると送信されます。 |
[イベント] ダイアログでこのイベントを選択するには、キューポイントをターゲットに設定します。
ホットスポットを動画に追加すると、以下のホットスポット イベントに基づいて他のアクションをトリガーできます。
イベント | 説明 |
---|---|
ホットスポット表示 | ホットスポットが表示されると送信されます。 |
ホットスポット非表示 | ホットスポットが非表示になると送信されます。 |
[イベント] ダイアログでこうしたイベントのいずれかを選択するには、ホットスポットをターゲットに設定します。
アクション
動画コンポーネントで実行される操作他のイベントに基づいて、以下の動画コンポーネント アクションをトリガーできます。
アクション | 設定項目 |
---|---|
ミュート切り替え | なし |
一時停止 | なし |
再生 | なし |
最初から再生 | なし |
シーク再生 | 時間 - スキップする秒数 |
音量の設定 | 音量の設定(0~100) - 動画の音量をパーセンテージで指定します。 |
ソースを設定 | ソース - さまざまな形式のソースの URL をカンマで区切って指定できます。 |
[イベント] ダイアログでこうしたアクションのいずれかを選択する場合、動画コンポーネントをレシーバーに設定します。
キューポイントを動画に追加すると、他のイベントに基づいて以下のキューポイント アクションをトリガーできます。
アクション | 設定項目 |
---|---|
キューポイントの移動 | なし |
キューポイントの時間の設定 | 時間 - 時間(秒)。 |
[イベント] ダイアログでこうしたアクションのいずれかを選択する場合、キューポイントをレシーバーに設定します。
ホットスポットを動画に追加すると、他のイベントに基づいて以下のホットスポット アクションをトリガーできます。
アクション | 設定項目 |
---|---|
表示設定の変更 | ホットスポットの表示 - ホットスポットを表示します。このチェックボックスをオフにすると、ホットスポットが非表示になります。 |
シークの表示時間と非表示時間 | 表示時間の移動 - ホットスポットの表示時間をシークします。このチェックボックスをオフにすると、ホットスポットの非表示時間をシークします。再生中の効果は一瞬なので、このアクションは再生前または再生後に表示されるホットスポットに適しています。 |
時間の設定 |
|
[イベント] ダイアログでこうしたアクションのいずれかを選択する場合、ホットスポットをレシーバーに設定します。
プレビュー
ステージ上の動画コンポーネントをダブルクリックすると、インタラクティブ動画ダイアログで動画をプレビューできます。ダイアログ内のプレビューでは、アニメーションを含むホットスポットは完全にはレンダリングされません。
ドキュメントの他の要素も含めてコンポーネントをプレビューしたり、イベントをテストしたりするには、インタラクティブ動画ダイアログを終了し、右上隅にある [プレビュー] ボタンをクリックします。