Embed videos

Installez Node.js

1. Télécharger Node.js
2. Installez-le sur votre ordinateur
3. Le script d'installation vérifiera que Node.js est installé automatiquement

Important: Node.js doit être installé manuellement avant d'exécuter la CLI. Le script vérifiera s'il est installé et affichera un message d'erreur s'il est absent.

Créer un compte Cloudflare

1. Accédez à Cloudflare
2. Créez un compte gratuit
3. Vérifiez votre adresse e-mail

Remarque: Wrangler (Cloudflare CLI) sera installé automatiquement par le script si nécessaire. Vous n'avez pas besoin de l'installer manuellement.

Exécutez la commande d'installation

Ouvrez votre terminal et exécutez :

npx @bebranded/embed-videos init

‍

Suivez la configuration interactive

Le CLI vous guidera dans les étapes suivantes :

Vérification des prérequis

• Vérifie que Node.js est installé
• Installe Wrangler automatiquement si nécessaire

Authentification Cloudflare

• Si vous n'êtes pas connecté, une fenêtre de navigateur s'ouvre
• Connectez-vous à votre compte Cloudflare
• Autoriser le CLI

Sélectionnez un compte Cloudflare (si vous avez plusieurs comptes)

• Choisissez le compte sur lequel vous souhaitez déployer

Choisissez le nom du Worker

• Entrez un nom pour votre Worker (par défaut : embed-videos)
• Exemple : `my-video-embed` ou `client-videos`

‍

⚠️ Si R2 n'est pas activé sur votre compte

Si vous voyez ce message : ⚠️ R2 n'est pas activé sur ce compte Cloudflare.

‍

Le CLI ouvre automatiquement votre tableau de bord Cloudflare. Procédez comme suit :

1. Dans le panneau de gauche, cliquez sur « Storage & Datababses »
2. Cliquez sur « R2 object storage »
3. Cliquez sur « Overview »
4. Cliquez sur « Get Started »
5. Ajoutez votre mode de paiement (carte de crédit)
   • Vous ne serez débité que si vous dépassez les limites de gratuité de Cloudflare
   • Sinon, c'est complètement GRATUIT (0€)
   • Cloudflare niveau gratuit comprend :
     • 10 Go de stockage
     • 1 million d'opérations de classe A par mois (téléchargements)
     • 10 millions d'opérations de classe B par mois (visualisations/téléchargements) ; alors ne vous inquiétez pas, rien ne vous sera facturé.
6. Patientez quelques minutes pour que R2 soit activé sur votre compte (2 à 5min)
   
   • Le CLI vérifiera automatiquement si R2 est opérationnel
   • Il réessaiera jusqu'à 3 fois avec des intervalles de 5 secondes
   • Vous verrez des messages tels que : `⏳ Tentative 1/3 : R2 n'est pas encore opérationnel. En attente... `
   • Appuyez sur Entrée dans le terminal après avoir activé R2 pour continuer

‍

Remarque : Si R2 vient d'être activé, le CLI créera un nouveau compartiment (il ne vous sera pas demandé de choisir entre créer ou utiliser un compartiment existant, car il n'y en a pas encore).

‍

Configuration du R2 bucket

• ‍Option A : Créer un nouveau bucket (là où vos vidéos seront stockées)
  
  • Entrez un nom de bucket (par défaut : embed-videos-storage)‍
• Option B : Utiliser un bucket existant
  
  • Choisissez parmi vos buckets existants

Configuration de Cloudflare Access (obligatoire)

