Les fichiers sont des écrans personnalisables de type notification que les membres Vimeo Business et Vimeo Premium peuvent configurer pour apparaitre durant la lecture de leurs vidéos intégrées. Vous pouvez créer des fichiers aussi simples qu'un en-tête ou alors les enrichir avec une description, une vignette, et les lier à toute destination sur le Web.
✦ Configurez des cartes sur vos vidéos intégrées
Pour ajouter des fichiers ou modifier des cartes pour l'une de vos vidéos, rendez-vous sur l'onglet Outils d'interaction de ses paramètres vidéo. Sous la section Durant la vidéo, cliquez, cliquez sur+ Fichiers, collecte d'adresses e-mail, puis sélectionnez « Fichier » depuis le menu déroulant pour révéler les champs destinés à configurer votre fichier.
Vous devez saisir au minimum un titre pour votre fichier et le moment auquel vous souhaitez qu'il apparaisse pendant votre vidéo. Vous avez aussi l'option d'ajouter une description, un lien et une vignette. Vous verrez l'aperçu du player se mettre à jour en temps réel.
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.
Veuillez notez : les cartes apparaissent seulement dans vos vidéos intégrées. Vos vidéos n’incluront pas de cartes sur le site de Vimeo. Ajouter une carte désactivera également les contrôles 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.
✦ Stats d'interaction pour les cartes
Depuis le panneau de stats de votre vidéo, vous pouvez consulter le nombre de fois où tous les fichiers de celle-ci ont été vus et cliqués dans les 30 derniers jours. En savoir plus sur les stats pour les outils d'interaction vidéo ici.
✦ 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.