Utiliser efficacement la vidéo sur une page de destination

Points clés à retenir

Placez la vidéo là où elle répond à une objection concrète ou montre un comportement difficile à décrire.
Affichez une image d’affiche pertinente et lancez la lecture à la demande, au lieu de faire de la lecture automatique la seule option.
Réservez l’espace nécessaire et évitez que le chargement initial de la page ne télécharge une source inutilement volumineuse.

Une vidéo sur une page de destination devrait éclairer une décision plus rapidement que le texte voisin. Si elle retarde l’accès au message principal, surprend les visiteurs avec du son ou fait bouger la mise en page, elle nuit à la page.

L’essentiel

Proposez des sous-titres, des commandes et, à proximité, un accès textuel aux mêmes informations essentielles.

Justifier la place de la vidéo dans la hiérarchie

Une page de destination doit communiquer le public auquel elle s’adresse, sa proposition et l’action principale attendue avant d’exiger le lancement d’une vidéo. Ajoutez une vidéo lorsque le mouvement, l’enchaînement, la voix ou la démonstration répond à une question importante plus rapidement que le texte voisin. Ne l’utilisez pas simplement pour remplir un espace visuel ou répéter le titre à un rythme plus lent.

Placez le lecteur près de l’objection à laquelle il répond. Une démonstration du produit peut trouver sa place à côté des détails du flux de travail, tandis qu’un témoignage client peut être mieux placé près du contenu d’évaluation. Donnez à la vidéo un titre descriptif et un résumé concis pour que les visiteurs puissent décider s’il est utile de la regarder.

Usage adapté

Utilisez la vidéo pour montrer un comportement, un enchaînement, un contexte physique, une explication humaine crédible ou des éléments de preuve difficiles à exprimer dans une image fixe.

Usage peu adapté

Privilégiez le texte ou les images pour les informations que les visiteurs doivent parcourir, comparer, copier, traduire ou consulter à nouveau rapidement.

Charger la vidéo après une intention claire de l’utilisateur

Utilisez une image d’affiche pertinente avec un bouton de lecture utilisable au clavier et un nom accessible décrivant le contenu. Réservez la largeur et la hauteur du lecteur pour éviter les déplacements de la mise en page. Les commandes de lecture doivent rester disponibles, et l’arrêt de la vidéo ne devrait pas nécessiter de quitter la page.

Évitez la lecture automatique avec du son. Même sans son, la lecture automatique consomme des données, de la puissance de calcul et de l’attention ; respectez donc les préférences de réduction des animations et d’économie de données. Si la lecture automatique sert à des fins décoratives, la page doit tout de même communiquer ses informations essentielles sans elle et proposer un moyen de mettre la vidéo en pause.

Préparer les médias pour les performances de la page

Ne faites pas télécharger un master de production par le navigateur. Produisez une version encodée adaptée au web en fonction de la taille d’affichage, du contenu et des appareils prévus. Une résolution et un débit excessifs gaspillent de la bande passante, tandis qu’une source trop compressée produit des artefacts gênants autour des visages, des mouvements, des dégradés et du texte de l’interface.

Traitez l’image d’affiche comme une ressource du premier chargement de la page. Dimensionnez-la selon sa taille de rendu, choisissez soigneusement sa compression et évitez une image noire ou trompeuse. Dans la mesure du possible, différez le chargement du code du lecteur d’un fournisseur externe et les connexions aux médias jusqu’à ce qu’ils soient nécessaires, puis mesurez les performances de la page sur des appareils mobiles et des réseaux limités.

Préserver la composition dans les mises en page adaptatives

Une démonstration au format paysage ne peut pas toujours tenir dans un cadre mobile étroit par un simple recadrage centré. Identifiez le sujet, le produit et le texte essentiel pour chaque mise en page. Utilisez un montage vertical ou carré distinct lorsque le recadrage adaptatif supprimerait du contexte ou rendrait les détails de l’interface illisibles.

