Utiliser des vidéos

Découvrez comment intégrer des vidéos dans vos projets à l’aide de liens externes ou de fichiers téléversés sur GitHub

Lovable propose deux méthodes pour intégrer des vidéos dans vos projets. Ci‑dessous, nous allons passer en revue les deux options étape par étape :

Ajouter un lien vers une vidéo externe

La façon la plus simple et recommandée d’intégrer une vidéo consiste à ajouter un lien vers une vidéo hébergée en externe, par exemple sur YouTube.

Example prompt

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

Utiliser une vidéo depuis votre dossier public GitHub

Le téléversement de vidéos volumineuses dans votre dépôt GitHub peut augmenter sa taille, ce qui peut affecter les performances de Lovable (temps de clonage du dépôt plus longs, démarrage plus lent des aperçus/sandboxes).

Une meilleure option consiste à utiliser des services d’hébergement (comme YouTube) ou des solutions de stockage de fichiers comme S3, qui vous fournissent une URL que vous pouvez utiliser comme référence, comme décrit dans les étapes précédentes.

Vous pouvez téléverser des vidéos dans le dépôt GitHub de votre projet et les référencer directement. Voici comment faire :

1. Connecter votre dépôt GitHub

   Commencez par vérifier que votre projet est lié à un dépôt GitHub. Voici comment configurer votre dépôt.

2. Accéder au dossier public

   Dans votre dépôt connecté, accédez au répertoire public. Ce dossier est spécifiquement utilisé pour héberger les ressources du projet comme les images, les vidéos et autres médias.

3. Téléverser une vidéo

   Vous pouvez maintenant ajouter votre vidéo au dossier public en la faisant glisser‑déposer ou en cliquant sur “choose your files” pour parcourir et téléverser le fichier depuis votre machine locale.

4. Valider le fichier (commit)

   Après avoir sélectionné votre fichier vidéo, saisissez un bref message de commit (par exemple, “Adds a Mars video to be used in the app”), puis cliquez sur “Commit changes”.

   
5. Récupérer le chemin de la vidéo

   Une fois le téléversement terminé, cliquez sur le fichier vidéo et utilisez l’icône de copie :octicons-copy-16: pour copier son chemin. Vous aurez besoin de ce chemin à l’étape suivante.

   
6. Référencer la vidéo dans Lovable

   Vous pouvez maintenant intégrer la vidéo en indiquant le chemin du fichier dans votre Prompt. Par exemple, vous pouvez utiliser un Prompt comme celui‑ci :

   Example prompt

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

   Assurez‑vous d’utiliser exactement le même chemin de fichier que celui que vous avez copié précédemment.

Pour voir ces méthodes en action, explorez l’un des projets d’exemple : Lovable using videos example project. Vous y trouverez de vrais Prompts montrant comment les vidéos sont intégrées en utilisant les deux méthodes.

De plus, pour une approche plus technique du processus d’ajout de vidéos, consultez ce dépôt public : GitHub: Video Upload Example. Il inclut le téléversement de la vidéo et les détails d’implémentation utilisés dans le projet.