Sur cette page
Dans un post précédent, nous vous avons montré comment convertir des vidéos et réduire la taille de leurs fichiers afin de pouvoir les utiliser plus facilement dans votre blog Wix ou dans votre site web.
Bien que cet article précédent concernait vos propres fichiers vidéo et la conception de votre site web, dans ce post, nous allons vous montrer comment installer un enregistreur vidéo pour recevoir des vidéos envoyées par les visiteurs de votre site.
Les captures d’écran ci-dessous concernent Wix. Toutefois, la méthode décrite ici fonctionne également pour faire fonctionner un enregistreur de webcam sur d’autres plateformes de construction de site web aussi longtemps que vous pouvez ajouter du code personnalisé dans les paramètres administrateur de votre plateforme.
Création et ajout d’un enregistreur vidéo dans Wix
Avec cette méthode, les utilisateurs pourront soit enregistrer une vidéo directement avec leur webcam dans votre site web Wix ou bien vous pouvez leur permettre de télécharger des fichiers vidéo dont ils disposent déjà dans leur ordinateur.
Dans les deux cas, les vidéos peuvent être soumises dans votre compte YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure. Bien qu’il soit facile d’afficher les clips sur votre site web après avoir été téléchargés par vos visiteurs, le fait de les envoyer vers YouTube sera le plus intéressant car vous pouvez les intégrer depuis YouTube via l’éditeur Wix.
Pour installer cet enregistreur vidéo Wix, nous allons utiliser notre API webcam JavaScript et vidéo HTML5. Il s’agit d’un widget que vous pouvez intégrer dans un site web afin de collecter les vidéos auprès des utilisateurs et des visiteurs du site. Bien que l’API soit disponible pour les sites web de tout type, il y a des étapes spécifiques nécessaires pour faire fonctionner l’API sur un site Wix.
As recommended by Wix, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.
A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.
A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.
1) Se connecter dans le backend d’administration du site web Wix
Vous devrez créer une nouvelle page d’essai au cours d’une étape ultérieure et copier du code dans les paramètres HTML de cette page.
2) Dans un 2ème onglet du navigateur, s’enregistrer pour un essai gratuit dans l’API vidéo Clipchamp
L’inscription pour un compte d’essai gratuit de notre API est nécessaire pour obtenir votre clé API unique, dont vous aurez besoin au cours d’une étape ultérieure et pour choisir une cible de téléchargement pour les vidéos de l’utilisateur. Vous n’avez pas besoin d’une carte de crédit pour vous inscrire et vous pouvez annuler l’essai à tout moment.
register-clipchamp-trial
3) Choisir YouTube comme cible de téléchargement vers laquelle envoyer les vidéos des utilisateurs
Après la création du compte gratuit, dans les paramètres de l’API dans https://util.clipchamp.com/fr/api-setup/integrations, cliquez sur YouTube et connectez l’API Clipchamp à votre compte YouTube afin que les vidéos soumises par vos utilisateurs puissent être téléchargées dans votre chaîne ou dans une liste de lecture spécifique.
4) Allez dans https://util.clipchamp.com/fr/api-setup/install
Sur cette page, vous verrez les 2 fragments de code qui sont nécessaires pour intégrer un bouton d’enregistrement de vidéo dans votre site. Vous pouvez ignorer les instructions qui sont mentionnées sur cette page car elles s’appliquent à des sites non-Wix. Dans votre cas, ce que vous devez faire est de copier et coller les deux fragments de code dans l’éditeur HTML d’une nouvelle page que vous créez dans Wix.
5) Créer une nouvelle page dans Wix et ouvrir les « paramètres HTML »
Dans l’éditeur HTML, copiez le fragment de code dans la première section de la page Clipchamp de l’étape 4 comme suit :
6) Puis, copiez le code de la seconde section directement sous le premier fragment de code dans l’éditeur HTML
7) Ensuite, enregistrer et visualiser la page où vous avez intégré le code HTML
Si le code a été ajouté correctement, l’aperçu de la page doit afficher un nouveau bouton intégré pour l’enregistrement vidéo. Yep !
8) En dernière étape, autoriser les domaines du bouton vidéo
Afin que l’enregistreur fonctionne, vous devez ajouter les 2 domaines dans la liste des domaines autorisés dans les paramètres de votre API Clipchamp comme suit :
Le 1er domaine : copiez l’URL que Wix utilise pour afficher le bouton Clipchamp intégré dans votre page Wix et l’ajouter à la liste des domaines autorisés dans vos paramètres d’API Clipchamp dans https://util.clipchamp.com/fr/api-setup/domains. Remarque : il ne s’agit pas de l’URL (ou du « domaine ») qui est affichée dans la barre d’adresse de votre navigateur (nous supposons que vous utilisez Chrome). Il s’agit en fait de l’URL de l’iframe dans lequel se trouve le bouton vidéo de votre page.
Vous pouvez obtenir le nom de ce domaine en déplaçant le pointeur de la souris quelques pixels sous le bouton Clipchamp dans l’aperçu de la page, puis en faisant un clic droit et en sélectionnant « afficher la source du frame ». Dans Chrome, cela ouvre un nouvel onglet dans le navigateur. Allez dans la barre d’adresse de l’onglet et copiez le nom du domaine. Dans notre exemple, le domaine apparaît ainsi :
Le 2ème domaine : ce nom de domaine suit la convention de nommage yourwebsitename-wixsite-com.fileusr.com, donc, par exemple moestavern-wixsite-com.fileusr.com. Ajustez-le au nom de votre site web et ajoutez-le à votre des domaines Clipchamp. Ensuite, vous pouvez publier votre page de test Wix avec le bouton intégré d’enregistrement dessus afin de vérifier si elle s’affiche correctement.
Vous pouvez également trouver ce nom de 2ème domaine en regardant le code source de votre page Wix.
Après l’enregistrement de ces 2 noms de domaine dans les paramètres de l’API Clipchamp, le bouton de l’enregistreur vidéo et du widget de téléchargement sur votre page Wix sera prêt à être utilisé. Par conséquent, vos utilisateurs peuvent commencer à envoyer des enregistrements et d’autres vidéos vers votre chaîne YouTube.
9) Afficher les vidéos soumises dans votre site
Si vous souhaitez utiliser les vidéos que les personnes vous envoient et qui sont désormais situées dans votre chaîne YouTube pour les afficher dans votre site web, veuillez consulter les instructions suivantes dans l’aide Wix sur la manière d’intégrer des vidéos YouTube.
Résumé
Voici toutes les étapes requises pour collecter les vidéos auprès des visiteurs de votre site si vous utilisez Wix. Notez que nous avons également rédigé un court article d’aide sur le sujet. pour tous ceux qui se sont déjà inscrits pour un compte API vidéo Clipchamp.
Si vous n’utilisez pas plateforme de construction de site web, veuillez consulter ce tutoriel distinct pour les instructions d’installation pour intégrer l’API vidéo HTML5 dans tout site web.
Nous l’avons élaboré avec nos clients afin de le rendre disponible pour une large gamme de scénarios et tout type de projet web. Cela inclut par exemple la capacité à collecter des témoignages vidéo auprès de vos clients si vous dirigez une boutique en ligne ou de recevoir des commentaires vidéo envoyés par les lecteurs de votre blog.
Remarque finale : notre widget enregistreur vidéo est fourni avec une large palette d’options. Par exemple, vous pouvez remplacer notre marque par la vôtre, ajuster les couleurs et d’autres éléments de style ainsi qu’un certain nombre de paramètres en lien avec les vidéos en entrée et en sortie.
Comme il s’agit d’options expert, nous ne les avons pas toutes couvert dans cet article. Toutefois, nous vous invitons à plonger dans la documentation de l’API et décider des paramètres que vous pourriez vouloir ajouter à votre enregistreur vidéo Wix. Vous pouvez ajouter des options dans le fragment de code que vous avez inséré dans l’éditeur HTML à l’étape 6.