Gardez les sous-titres, les logos et les appels à l’action dans des zones de sécurité testées, mais ne reproduisez pas le bouton principal de la page dans chaque image de la vidéo. Prévisualisez le résultat encodé à sa taille d’affichage réelle. Un recadrage qui semble acceptable dans un éditeur peut ne plus convenir lorsque les commandes du navigateur, les colonnes de la page et un petit écran réduisent la zone visible.

Proposer des alternatives accessibles et respectueuses de la vie privée

Fournissez des sous-titres vérifiés pour les paroles et les sons significatifs, ainsi qu’un résumé ou une transcription à proximité lorsque le contenu est essentiel. Utilisez des pistes sélectionnables lorsque le lecteur les prend en charge. Les sous-titres incrustés peuvent préserver le texte dans des environnements limités, mais les spectateurs ne peuvent ni les désactiver, ni modifier leur apparence, ni les remplacer.

Un lecteur d’un fournisseur externe peut charger des scripts, déposer des cookies et divulguer des informations sur les visiteurs avant la lecture. Examinez le comportement du fournisseur, les exigences de consentement, la gestion du référent et les autorisations d’intégration. Évitez de placer des secrets ou des informations personnelles dans les URL sources, les noms de fichiers, les images de la vidéo, les sous-titres, les événements d’analytique ou les images d’affiche.

Tester conjointement la conversion et les performances

Mettez en place le suivi d’événements pertinents tels que le lancement de la lecture, la profondeur de visionnage utile, la fin du visionnage et l’action principale de la page. Comparez-les aux performances de chargement, à la réactivité et aux abandons. Une variante avec vidéo qui augmente l’engagement, mais ralentit suffisamment la page pour réduire les conversions qualifiées, n’est pas concluante.

Testez une version témoin clairement définie, sans vidéo, et ne modifiez qu’un élément substantiel à la fois. Segmentez avec prudence selon l’appareil et l’intention des visiteurs, et définissez la règle de décision avant de consulter les résultats. Testez aussi l’utilisation au clavier, les sous-titres, les connexions lentes, la désactivation des médias, la réduction des animations et les défaillances de scripts.

Publier uniquement des fichiers finalisés et vérifiés

Transloadit peut préparer une source approuvée pour une page de destination avec /video/encode, extraire plusieurs images d’affiche avec /video/thumbs et ajouter des sous-titres externes ou incrustés avec /video/subtitle. Un Template réutilisable peut assurer la cohérence de ces fichiers techniques sur plusieurs pages.

Utilisez une Assembly Notification pour informer l’application de la fin du traitement, vérifiez la signature du webhook entrant et confirmez la réussite du traitement avant de publier les URL des résultats. Transloadit prépare les fichiers ; il n’héberge pas la page de destination, ne fournit pas l’expérience de lecture, ne mène pas l’expérimentation et n’interprète pas les données analytiques.

Vérifications techniques

Validez la durée, les dimensions, le codec, la taille du fichier, l’audio, la présence de sous-titres, les dimensions de l’image d’affiche et le bon fonctionnement de la lecture sur les navigateurs pris en charge.

Vérifications éditoriales

Examinez l’ouverture, le recadrage, les affirmations, l’appel à l’action, l’exactitude des sous-titres, le sens de l’image d’affiche et la cohérence avec le reste de la page.

Vérifications opérationnelles

Vérifiez la mise en cache, la solution de repli en cas de défaillance, les autorisations d’accès aux fichiers, la vérification des webhooks, la surveillance et la possibilité de revenir sans risque à la version précédente de la page.

Détails techniques à connaître

