*** Ce produit n'est plus disponible ***
Dans un article précédent, nous vous avons montré comment convertir des vidéos et réduire leur taille de fichier afin que vous puissiez les utiliser plus facilement sur votre blog ou site Web Wix.
Alors que cet article précédent concernait vos propres fichiers vidéo et la conception de votre site Web, dans l'article actuel, nous vous montrons comment installer un enregistreur vidéo pour recevoir les vidéos des visiteurs de votre site .
Les captures d'écran ci-dessous concernent Wix, mais la méthode décrite ici fonctionne également pour faire fonctionner un enregistreur de webcam sur d'autres plates-formes de création de sites Web tant que vous pouvez ajouter un code personnalisé dans les paramètres d'administration de votre plate-forme.
Créer et ajouter un enregistreur vidéo Wix
Les utilisateurs pourront soit enregistrer une vidéo avec leur webcam directement sur votre site Wix, soit vous pouvez les laisser vous télécharger des fichiers vidéo qu'ils ont déjà sur leur ordinateur.
Dans les deux cas, les vidéos peuvent être soumises à votre compte YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure. Bien que pour pouvoir afficher facilement les clips sur votre site Web après que les gens vous les aient téléchargés, les envoyer sur YouTube est le plus logique car vous pouvez les intégrer à partir de là via l'éditeur Wix.
Afin de configurer cet enregistreur vidéo Wix, nous utilisons notre API vidéo HTML5 et webcam JavaScript. Il s'agit d'un widget que vous pouvez intégrer à un site Web pour collecter des vidéos d'utilisateurs et de visiteurs du site. Bien qu'il soit disponible pour tous les types de sites Web, certaines étapes spécifiques sont nécessaires pour qu'il soit opérationnel sur un site Wix.
Comme recommandé par Wix , la meilleure façon d'intégrer un widget d'enregistrement et de téléchargement de vidéos comme l'API Clipchamp est via le code backend, voir https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.
Un développeur ou un ingénieur logiciel de votre équipe ou de votre agence Web pourra suivre ces instructions en combinaison avec les étapes décrites sur https://help.clipchamp.com/collect/getting-started/initial-setup-of-the -clipchamp-api.
Une deuxième méthode utilisant des blocs de code personnalisé dans l'interface de votre site Web est la suivante :
1) Connectez-vous au backend d'administration de votre site Wix
Vous devrez créer un exemple de nouvelle page dans une étape ultérieure et copier du code dans les paramètres HTML de cette page.
2) Dans un 2ème onglet de navigateur, inscrivez-vous pour un essai de l'API vidéo Clipchamp
L'inscription à un compte d'essai de notre API est nécessaire pour obtenir votre clé API unique, dont vous aurez besoin lors d'une étape ultérieure et définir un objectif de téléchargement pour les vidéos des utilisateurs. Vous n'avez pas besoin de carte de crédit pour vous inscrire et vous pouvez annuler l'essai à tout moment.
3) Définissez YouTube comme cible de téléchargement pour envoyer les vidéos des utilisateurs
Après avoir ouvert un compte d'essai, dans les paramètres de l'API sur https://util.clipchamp.com/en/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 sur votre chaîne ou une playlist spécifique.
4) Accédez à https://util.clipchamp.com/en/api-setup/install
Sur cette page, vous verrez 2 extraits de code nécessaires pour intégrer un bouton d'enregistrement vidéo sur votre site. Vous pouvez ignorer les instructions mentionnées sur cette page car elles s'appliquent aux sites Web autres que Wix. Dans votre cas, ce que vous avez à faire est de copier et coller les deux extraits de code dans l'éditeur HTML d'une nouvelle page que vous créez dans Wix.
5) Créez une nouvelle page dans Wix et ouvrez les "Paramètres HTML"
Dans l'éditeur HTML, collez l'extrait de code de la première section de la page Clipchamp de l'étape 4 comme suit :
6) Ensuite, copiez le code de la deuxième section directement sous le premier extrait dans l'éditeur HTML
7) Ensuite, enregistrez et prévisualisez la page où vous avez intégré le code HTML
Si le code a été ajouté correctement, la page d'aperçu devrait afficher un nouveau bouton d'enregistrement vidéo intégré. Youpi !
8) En dernier étape, autorisez les domaines du bouton vidéo
Pour que l'enregistreur fonctionne, vous devez ajouter 2 domaines à la liste blanche 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é sur votre page Wix et ajoutez-le à la liste des domaines autorisés dans vos paramètres d'API Clipchamp à https://util.clipchamp.com/en/api-setup/domains. Notez qu'il ne s'agit pas de l'URL (ou "domaine") qui s'affiche dans la barre d'adresse de votre navigateur (nous supposons que vous utilisez Chrome), mais de l'URL de l'iframe dans laquelle se trouve le bouton vidéo de votre page.
Vous pouvez obtenir ce nom de domaine en déplaçant le pointeur de la souris de quelques pixels sous le bouton Clipchamp dans l'aperçu de la page, puis en cliquant avec le bouton droit de la souris et en sélectionnant "Afficher la source du cadre". Dans Chrome, cela ouvre un nouvel onglet de navigateur. Accédez à la barre d'adresse de l'onglet et copiez le nom de domaine à partir de là. Dans notre exemple, le domaine ressemble à ceci
Le 2ème domaine : Ce nom de domaine suit la convention de dénomination votrenomdesite-wixsite-com.fileusr.com , donc par ex. moestavern-wixsite-com.fileusr.com . Ajustez-le au nom de votre site Web et ajoutez-le à votre liste de domaines Clipchamp, puis vous pourrez publier votre page de test Wix avec le bouton d'enregistrement intégré pour vérifier s'il s'affiche correctement.
Vous pouvez également trouver ce 2ème nom de domaine en regardant le code source de votre page Wix
Après avoir enregistré ces 2 noms de domaine dans les paramètres de l'API Clipchamp, le bouton d'enregistrement vidéo et de téléchargement sur votre page Wix sera prêt à être utilisé afin que vos visiteurs puissent commencer à envoyer des enregistrements et d'autres vidéos sur votre chaîne YouTube.
9) Afficher les vidéos soumises sur votre site
Si vous souhaitez utiliser des vidéos que les gens vous envoient et qui se trouvent maintenant sur votre chaîne YouTube pour les afficher sur votre site Web, veuillez consulter les instructions suivantes dans l'aide de Wix pour savoir comment intégrer des vidéos YouTube.
Conclusion
Ce sont toutes les étapes nécessaires pour collecter les vidéos des visiteurs de votre site si vous utilisez Wix. Notez que nous avons également rédigé un bref 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 de créateur de site Web, veuillez consulter ce didacticiel séparé pour obtenir les instructions d'installation permettant d'intégrer l'API vidéo HTML5 sur n'importe quel site Web.
Nous l'avons construit avec nos clients pour l'adapter à un large éventail de scénarios et à tout type de projet Web. Cela inclut par exemple la possibilité de collecter des témoignages vidéo de vos clients si vous gérez une boutique en ligne ou d'obtenir des commentaires vidéo des lecteurs de votre blog.
Une note finale - notre widget enregistreur vidéo est livré avec un large éventail d'options, par exemple, vous pouvez changer sa marque, ajuster les couleurs et d'autres éléments de style ainsi qu'un certain nombre de paramètres liés aux vidéos d'entrée et de sortie.
Comme il s'agit d'options expertes, nous les avons couvertes dans cet article, mais vous pouvez vous plonger dans la documentation de l'API et décider lesquels de ses paramètres vous souhaitez ajouter à votre enregistreur vidéo Wix. Vous pouvez ajouter n'importe quelle option dans l'extrait de code que vous avez inséré dans l'éditeur HTML à l'étape 6.