Dans un précédent post cette année, nous vous avons montré comment utiliser les vidéos dans votre site web Squarespace plus facilement – que ce soit une vidéo en arrière-plan ou comme clip embarqué.

Dans le post d’aujourd’hui, nous allons vous montrer la meilleure façon de collecter des vidéos auprès de vos utilisateurs et des utilisateurs de votre site web en intégrant un enregistrer vidéo et un widget de téléchargement directement dans votre site.

Nous allons faire cela avec l’API 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 auprès de vos clients si vous dirigez une boutique en ligne, pour accepter des candidatures vidéo pour des concours ou pour recevoir des commentaires vidéo envoyés par les lecteurs de votre blog.

En suivant notre tutoriel, c’est simple à installer dans votre site Squarespace sans avoir besoin de la connaissance d’un expert.

Création et ajout d’un enregistreur vidéo dans Squarespace

Vous pouvez décider si vos visiteurs doivent enregistrer directement avec leur webcam sur votre site, sélectionner et télécharger des vidéos déjà disponibles dans leurs appareils ou vous pouvez également leur proposer les deux options afin qu’ils choisissent celle qu’ils préfèrent.

Grâce à la technologie unique que nous avons développé, tous les fichiers vidéo sont soumis directement depuis les appareils de vos utilisateurs vers une cible de stockage dans le cloud que vous sélectionnez sans passer par notre infrastructure. Cela permet de contribuer à protéger votre confidentialité et celle de vos utilisateurs.

 

squarespace-video-recorder

 

En ce qui concerne la destination de téléchargement, les vidéos peuvent être envoyées vers votre compte YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure.

Afin de pouvoir afficher les clips dans votre site web après avoir été téléchargés à votre attention, faire en sorte de les envoyer vers YouTube aura le plus de sens car vous pouvez les intégrer depuis cette cible via les écrans administrateur de Squarespace.

Et maintenant, voici les étapes pour mettre en place votre enregistreur vidéo Squarespace :

1) Se connecter dans l’interface administrateur de votre site web

Cela est nécessaire car vous devez créer une nouvelle page échantillon dans une étape ultérieure et copier du code dans l’HTML de cette page.

 

Squarespace login

 

2) Dans un 2ème onglet du navigateur, s’inscrire pour un essai gratuit de l’API vidéo Clipchamp

L’inscription pour un compte gratuit avec notre API est nécessaire pour obtenir votre clé API unique dont vous aurez besoin au cours 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.

 

register-clipchamp-trial

 

3) Choisir YouTube comme cible de téléchargement vers laquelle envoyer les vidéos de l’utilisateur

Après avoir ouvert un compte gratuit, dans les paramètres de l’API dans la page https://util.clipchamp.com/fr/api-setup/integrations, cliquez sur YouTube et connecter l’API Clipchamp à votre compte YouTube afin que les vidéos soumises par vos utilisateurs puissent être téléchargées vers votre chaîne ou vers une liste de lecture spécifique.

 

set-youtube-uploads

 

4) Ensuite, allez sur la page https://util.clipchamp.com/fr/api-setup/install

Sur cette page, il y a 2 fragments de code – vous devez copier les deux fragments dans Squarespace (étapes 5 et 6 ci-dessous) pour intégrer l’enregistreur de webcam et le widget de téléchargement dans votre site. Vous pouvez ignorer les instructions qui sont mentionnées sur la page car elles s’appliquent à des sites web non-Squarespace.

 

clipchamp-api-code

 

5) Créez une nouvelle page dans Squarespace et ouvrez « l’Injection de code dans l’en-tête de page »

Dans Injection de code dans l’en-tête de page, collez le fragment de code issu de la première section de la page Clipchamp (celle qui comporte votre clé API) comme suit :

 

webcam-video-squarespace

 

6) Ensuite, collez le second fragment de code dans un Bloc de code Block dans le « Contenu de page » de votre page :

 

Éditez le contenu de la page,

squarespace-video-camera

 

et ajoutez un nouveau bloc de code sur la page dans laquelle vous souhaitez faire apparaître le bouton vidéo.

 

