動画の使用

外部リンクや GitHub へのアップロードを使って、プロジェクトに動画を埋め込む方法を学びます

Lovable では、プロジェクトに動画を埋め込む方法が 2 つあります。以下で、それぞれの方法をステップごとに説明します。

外部動画へのリンクを利用する

最も簡単で推奨される方法は、YouTube のような外部でホスティングされている動画へのリンクを使うことです。

Example prompt

Embed this video
https://www.youtube.com/watch?v=dQw4w9WgXcQ 
in the hero content section.

GitHub の public フォルダー内の動画を利用する

大きな動画ファイルを GitHub リポジトリにアップロードすると、リポジトリのサイズが増え、Lovable のパフォーマンスに影響する可能性があります（リポジトリのクローン時間が長くなる、プレビュー/サンドボックスの起動が遅くなるなど）。

その代わりに、YouTube のようなホスティングサービスや S3 のようなファイルストレージオプションを使うのがおすすめです。前のステップで説明したように、参照用の URL を取得してそれを使う方法です。

プロジェクトの GitHub リポジトリに動画をアップロードし、そこから直接参照することもできます。手順は次のとおりです。

1. GitHub リポジトリを接続する

   まず、プロジェクトが GitHub リポジトリとリンクされていることを確認してください。リポジトリを設定する方法はこちら を参照してください。

2. public フォルダーにアクセスする

   接続済みリポジトリ内で、public ディレクトリに移動します。このフォルダーは画像、動画、そのほかのメディアなど、プロジェクトのアセットをホスティングするための場所です。

3. 動画をアップロードする

   public フォルダーに、動画ファイルをドラッグ＆ドロップするか、“choose your files” をクリックしてローカル環境からファイルを選択・アップロードします。

4. ファイルをコミットする

   動画ファイルを選択したら、簡単なコミットメッセージ（例: “Adds a Mars video to be used in the app”）を入力し、“Commit changes” をクリックします。

   
5. 動画のパスを取得する

   アップロードが完了したら、動画ファイルをクリックし、コピーアイコン :octicons-copy-16: を使ってそのパスをコピーします。次のステップでこのパスが必要になります。

   
6. Lovable 内で動画を参照する

   これで、プロンプト内でファイルパスを指定して動画を埋め込めます。たとえば、次のようなプロンプトを使えます。

   Example prompt

   Insert an additional video into the introduction section using this file: 
   public/mars-video-nasa.mp4
   

   先ほどコピーしたファイルパスを、正確にそのまま使用してください。

これらの方法を実際に確認するには、次のサンプルプロジェクトを見てみてください: Lovable using videos example project。両方の方法で動画を統合する実際のプロンプト例が含まれています。

また、動画追加のプロセスをより技術的な観点から確認したい場合は、この public リポジトリも参照してください: GitHub: Video Upload Example。動画のアップロードと、そのプロジェクトで使用されている実装の詳細が含まれています。