**** CE POST A ÉTÉ ÉCRIT EN 2017 ET MENTIONNE UNE TECHNOLOGIE QUI A DEPUIS ÉTÉ DÉCONSEILLÉE ****
Dans un article publié plus tôt cette année, nous vous avons montré comment utiliser plus facilement des vidéos sur votre site Web Squarespace, soit comme vidéo d'arrière-plan, soit comme clip intégré.
Dans l'article d'aujourd'hui, nous vous expliquons comment collecter les vidéos de vos utilisateurs et visiteurs de votre site Web en intégrant un enregistreur vidéo et un widget de téléchargement directement sur votre site.
Nous le faisons à l'aide de l'API de caméra HTML5 de Clipchamp – un outil de capture vidéo qui peut être utilisé sur tout type de site Web, par exemple pour collecter des témoignages vidéo de vos clients si vous gérez une boutique en ligne, pour accepter des soumissions de vidéos pour des concours ou pour recevoir les commentaires vidéo des lecteurs de votre blog.
Après notre tutoriel, il est simple de l'installer sur votre site Squarespace sans aucune connaissance d'expert requise.
Créer et ajouter un enregistreur vidéo Squarespace
Vous pouvez décider si vos visiteurs doivent soit enregistrer avec leur webcam directement sur votre site, sélectionner et télécharger des vidéos qu'ils ont déjà sur leur appareil, ou vous pouvez également leur donner les deux options afin qu'ils puissent choisir celle qu'ils préfèrent.
Grâce à la technologie unique que nous avons construite, tous les fichiers vidéo sont soumis directement depuis les appareils de vos utilisateurs vers une cible de stockage cloud que vous sélectionnez sans passer par notre infrastructure. Cela permet de protéger votre vie privée et celle de vos visiteurs.
En ce qui concerne une destination de téléchargement, les vidéos peuvent être envoyées à votre compte YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure.
Afin de pouvoir afficher les clips sur votre site Web après que les internautes vous les ont téléchargés, les envoyer sur YouTube est le plus logique car vous pouvez les intégrer à partir de là via les écrans d'administration de Squarespace.
Et maintenant, voici les étapes pour installer votre enregistreur vidéo Squarespace :
1) Connectez-vous à l'interface d'administration de votre site Web
Cette opération est obligatoire, car vous devez créer un exemple de nouvelle page lors d'une étape ultérieure et copier du code dans le code 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 pour activer une cible de téléchargement pour les vidéos que vous recevrez. 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) Ensuite, accédez à https://util.clipchamp.com/en/api-setup/install
Sur cette page, il y a 2 extraits de code - vous devez copier les deux extraits dans Squarespace (étapes 5 et 6 ci-dessous) pour intégrer l'enregistreur et le téléchargeur de webcam sur votre site. Vous pouvez ignorer les instructions mentionnées sur la page elle-même car elles s'appliquent aux sites Web autres que Squarespace.
5) Créez une nouvelle page dans Squarespace et ouvrez le "Page Header Injection de code"
Dans l'injection de code d'en-tête de page, collez l'extrait de code de la première section de la page Clipchamp (celle qui inclut votre clé API) comme suit :
6) Ensuite, placez le 2e extrait de code dans un Bloc de code dans le "Contenu de la page" de votre page :
Modifier le contenu de la page,
et ajoutez un nouveau bloc de code sur la page où vous souhaitez faire apparaître un bouton vidéo.
Dans le bloc de code, insérez le deuxième extrait de code (plus grand) que vous avez copié depuis https://util.clipchamp.com/en/api-setup/install.
Assurez-vous de sélectionner les paramètres suivants dans le bloc de code :"HTML" dans le menu déroulant à droite et décochez "Afficher la source" à gauche. Appuyez simplement sur "Appliquer" lorsque vous avez ajouté l'extrait de code.
7) Ensuite, enregistrez et prévisualisez la page où vous avez intégré le code Clipchamp
Si les extraits ont été ajoutés et enregistrés correctement, la page d'aperçu devrait afficher votre nouveau bouton d'enregistreur vidéo Squarespace. Sur notre exemple de page, le bouton ressemble à ceci :
8) En dernier lieu, autorisez le domaine de votre site Web dans les paramètres Clipchamp
Pour que le bouton fonctionne, vous devez ajouter le domaine du bouton à la liste blanche dans les paramètres de votre API Clipchamp comme suit :
Copiez l'URL de votre site Web et ajoutez-la à la liste des domaines autorisés dans les paramètres de votre API Clipchamp à https://util.clipchamp.com/en/api-setup/domains.
Dans notre exemple, les domaines que nous avons ajoutés à la liste blanche étaient clipchamp-test.squarespace.com et www.clipchamp-test.squarespace.com . Assurez-vous d'insérer votre propre domaine et éventuellement son www. sous-domaine.
Après avoir ajouté la ou les URL dans la liste, rechargez l'aperçu de votre page Squarespace. Le bouton d'enregistrement vidéo et de téléchargement sur la page est maintenant prêt à être utilisé afin que vos visiteurs puissent commencer à envoyer des enregistrements et d'autres vidéos.
Afficher les vidéos envoyées 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 Squarespace pour savoir comment intégrer des vidéos YouTube.
Squarespace KB sur l'intégration de vidéos
Conclusion
Ce sont toutes les étapes nécessaires pour collecter des vidéos si vous utilisez Squarespace. Notez que nous les avons également résumés dans un bref article d'aide sur le sujet pour tous ceux qui se sont déjà inscrits pour un compte API vidéo Clipchamp.
Notre article de la base de connaissances comprend un certain nombre de suggestions de dépannage en cas de problème pour que notre bouton vidéo s'affiche correctement sur votre site. Il décrit également une option permettant d'intégrer automatiquement un enregistreur vidéo sur chacune des pages de votre site et contient un exemple de code pour personnaliser l'enregistreur à votre guise.
Le widget de l'appareil photo est livré avec un large éventail d'options de personnalisation, 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.
Nous n'avons pas couvert ces options expertes dans cet article, mais vous pouvez consulter de plus près la documentation de l'API pour voir lesquels de ses paramètres vous souhaitez ajouter à votre enregistreur vidéo Squarespace. Ajoutez simplement toutes les options dans l'extrait de code que vous avez inséré dans le bloc de code à l'étape 6.
Bien que cet article concerne la réception de vidéos dans Squarespace, la méthode que nous avons décrite fonctionne également pour mettre l'enregistreur en place sur d'autres plates-formes de création de sites Web et CMS - par exemple, nous avons également écrit un didacticiel pour Wix. La principale exigence pour chacun d'eux est que vous devez être autorisé à ajouter du code personnalisé aux pages dans les paramètres d'administration de votre site.