> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-video.md).

# AX - ビデオ

## 概要

**AX - ビデオ** は、Experience Sites ページに動画プレーヤーを埋め込み、YouTube、Vimeo、Salesforce Content Documents、および直接の動画ファイル URL をサポートする Experience Cloud コンポーネントです。

これを使用して、トレーニングコンテンツ、製品デモ、チュートリアル、またはサポート動画をポータル内で直接表示できます。フィールド値から動画ソースを取得してレコードごとに異なる動画を表示し、Experience Builder で自動再生、ループ再生、プレーヤーコントロールなどの再生オプションを設定できます。

動画ライブラリ、トレーニングセンター、製品デモ、オンボーディングコンテンツ、またはポータルユーザーが外部サイトへ移動せずに動画コンテンツを必要とするあらゆる場面に最適です。

***

## はじめに

この簡単なチュートリアルを使って、ビデオコンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed url="<https://app.arcade.software/share/Khgc427v5m7NGLo2BzYL>" flowId="Khgc427v5m7NGLo2BzYL" %}

***

## プロパティ

| 名前                    | 説明                                                                | 使用方法                                                           |
| --------------------- | ----------------------------------------------------------------- | -------------------------------------------------------------- |
| **CMS ビデオまたはビデオ URL** | 動画のソースを定義します。CMS から動画を選択するか、直接 YouTube URL を指定します                 | コンテンツ戦略に最も適した動画ソースを選択し、ページ内で効果的に統合・管理されるようにします。                |
| **音量**                | コンテナの背景画像を設定します。                                                  | コンテナの視覚的な魅力を高め、伝えたい雰囲気やテーマ性に貢献する画像をアップロードするか、URL を指定します。       |
| **再生速度**              | 背景画像の上に色のオーバーレイを適用します。                                            | 背景画像の上にさりげなく重なる色を選択し、コンテナ内のコンテンツの視認性と読みやすさを保つのに役立てます。          |
| **自動再生**              | ページの読み込み時に動画を自動的に再生開始するかどうかを決定します。                                | ユーザー体験の観点から自動再生を有効または無効にし、動画の再生がユーザーの期待や閲覧行動に合うようにします。         |
| **ループ**               | 動画が終了したときに、継続的にループ再生するかどうかを決定します。                                 | ループ機能を使用して動画を繰り返し再生し、背景ビジュアルやページ上で継続的にマルチメディアを表示する用途に適しています。   |
| **コントロールを非表示**        | 動画コントロールを表示するか非表示にするかを選択し、ユーザーが動画コンテンツとどのようにやり取りするかに影響します。        | 望ましいユーザー操作レベルやページレイアウトの美観に応じて、コントロールの表示をカスタマイズします。             |
| **サイズ**               | 動画のサイズパラメータを定義します。これには **`幅`** と **`高さ`**、およびオーバーフローの動作の制御が含まれます。 | 動画サイズとオーバーフロー設定を調整して、ページにシームレスに統合し、レスポンシブで視覚的に一貫したレイアウトを維持します。 |

***

## ユースケース例

### 例 1: 製品動画

{% @arcade/embed url="<https://app.arcade.software/share/UHUg1GHG21hrQs1cBnJ2>" flowId="UHUg1GHG21hrQs1cBnJ2" %}

#### 埋め込み動画で製品を魅力的に見せる

製品デモ動画を製品ページに直接埋め込み、顧客が必要な情報に必要な場所で即座にアクセスできるようにします。その結果、より充実したセルフサービス体験が実現し、製品への信頼を高め、問い合わせサポートの依頼を減らします。

***

#### 達成できること

* **より深い製品理解:** ページを離れることなく、製品デモ、操作ガイド、チュートリアルに顧客やパートナーがすぐにアクセスできるようにします。
* **セルフサービスの定着向上:** ユーザーが自分のペースで視覚的に答えを見つけられるようにすることで、サポート依頼を減らします。

***

#### 前提条件

以下が整っていることを確認してください:

* **製品オブジェクトページ: で設定済みかつ有効** あなたの Experience Cloud サイト。
* **ProductDemoURL\_\_c :** 各製品の動画 URL を保存するための、Product オブジェクト上のカスタム項目です。

***

#### 設定方法

{% stepper %}
{% step %}

#### **コンポーネントを追加**

* Experience Builder を開き、製品記事ページに移動します。 **AX - ビデオ** コンポーネントを希望する位置にページへドラッグします。
  {% endstep %}

{% step %}

#### **データを接続**

* データソースを選択し、動画 URL フィールドをマッピングして、各製品レコードからリンクを動的に取得します。
* 動画 URL : `{!Item.ProductDemoURL__c}`
  {% endstep %}

{% step %}

#### **外観を調整**

* コンポーネントの幅を **500px**に設定するか、ページレイアウトに合わせて調整します。
  {% endstep %}

{% step %}

#### **プレビュー＆公開**

* 組み込みのプレビューを使用して、製品ページ全体で動画が正しく表示されることを確認し、準備ができたら公開します。
  {% endstep %}
  {% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.