# ビデオコンポーネント

*スキルレベル: 中級*

## 開始前に

* ビデオコンポーネントは Adalo 2.0 レスポンシブアプリでのみ利用可能です。
* [データベース](https://help.adalo.com/ja/database) と [画面とコンポーネント](https://help.adalo.com/ja/component-basics) について知っておくこと。
* [マジックテキスト](https://help.adalo.com/ja/component-basics/inserting-dynamic-text) の使用方法を知っていること。
* この機能を使用するには有料の Adalo プランは必要ありません。
* ビデオコンポーネントはほとんどの現代のファイル形式をサポートしていますが、すべての形式がネイティブの Android、ネイティブの iOS、およびさまざまなウェブブラウザで機能するわけではありません。可能な限り、`.mp4` ファイル形式と `H.264` 圧縮を使用することを強くお勧めします。

### ビデオのURL

ここでコンポーネントをソースビデオに接続します。ビデオはアプリのデータベースにアップロードされているか、Adaloの外部にホストされている場合があります。両方のシナリオを見てみましょう。

Adaloデータベースにアップロードされたビデオの場合（データベースでビデオ用の「ファイル」プロパティタイプを使用できます）、マジックテキストアイコンをクリックし、ビデオがアップロードされているコレクションとプロパティに移動します。そこから、フライアウトからファイルのURLを選択してください。以下の例では、各ユーザーには紹介ビデオがあり、マジックテキストのフライアウトを使用してビデオのURLにアクセスしました。

<figure><img src="https://lh7-us.googleusercontent.com/mpqpX0838RdCciDZUjETAP8UcLSFM2YhLsPEVBoKAiEvr0BO-uz-iKHvd-9WM97gGMpWPb1e9KHaMxiQKRvpa1X5rnEiJDcj7hc6UoaJC5APiv4m66yXilcuwHmmoCw8v0Xp6QgzEq9jNbc6YEBYKhw" alt=""><figcaption></figcaption></figure>

Adaloの外部にホストされているビデオを読み込みたい場合は、URLをここに貼り付けることができます。

{% hint style="warning" %}
**注意: ネイティブアプリで正しく再生されるようにするために、Youtubeビデオ用の専用コンポーネントを使用することを強くお勧めします。**
{% endhint %}

### サムネイルのURL

デフォルトでは、ビデオコンポーネントはユーザーが再生ボタンを押すまで黒い画面が表示されますが、代わりにカスタム画像を追加するためのサムネイル機能を使用できます。データベースから画像のURLを取得するには（ビデオURLプロパティと同様に）、またはAdaloの外部にホストされている場合は、画像がホストされている場所を指すURLを貼り付けることができます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-78fdc5334d7901eed14fe6a9ebf0740e2f7c21fe%2FUntitled%20design%20(5).png?alt=media" alt=""><figcaption></figcaption></figure>

### プレースホルダー画像

プレースホルダー画像を使用すると、ビデオが読み込まれていない場合にユーザーに画像を表示することができます。データベースからすべてのビデオアップロードのリストがあると想像してくださいが、一部のレコードにはビデオファイルがない場合、プレースホルダー画像がリストアイテムに表示されます。

### ビデオのクロッピング

この設定には2つのオプションがあります：

* **フルビデオを表示（クロップしない）:** ビデオプレーヤーのサイズに関係なく、常にフルビデオが表示されます。余分なスペースには黒いバーが表示されます（これらのバーの色はスタイルの編集で変更できます）。これはほとんどのビデオに対して推奨される設定です。
* **スペースを埋めるためにビデオをクロップ:** 黒いバーは一切表示されません。ビデオプレーヤーのサイズは常にビデオで完全に占有されますが、クロッピングが発生するため、ビデオの重要な部分がユーザーに見えないことがあります。

<figure><img src="https://lh7-us.googleusercontent.com/dZn2wygjT-HT3eOvryOIhSdaCagSiIjga6UJxtr0106Jx1hM4VYTD7t66QBevekew05oGCQeLwvytvbA29lUvrS-2tKKB6C8yIDBhBTYzmUSh0P-0tc_MsNSkuVdA_oNKWf1vMsdSeEmkBbAb4dwdf8" alt=""><figcaption></figcaption></figure>

### コントロールを表示

これにより、再生、スクラブ、音量、フルスクリーンなどのコントロールが表示されます。

{% hint style="warning" %}
コントロールはデバイスやブラウザによって異なり、現在ネイティブAndroidでは利用できません。
{% endhint %}

<figure><img src="https://lh7-us.googleusercontent.com/aQkcRt3asDuTapB8zH-T7L1vK1pSx084rYW3gSQE5s0NoTx0liu9ToJ2Bhvwg7YLYYT0biF-NcwkCNWdQfIBQhpv_2g0GSL05zzoJE1vshz4-yDwZAmVoSYyBU7PtQtPYgubQ13SFX5xERAGMnKBdS4" alt=""><figcaption></figcaption></figure>

### その他の設定

* **自動再生:** 有効にすると、ビデオは読み込まれるとすぐに再生され、音声はミュートになります。 無効にすると、ユーザーが再生ボタンをクリックするかタップするとビデオが再生されます。
* **ミュート:** 有効にすると、ビデオはデフォルトでミュートされます。 自動再生を使用する場合、ビデオは自動的にミュートされます。
* **ループ:** 有効にすると、ビデオは終了後に自動的に最初から再生されます。

### ユーザーが独自のビデオをアップロードしてリストで表示できるようにする

ユーザーが独自のビデオをアップロードする体験を構築している場合、フォームコンポーネントまたはスタンドアロンのファイルピッカーコンポーネントを使用できます。

1. データベースを「Videos」コレクションとファイルプロパティを持つように設定します。
2. フォームまたはファイルピッカーコンポーネントをそのコレクションにアップロードするように設定します。
3. ビデオコンポーネントが含まれたカスタムリストコンポーネントを作成します。
4. カスタムリストを「Videos」コレクションに接続します。
5. ビデオコンポーネントをアップロードされたビデオのURLに接続します。 これを行うには、マジックテキストアイコンをクリックし、「Videos」コレクションに移動し、ビデオがアップロードされたファイルプロパティに移動します。 そこから、フライアウトからファイルのURLを選択してください。

## 詳細はこちら

* Adaloにアップロードされるビデオは50MB未満である必要があります。 より大きなビデオの場合は、Adaloの外部にホストし、ビデオコンポーネント内でリンクしてください。
* コンポーネントの側面に表示される意図しないスケーリングや黒いバーを避けるために、コンポーネントのレイアウトを「固定」に変更し、ビルダー内のビデオコンポーネントがソースビデオと同じ比率であることを確認してください。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！ 投稿にこの記事へのリンクを貼り付けることも忘れないでください！

さらなる機能をお探しですか？ Adaloコンポーネントマーケットプレイスで購入可能な追加コンポーネントをチェックしてください！