• Entrez votre adresse e-mail (pour accéder au dashboard)
• Entrez votre API Token Cloudflare (en haut à droite 'Profile → API Token → Create Token → tout en bas 'Create Custom Token'

• Autorisations requises :
  
  • Account → Access: Apps and Policies → Edit
  • Account → Access: Organisations, Identity Providers, and Groups → Edit
  • Account → Account Settingse → Read
• Le CLI configurera automatiquement Access pour protéger votre Dashboard

Déploiement automatique

• Le CLI générera tous les fichiers nécessaires
• Déployez votre Worker sur Cloudflare
• Configuration automatique de Cloudflare Access
• Afficher l'URL de votre tableau de bord

‍

Installation terminée

Après l'installation, vous verrez :

✅ Installation completed successfully!

📺 Your dashboard is available at:
   https://your-worker-name.workers.dev/dashboard

📝 Next steps:
   1. Go to your dashboard
   2. Upload videos
   3. Use the embed codes on your website

Important : Votre tableau de bord est protégé par Cloudflare Access. Seuls les utilisateurs autorisés (votre adresse e-mail) peuvent y accéder. L'URL du tableau de bord est `/dashboard`. Assurez-vous d'utiliser l'URL complète avec `/dashboard` à la fin.

Enregistrez cette URL → vous en aurez besoin pour accéder à votre tableau de bord.

URL du tableau de bord

Votre tableau de bord est disponible à l'adresse suivante : https://your-worker-name.workers.dev/dashboard

Remarque : Le tableau de bord se trouve sur `/dashboard`, pas sur l'URL racine. Assurez-vous d'inclure `/dashboard` dans l'URL.

Protection d'accès Cloudflare

Votre tableau de bord est automatiquement protégé par Cloudflare Access :

• ‍Utilisateurs autorisés uniquement (votre e-mail) peut accéder au tableau de bord‍
• Les vidéos restent publiques - Les itinéraires `/api/video/*` et `/player/*` sont accessibles à tous‍
• Bouton de déconnexion est toujours visible dans l'en-tête du tableau de bord

Premier accès

1. Accédez à l'URL de votre tableau de bord : `https://your-worker-name.workers.dev/dashboard`
2. Vous verrez une page de connexion à Cloudflare Access
3. Entrez votre adresse e-mail autorisée (celle que vous aviez enregistrée précedemment)
4. Vérifiez votre e-mail pour le code d'accès
5. Entrez le code pour accéder à votre tableau de bord

Déconnexion

Cliquez sur le bouton Log out dans l'en-tête du tableau de bord pour vous déconnecter de Cloudflare Access.

Accédez à votre tableau de bord

Accédez à l'URL de votre Worker avec `/dashboard` (par exemple, `https://your-worker-name.workers.dev/dashboard`)

Vous verrez votre tableau de bord vidéo avec :

• Barre latérale gauche : Tags et statistiques
• Zone principale : Liste des vidéos et zone de téléchargement

Téléchargez des vidéos

Méthode 1 : glisser-déposer

1. Faites glisser un fichier vidéo dans la zone de téléchargement
2. Attendez que le téléchargement soit terminé
3. Votre vidéo apparaîtra dans la liste

Méthode 2 : cliquez pour parcourir

1. Cliquez Sélectionnez une vidéo bouton
2. Choisissez un fichier vidéo depuis votre ordinateur
3. Attendez que le téléchargement soit terminé

Formats pris en charge : MP4, WebM, OGG

Taille de fichier maximale: 1 Go par vidéo

‍

Organiser à l'aide de balises

Créer un tag

1. Cliquez sur + bouton dans la barre latérale gauche (sous Tags)
2. Tapez un nom de tag (par exemple, « Portfolio », « Tutoriels »)
3. Appuyez sur Entrée ou cliquez à l'extérieur pour enregistrer

Ajouter des tags aux vidéos

1. Cliquez + Tag sur n'importe quelle vidéo
2. Sélectionnez des tags existantes ou créez-en de nouvelles
3. Les tags vous aident à organiser et à filtrer vos vidéos

Filtrer par tag

1. Cliquez sur n'importe quel tag dans la barre latérale gauche
2. Seules les vidéos portant ce tag seront affichées
3. Cliquez Toutes les vidéos pour tout voir

Modifier ou supprimer des balises

1. Cliquez sur l'icône de modification (✏️) à côté du nom d'une étiquette pour la renommer
2. Cliquez sur l'icône de suppression (🗑️) pour supprimer un tag
3. Si un tag est supprimé, il sera supprimé de toutes les vidéos associées

Modifier le titre de la vidéo

1. Cliquez sur l'icône d'édition (✏️) à côté du titre d'une vidéo
2. Tapez le nouveau nom
3. Appuyez sur Entrée ou cliquez à l'extérieur pour enregistrer

Obtenir l'URL de la vidéo

1. Cliquez Copier l'URL sur n'importe quelle vidéo
2. L'URL de la vidéo est copiée dans votre presse-papiers
3. Une icône en forme de coche apparaîtra brièvement pour confirmer
4. Utilisez cette URL pour créer un lien direct vers la vidéo

Obtenir le Embed Code

1. Cliquez Embed Code sur n'importe quelle vidéo
2. Un modal s'ouvrira avec :
   • Aperçu du lecteur vidéo (côté gauche) - mises à jour en temps réel
   • Code Iframe (côté droit) - se met à jour automatiquement

Personnaliser le code d'intégration

Le modal du code intégré inclut des options de personnalisation en temps réel :

Rayon des coins

• Utilisez le curseur pour ajuster l'arrondi des coins
• Prévisualisez les mises à jour instantanément sans recharger la vidéo

Lecture automatique

• Cochez cette case pour activer la lecture automatique

Remarque: lorsque la lecture automatique est activée, le mode muet est automatiquement activé (requis par la plupart des navigateurs)

En sourdine

• Cochez cette case pour démarrer la vidéo en mode muet
• Activé automatiquement lorsque la lecture automatique est sélectionnée

Boucle

• Cochez cette case pour que la vidéo se répète automatiquement

Copiez le code

1. Ajustez les paramètres selon vos préférences
2. Cliquez Copier sur le bloc de code iframe
3. Collez-le dans le code HTML de votre site Web

Méthode 1 : intégrer un élément

1. Ajoutez un Embed Code à votre page
2. Cliquez sur l'élément
3. Collez le code de votre iframe depuis le tableau de bord
4. Publiez votre site

Méthode 2 : éditeur HTML

1. Ajouter un élément HTML ou passer en mode HTML
2. Collez le code de votre iframe
3. Enregistrez et publiez

‍

Exemple de code d'intégration

<iframe 
  src="https://your-worker-name.workers.dev/player/video_1234567890_mp4" 
  width="100%" 
  height="100%" 
  frameborder="0" 
  allowfullscreen 
  style="border-radius: 8px;">
</iframe>

‍

Personnaliser l'affichage vidéo

Vous pouvez modifier les attributs de l'iframe :

• ‍Largeur/Hauteur : Modifiez `width= » 100% « `et `height= » 100% «` en pixels ou pourcentages spécifiques‍
• Rayon de la bordure : Modifiez `border-radius : 8px ; `dans l'attribut style‍
• Rapport hauteur/largeur : Utilisez le CSS pour conserver le rapport hauteur/largeur :

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

Afficher les statistiques

Votre tableau de bord affiche des statistiques en temps réel dans la barre latérale gauche :

• ‍Espace de stockage disponible: Quelle part de votre espace de stockage gratuit de 10 Go vous utilisez‍
• Opérations de classe A: Opérations de téléchargement (1 million de dollars gratuits par mois)‍
• Opérations de classe B: Opérations de visualisation/téléchargement (10 millions de dollars gratuits par mois)

Les statistiques sont automatiquement mises à jour lorsque vous rechargez le tableau de bord.

Limites de stockage

• ‍Niveau gratuit: 10 Go de stockage‍
• Opérations de classe A: 1 million d'opérations/mois (téléchargements)‍
• Opérations de classe B: 10 millions d'opérations/mois (vues/téléchargements)

Si vous dépassez ces limites, Cloudflare facturera en fonction de ses tarifs. Surveillez votre utilisation sur le tableau de bord pour respecter les limites de gratuité.

Le tableau de bord ne charge pas

• Vérifiez que votre Worker est déployé : Accédez au tableau de bord Cloudflare → Workers & Pages
• Vérifiez que l'URL est correcte (doit inclure `/dashboard`)
• Videz le cache de votre navigateur
• Vérifiez la présence d'erreurs dans la console du navigateur
• Assurez-vous d'être connecté à Cloudflare Access

Le téléchargement échoue

• Vérifiez la taille du fichier (recommandé : moins de 1 Go par vidéo)
• Vérifiez le format de fichier (MP4, WebM ou OGG)
• Vérifiez votre connexion Internet
• Vérifiez que le bucket R2 est correctement configuré dans le tableau de bord Cloudflare

‼️ R2 non activé/Problèmes d'activation

Si vous voyez des erreurs concernant le fait que R2 n'est pas activé :

1. Suivez attentivement les étapes d'activation :
   • Accédez au tableau de bord Cloudflare
   • Accédez à : Storage & Databases → R2 object storage → Overview
   • Cliquez sur « Get Started »
   • Ajoutez un mode de paiement (vous ne serez débité que si vous dépassez les limites de gratuité)
2. Attendez l'activation :
   • L'activation de R2 peut prendre quelques minutes
   • La CLI réessaiera automatiquement de vérifier si R2 est opérationnel
   • Vous verrez des messages de progression : `⏳ Tentative X/3 : R2 n'est pas encore opérationnel. En attente... `
3. Si l'activation échoue :
   • Assurez-vous d'avoir effectué toutes les étapes du tableau de bord Cloudflare
   • Attendez 5 à 10 minutes et réessayez
   • Vérifiez que votre mode de paiement a bien été ajouté
   • Vérifiez que votre compte dispose des autorisations nécessaires

Le code intégré ne fonctionne pas

• Vérifiez que le code de l'iframe est complet
• Vérifiez que l'URL de la vidéo est accessible (essayez de l'ouvrir directement dans un navigateur)
• Assurez-vous que CORS est activé (devrait être automatique)
• Vérifiez que l'identifiant de la vidéo dans l'URL est correct

Impossible d'accéder au tableau de bord

• Assurez-vous d'utiliser la bonne URL avec `/dashboard` à la fin
• Si Cloudflare Access est activé, assurez-vous d'être connecté avec une adresse e-mail autorisée
• Vérifiez que votre e-mail figure dans la politique d'accès
• Essayez de vous déconnecter puis de vous reconnecter
• Effacer les cookies du navigateur

Statistiques non mises à jour

• Les statistiques sont mises à jour automatiquement lors du rechargement de la page
• Patientez quelques secondes après le téléchargement d'une vidéo
• Vérifiez que votre bucket R2 est correctement configuré (automatique)

Problèmes d'accès à Cloudflare

• Vérifiez que votre jeton d'API possède les autorisations appropriées :
  
  • Account → Access : Apps and Policies→ Edit
  • Account → Access : Organizations, Identity Providers, and Groups → Edit
  • Account → Account Settings → Read
• Vérifiez que l'application Access a été créée correctement dans Cloudflare Zero Trust
• Vérifiez que l'application est configurée pour le chemin `/dashboard`