Une image d’affiche peut devenir l’élément mesuré par le Largest Contentful Paint : la taille de son fichier, ses dimensions, sa priorité de découverte et son aptitude à être mise en cache comptent donc avant même que la vidéo ne commence à se charger.
La lecture automatique sans son est largement autorisée, mais la lecture automatique avec du son audible est couramment bloquée. La lecture ne devrait jamais être le seul moyen d’accéder aux informations essentielles de la page.
La vidéo peut renforcer la persuasion tout en retardant l’interactivité et en détournant l’attention de l’action principale ; un test pertinent mesure donc conjointement la conversion et les performances.
Une miniature vidéo dotée d’une commande de lecture devrait être un véritable bouton utilisable au clavier, dont le nom accessible décrit l’action et le contenu.
Le chargement d’un lecteur fourni par un prestataire externe peut ajouter du JavaScript, des cookies, des connexions DNS et des exigences de consentement avant que le visiteur ne choisisse de regarder quoi que ce soit.
Un bref résumé écrit près du lecteur facilite la recherche, l’accessibilité et la lecture en diagonale, et aide les visiteurs qui ne peuvent pas ou ne souhaitent pas lire de médias.

Une approche pratique

1
Rédigez une seule question, celle à laquelle la vidéo répond, et supprimez les éléments qui ne contribuent pas à cette réponse.
2
Exportez une version encodée courte adaptée au web et une image d’affiche représentative.
3
Mettez en place un suivi conjoint du lancement de la lecture, de la profondeur de visionnage utile, de l’activation de l’appel à l’action (CTA) et des performances de la page.
4
Testez les expériences sans vidéo, avec une consommation de données réduite, au clavier, sur mobile et sur un réseau lent.

Un flux de travail multimédia en quatre phases

Quand Transloadit est utile

Créez une version encodée courte destinée à la lecture, une image d’affiche légère et des sous-titres à partir du master approuvé. Un webhook peut notifier votre application afin qu’elle ne publie ces fichiers de sortie qu’après que l’Assembly s’est terminée avec succès.

Périmètre architectural

Transloadit prépare les ressources vidéo, mais n’héberge pas la page de destination, ne mène pas l’expérience et ne remplace pas un produit de lecture et d’analyse des performances.

Questions fréquentes

Une vidéo sur une page de destination doit-elle se lancer automatiquement ?

En général, la lecture devrait faire suite à une action explicite de l’utilisateur. La lecture automatique avec son est perturbante et couramment bloquée. La lecture automatique sans son peut convenir à des animations non essentielles, mais elle consomme tout de même des ressources et doit tenir compte de la mise en pause, de la réduction des animations, de l’accessibilité et de la consommation de données.

Où la vidéo doit-elle apparaître sur une page de destination ?

Placez-la là où elle répond à la question ou à l’objection concernée. Une brève démonstration visuelle peut apparaître près de la proposition initiale, tandis que des éléments probants détaillés peuvent avoir leur place plus bas dans la page. N’attendez pas la fin de la lecture pour présenter le message principal ou l’action principale.

Une transcription est-elle nécessaire lorsque des sous-titres sont présents ?

Les sous-titres accompagnent le visionnage de façon synchronisée, tandis qu’une transcription permet de parcourir le contenu, d’y effectuer des recherches, de le copier, de le traduire et d’y accéder sans lancer la lecture. Proposez les deux lorsque les informations de la vidéo sont essentielles ou substantielles. Un résumé écrit concis reste utile pour les médias facultatifs plus courts.

Comment mesurer les performances d’une vidéo sur une page de destination ?

Mesurez la conversion visée par la page en parallèle du comportement de lecture et des performances web. Suivez la profondeur de visionnage utile plutôt que les seuls lancements de lecture, et comparez la vitesse de la page, sa réactivité, les abandons et la conversion à une version témoin sans vidéo.

Transloadit héberge-t-il ou lit-il les vidéos des pages de destination ?

Transloadit n’héberge pas la page de destination et ne fournit pas son lecteur vidéo. Il peut encoder les médias fournis, créer des images d’affiche, ajouter des sous-titres, notifier votre application à la fin du traitement et distribuer les fichiers traités via le Smart CDN. Prévoyez vos propres solutions d’hébergement de page de destination, de lecture, d’analytique et de stockage à long terme.