add-code-block

 

squarespace-html5-video

 

Dans le bloc de code, insérez le 2ème fragment de code (plus important) que vous avez copié sur la page https://util.clipchamp.com/fr/api-setup/install.

 

squarespace-html5-camera

 

Assurez-vous de sélectionner les paramètres suivants dans le bloc de code : « HTML » dans le menu déroulant à droite et décocher « Afficher la source » à gauche. Il suffit ensuite d’appuyer sur « Appliquer » après avoir ajouté le fragment de code.

 

7) Ensuite, enregistrez et visualisez la page dans laquelle vous avez intégré le code Clipchamp

Si les fragments de code ont été ajoutés et enregistrés correctement, l’aperçu de la page doit afficher votre bouton pour l’enregistreur vidéo Squarespace. Dans notre page d’exemple, le bouton apparaît comme ceci :

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) À la dernière étape, autorisez le domaine de votre site web dans les paramètres de Clipchamp

Afin que le bouton fonctionne, vous devez ajouter dans la liste des domaines approuvés le domaine du bouton dans les paramètres de votre API Clipchamp comme suit :

Copiez l’URL de votre site web et ajoutez-le à la liste des domaines autorisés dans les paramètres de l’API Clipchamp dans https://util.clipchamp.com/fr/api-setup/domains.

Dans notre exemple, les domaines que nous avons ajouté à la liste des domaines approuvés sont clipchamp-test.squarespace.com et www.clipchamp-test.squarespace.com. Assurez-vous d’insérer votre propre domaine et, de façon optionnelle, son www. sous-domaine.

 

authorize domain in the Clipchamp API settings

 

Après l’ajout du ou des URL dans la liste, recharger l’aperçu de votre page Squarespace. L’enregistreur vidéo et le bouton du widget de téléchargement sur la page sont désormais prêt à être utilisés. Par conséquent, vos visiteurs peuvent commencer à envoyer des enregistrements ou d’autres vidéos.

 

squarespace-video-recorder

 

Affichage des vidéos soumises dans votre site

Si vous souhaitez utiliser les vidéos que les personnes vous envoient et qui se trouvent désormais dans votre chaîne YouTube pour les afficher dans votre site web, veuillez consulter les instructions suivantes dans l’Aide de Squarespace pour savoir comment intégrer les vidéos YouTube.

 

Squarespace KB about embedding videos

 

Conclusion

Voici toutes les étapes requises pour collecter des vidéos si vous utilisez Squarespace. Remarque : nous les avons également résumé dans un court article d’aide sur ce sujet pour tous ceux qui se sont déjà inscrit pour un compte API vidéo Clipchamp.

Notre article dans la Base de connaissances comporte un certain nombre de suggestions de dépannage au cas où il y aurait des problèmes pour faire apparaître correctement notre bouton vidéo sur votre site. Il décrit également une option pour intégrer automatiquement un enregistreur vidéo sur chacune des pages de votre site et il contient un fragment de code pour personnaliser l’enregistreur à votre convenance.

Le widget caméra est fourni avec une large palette d’options de personnalisation. Par exemple, vous pouvez modifier la marque pour la remplacer 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 entrantes et sortantes.

Nous n’avons pas couvert toutes les options expert dans cet article. Toutefois, nous vous invitons à consulter la documentation de l’API pour voir quels sont les paramètres que vous pourriez vouloir ajouter à votre enregistreur vidéo Squarespace. Il suffit simplement d’ajouter une ou plusieurs options dans le fragment de code que vous avez inséré dans le bloc de code à l’étape 6.

Bien que ce post fasse la présentation de la réception des vidéos dans Squarespace, la méthode que nous avons décrite fonctionne également pour installer l’enregistreur dans toutes les autres plateformes de construction de site web et les CMS. Par exemple, nous avons également rédigé un tutoriel pour Wix. La principale exigence dans tous les cas est que vous devez être autorisé à ajouter du code personnalisé dans les pages de votre site web avec les paramètres administrateur.