Les fiches sont des écrans personnalisables de type notification que les membres Vimeo Business, Vimeo Premium et Vimeo Enterprise peuvent configurer pour apparaître durant la lecture de leurs vidéos intégrées. Vous pouvez créer des fiches aussi simples qu'un en-tête ou alors les enrichir avec une description, une vignette ou un lien.
✦ Configurez des cartes sur vos vidéos intégrées
Pour ajouter ou modifier des fiches pour l'une de vos vidéos, rendez-vous sur l'onglet Outils d'interaction de ses paramètres vidéo. Dans la section Pendant la vidéo, cliquez sur + Fiches, formulaires de contact, puis sélectionnez « Fiche » depuis le menu déroulant pour révéler les champs destinés à configurer votre fiche.
Vous devez saisir au moins un titre pour votre fiche ainsi que l'horodatage de sa première apparition dans votre vidéo. Vous avez également la possibilité d'ajouter une description, un lien et une vignette. Les modifications apportées à la fiche seront affichées en temps réel dans l'aperçu du player. La durée la plus courte pendant laquelle des fiches peuvent être ajoutées les unes à côté des autres est de six secondes.
Une fois la configuration de votre fichier terminée, cliquez sur le bouton Ajouter. Vous pouvez ajouter jusqu'à une carte par seconde sur votre vidéo. Une fois que vous avez terminé de configurer vos paramètres d'intégration, cliquez sur le bouton Enregistrer.
Remarque : les fiches apparaissent seulement dans vos vidéos intégrées et présentations. Vos vidéos n'incluront pas de fiches sur le site de Vimeo. Ajouter une fiche désactivera également les commandes pour les mentions J'aime, Regarder plus tard et Partager.
✦ Voir les cartes sur ordinateurs desktop vs. mobile
Voir les fichiers sur ordinateur ou mobile
L'expérience de visionnage des vidéos avec fichier diffèrera selon la plateforme sur laquelle la vidéo est partagée et l'appareil utilisé.
Sur ordinateur, les fichiers restent en haut à droite de votre vidéo pendant six secondes, à moins que vous n'ayez ajouté un autre fichier a apparaitre sur cette fenêtre. Les vidéos avec des fichiers sont lues en ligne partout où elles sont intégrées lorsque visionnées sur un ordinateur.
Sur mobile (ou quand le player est intégré à moins de 415px), les cartes apparaissent sous le player intégré. Une fois qu'une carte apparait, elle restera visible jusqu'à ce que la prochaine carte apparaissent. Les spectateurs peuvent faire glisser les fichiers sous le player, ce qui les mènera au point de la vidéo où le fichier qu'ils voient est sensé apparaitre.
Sur des sites comme Wix, Squarespace et Wordpress, les vidéos avec fichiers sont lues en-ligne sur le Web mobile. Sur Facebook et Twitter, les apps mobiles et le Web mobile renverront sur la page vidéo sur Vimeo.com.
✦ Analyses des interactions pour les fiches
Le panneau d'analyse de votre vidéo vous permet de consulter le nombre de fois où toutes les fiches ont été vues et consultées au cours des 30 derniers jours. En savoir plus sur l'analyse pour les outils d'interaction vidéo ici.
✦ Fiches dans les présentations
Les fiches, ainsi que tout autre outil d'interaction vidéo (comme les écrans de fin et les formulaires de contact), que vous avez précédemment ajoutées seront désormais affichées dans votre présentation. Une fois que vous aurez partagé votre présentation, les spectateurs verront vos fiches lorsqu'ils regarderont la présentation.
✦ Le code d'intégration pour les vidéos avec cartes
Le code d'intégration Vimeo classique est un code iframe simple. Afin de supporter les fichiers dans tous les environnements de visionnage, nous ajoutons un conteneur javascript au code d'intégration. Le nouveau code d'intégration est adaptatif, ce qui permet au player de maintenir son ration original quelle que soit la dimension de la fenêtre. Vous trouverez un exemple de code intégré ci-dessous avec le conteneur javascript en gras.
<div class="vimeo-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/76979871" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Si vous avez déjà intégré une vidéo à laquelle vous avez simplement ajouté des fichiers, vous devrez mettre à jour le code d'intégration sur votre site pour inclure le contenant javascript. Vous pourrez accéder au nouveau code d'intégration après avoir ajouté des fichiers à votre vidéo en cliquant le bouton decode d'intégration gris au-dessus de l'aperçu du player dans vos paramètres d'intégration.
✦ Bonnes pratiques pour partager des vidéos avec cartes sur les réseaux sociaux
Si vous intégrez une vidéo avec des cartes sur des réseaux sociaux tels que Twitter ou Linkedin, vous pouvez simplement coller votre URL de page de vidéo Vimeo dans votre publication au lieu du code d'intégration Vimeo.
Si vous souhaitez partager votre vidéo sur Facebook ou Twitter mais préférez que votre publication renvoie vers votre site plutôt que vers la page de la vidéo sur Vimeo, vous devrez ajouter du code supplémentaire sur votre site Web.En savoir plus sur la manière d'optimiser votre site Web pour publier vers les réseaux sociaux.
✦ Bonnes pratiques pour intégrer des vidéos avec cartes
Si vous intégrez des vidéos avec des fichiers à travers une plateforme de création de sites Web telle que Wix ou Squarespace, vous devrez vous assurer que le contenant javascript n'est pas supprimé du code d'intégration. Nous recommandons aussi d'éviter d'utiliser des widgets pour intégrer vos vidéos.
Si vous intégrez de multiples vidéos avec cartes sur une même page, nous recommandons d'ajouter le tag JavaScript <script src="https://player.vimeo.com/api/player.js"></script> qu'à l'une des vidéos sur votre page. Toutes les intégrations suivantes ne doivent inclure que le nouveau tag <div>. Inclure le tag de script javascript plusieurs fois pourrait avoir un impact sur la performance de votre page.
Voici un rapide aperçu de la manière d'intégrer une vidéo avec fichiers sur les principales plateformes de création de sites Web :
- Wix
- Dans l'éditeur Wix, cliquez +Ajouter, puis sélectionnez Plus en bas de la liste. Choisissez ensuite l'option code HTML
- Cliquez le bouton Saisir code au-dessus du nouveau bloc gris sur votre page pour activer le modal d'édition
- Assurez-vous que l'option Code est sélectionnée, puis collez votre code d'intégration Vimeo avec le conteneur Javascript
- Cliquez sur le boutonMettre à jour, puis publiez les modifications sur votre site
- Squarespace
- Lancer le mode éditeur de votre page Squarespace, puis cliquez l'icône + Add block en haut à droite de la page
- Faites dérouler le menu jusqu'à atteindre l'en-tête Plus, puis sélectionnez l'option </> Code
- Collez votre code d'intégration Vimeo avec le conteneur javascript, puis cliquez sur le bouton Apply
- Lorsque vous avez fini d'effectuer toutes vos modifications sur la page, cliquez Save en haut à gauche
- Wordpress
- Sélectionnez l'onglet d'édition du code HTML dans votre publication Wordpress
- Collez le code d'intégration Vimeo avec le conteneur javascript
- Lorsque vous êtes prêt(e), cliquez Mettre à jouren haut à droite
- Tumblr
- Choisissez Vidéo dans les options de types de publications
- Sélectionnez l'option Ajouter une vidéo du Web
- Collez votre code d'intégration Vimeo avec le conteneur Javascript
- Le player intégré Vimeo sera chargé, et vous aurez l'option d'ajouter du texte à la publication Tumblr
- Lorsque vous êtes prêt(e), cliquez sur le bouton Publier.