Identifier ce qui s’affiche avant la lecture
Votre vidéo se lit correctement, mais l’image visible avant le clic est ancienne, noire ou différente de celle choisie. Commencez par identifier ce qui affiche cette image. Dans une page WordPress, une même photo peut servir de couverture à l’article, d’affiche au lecteur et de vignette dans un service vidéo. Ces emplacements ont des réglages distincts. Changer l’image mise en avant de la page peut réparer la carte du blog sans toucher au lecteur.
Dans l’éditeur de la page, ouvrez la Vue en liste et sélectionnez le bloc qui contient réellement la vidéo. Si WordPress indique « Vidéo » et que le bloc lit un fichier, cherchez le réglage d’image d’affiche dans les paramètres de ce bloc. Un bloc Couverture avec une vidéo en arrière-plan sert à composer une section visuelle. Un bloc YouTube ou une intégration dans un cadre externe délègue l’affichage à un autre lecteur. Si une vignette apparaît dans une grille avant même l’ouverture de la page, vérifiez le modèle de la grille et l’image mise en avant plutôt que le lecteur.
Dans le bloc Vidéo natif, l’affiche désigne l’image que le navigateur peut montrer avant la lecture. L’URL est enregistrée dans l’attribut HTML poster de la balise video. Sans affiche utilisable, le navigateur peut présenter une autre image, par exemple une première trame lorsqu’elle est disponible, ou laisser un emplacement vide. Un aperçu qui démarre immédiatement laisse peu de temps pour observer l’affiche. Pour isoler ce point, désactivez la lecture automatique sur la page d’essai. Conservez la vidéo et ses pistes de texte telles quelles.
Il faut ensuite distinguer trois situations. L’adresse de l’affiche n’apparaît pas dans la page rendue, l’adresse est là mais pointe vers un mauvais fichier, ou l’adresse est correcte et le fichier reçu ne correspond pas à ce que vous attendiez. Chacune mène à un contrôle différent. Deux images qui ne peuvent pas être confondues rendent cette comparaison plus rapide qu’une série de rechargements à l’aveugle.
Préparer deux images qui ne se confondent pas
Faites l’essai dans une copie locale avec une vidéo courte dont le contenu et les droits sont connus. Une vidéo fictive suffit. Préparez deux images de même taille et de proportions proches de la vidéo. Par exemple, utilisez un rectangle orange marqué « A » et un rectangle bleu marqué « B ». Donnez-leur des noms distincts, tels que affiche-a-orange.png et affiche-b-bleue.png. Ne remplacez pas les octets d’un fichier en conservant le même nom et la même URL pour cet essai. Sinon, une ancienne copie en cache et une erreur de réglage seraient difficiles à départager.
Créez une page « Essai affiche vidéo » et insérez le bloc Vidéo natif. Sélectionnez le fichier court dans la médiathèque de la copie. Évitez les services externes dans ce cas témoin. Activez les contrôles du lecteur pour pouvoir lancer la lecture manuellement, et vérifiez que la lecture automatique est coupée. Publiez cette page sur la copie locale uniquement si vous voulez comparer la vue d’un visiteur déconnecté. Un brouillon donne accès à son aperçu connecté mais ne vous fournit pas la même réponse qu’une page visible en visiteur.
Notez le nom du fichier vidéo, le bloc utilisé et l’adresse locale de la page. Prenez aussi une note de la piste de texte si la vidéo en possède une. La seule variable à changer dans la première comparaison est l’affiche. Partez de A, affichez la page et observez le rectangle orange avant de cliquer. Ensuite seulement, remplacez A par B. Le résultat attendu est un rectangle bleu avant la lecture et la même vidéo après le clic. Revenez à A pour vérifier que vous savez annuler l’essai.
Si vous partez d’une page existante, gardez l’ancienne image dans la médiathèque et notez son URL avant de la remplacer. Plusieurs pages peuvent partager le même fichier. Il suffit de changer la sélection sur le bloc en cause, sans supprimer le média ni le réimporter ailleurs. Une copie de la page ou les révisions peuvent aider à comparer le bloc d’origine, mais prenez d’abord un repère précis pour ne pas restaurer toute une page lorsque seule l’affiche doit revenir.
Choisir l’affiche du bloc Vidéo
Dans la Vue en liste, sélectionnez le bloc Vidéo, ouvrez la colonne Réglages et assurez-vous qu’elle affiche l’onglet du bloc. Cherchez la section Image d’affiche, aussi appelée « Poster image » dans une interface en anglais. Le nom ou l’emplacement exact peut varier selon la version ou la langue. Si vous voyez seulement les paramètres de la page, sélectionnez de nouveau le bloc. Si c’est un bloc Couverture ou un lecteur externe, passez à la procédure correspondant à ce composant.
- Dans le bloc Vidéo sélectionné, utilisez le bouton de choix de l’image d’affiche et prenez
affiche-a-orange.pngdans la médiathèque. Enregistrez la page. Ouvrez son aperçu avant tout clic et vérifiez que l’image orange occupe la zone du lecteur. - Revenez au même bloc, choisissez
affiche-b-bleue.pngcomme image d’affiche et enregistrez de nouveau. Vérifiez le nom ou la miniature dans le réglage. Laissez le fichier vidéo et ses autres réglages en place. - Ouvrez la page locale depuis une fenêtre déconnectée si elle est visible aux visiteurs de la copie. Attendez que la page soit affichée sans lancer la lecture. L’image bleue est le résultat attendu. Démarrez ensuite la vidéo une fois et vérifiez que le fichier lu est toujours celui du départ.
- Si la vidéo change elle aussi, annulez la modification de ce bloc et vérifiez que vous avez bien utilisé le réglage de l’affiche. La commande « Remplacer » associée au fichier vidéo peut agir sur la source du film. Revenez au réglage de l’image d’affiche pour limiter le changement à la vignette.
Comparer l’aperçu et le HTML réellement reçu
Si la bonne miniature figure dans l’éditeur et que la page affiche encore A, inspectez la page où le problème se produit. Dans Chrome, ouvrez les outils de développement avec F12 ou depuis le menu du navigateur. Dans Éléments, utilisez le sélecteur d’élément et cliquez sur la zone vidéo. Repérez le bon video, notamment si la page en contient plusieurs. L’attribut poster peut contenir un chemin relatif ou une adresse complète. Comparez son nom de fichier et son chemin avec ceux de B. Ce contrôle se fait en lecture seule. Une édition dans ce panneau disparaîtrait au rechargement.
Pour distinguer une transformation du navigateur d’une réponse déjà différente, regardez aussi le document HTML effectivement reçu. Dans Réseau, ouvrez la requête de type document correspondant à la page, puis l’onglet Réponse, et cherchez le nom du fichier vidéo ou celui de B. N’utilisez pas la première occurrence de poster sur une page qui comporte plusieurs lecteurs. Associez chaque occurrence au bloc qui contient le fichier vidéo attendu. Si l’adresse est correcte dans la réponse mais différente dans Éléments, le code chargé par la page a pu modifier le lecteur après réception. Le thème, le lecteur ou un chargement différé peuvent alors intervenir. Faites une comparaison sur la copie plutôt que de couper d’emblée une optimisation sur toutes les pages.
Si l’adresse de B manque aussi dans le HTML de la page, vérifiez que vous avez enregistré la bonne page et que vous consultez le bon chemin. Un aperçu connecté et une version visiteur peuvent correspondre à deux états différents. Si la réponse visiteur montre encore A alors que B a bien été enregistré, un cache de page ou un modèle qui génère un autre lecteur devient une piste. Comparez les deux réponses avant d’agir. Si une purge est nécessaire, ciblez l’adresse de la page dans l’outil de cache déjà en place et répétez la visite dans les mêmes conditions. Une fenêtre privée change le contexte du navigateur ; elle ne force pas un cache partagé à régénérer sa page.
Si le HTML contient B et que B reste aussi présent dans Éléments, passez au fichier lui-même. Le contrôle suivant distingue une bonne référence vers une image introuvable d’une réponse qui contient réellement la nouvelle affiche.
Voici la balise à repérer dans l’inspecteur pour l’exercice. Le fichier vidéo reste le même et seule l’adresse de l’affiche change.
<video controls src="/clip.webm" poster="/affiche-b-bleue.png"></video>Vérifier le fichier dans le panneau Réseau
Dans Chrome, laissez le panneau Réseau ouvert, cochez « Désactiver le cache » pour le navigateur et rechargez la page sans cliquer sur Lecture. Vous pouvez filtrer par le nom exact affiche-b-bleue.png. Si rien n’apparaît, effacez d’abord le filtre et vérifiez que l’enregistrement des requêtes tourne. Faites défiler la page jusqu’au lecteur si son chargement est différé. L’absence de ligne pendant ce seul essai ne prouve pas que le fichier manque. Vérifiez la présence de l’attribut et ouvrez au besoin son adresse sur la copie pour faire une requête directe séparée.
Ouvrez la ligne de l’image et regardez son adresse finale, le statut et l’aperçu. L’adresse attendue doit renvoyer une image décodable. Un statut 200 peut aussi correspondre à une page HTML de connexion, à une erreur habillée comme une page, ou à l’ancienne image servie à la même adresse. L’onglet Aperçu permet de distinguer l’orange du bleu. Une redirection peut être légitime si elle se termine sur la bonne image accessible au visiteur. Si elle mène à une page de connexion ou à un fichier différent, vérifiez l’origine de cette adresse au lieu de la réutiliser. Un 304 signifie que la réponse précédente peut être réutilisée ; il ne suffit pas pour juger sa couleur ou son contenu.
Si la réponse est introuvable, sélectionnez un fichier présent dans la médiathèque de la copie et vérifiez sa nouvelle adresse. Si elle est refusée en visiteur mais fonctionne en session connectée, contrôlez si le fichier est réservé à la copie privée, à un autre rôle ou à une URL temporaire. Gardez en place les restrictions voulues. L’affiche doit être accessible au même public que la vidéo et respecter les mêmes règles de diffusion. Ne remplacez pas un fichier protégé par une version ouverte juste pour éliminer une erreur de chargement.
Si la réponse contient A à une adresse censée servir B, essayez une nouvelle image dotée d’un nom inédit, puis vérifiez que le HTML adopte son URL. Si le changement de nom règle l’essai, vous avez isolé une différence entre deux adresses. Cela ne désigne pas à lui seul le cache responsable. Un hébergement, un CDN ou une extension d’images peut intervenir en plus du cache navigateur. Conservez les anciens fichiers tant qu’ils servent ailleurs. Après le contrôle, retirez la coche « Désactiver le cache » afin de refaire une visite avec les réglages habituels.
Traiter les lecteurs intégrés à part
Si la Vue en liste identifie un bloc YouTube ou un autre lecteur dans un cadre externe, le poster du bloc Vidéo natif ne commande pas sa vignette. Inspectez uniquement l’élément qui encadre le lecteur sur votre page. Si vous voyez un iframe, le réglage de la miniature appartient au fournisseur du lecteur, ou au composant qui place une image devant ce cadre. Si vous voyez une image avec un bouton Lecture avant l’apparition du cadre, cherchez plutôt le réglage de façade ou de chargement différé du bloc, du thème ou de l’extension qui crée ce bouton. Une façade peut masquer un lecteur dont la miniature interne est pourtant correcte.
Sans accès à ce réglage, vous pouvez proposer sur votre propre page une image locale accompagnée d’un lien explicite « Voir la vidéo » au lieu de l’intégration. Si ce lien mène à un service externe, indiquez la destination de manière lisible. Pour vérifier le principe sans aucun service, utilisez une seconde page locale comme destination sur la copie. Ce parcours convient quand le lecteur intégré est facultatif. Il change la navigation du visiteur ; un clic sur le lien ouvre la destination au lieu de lire la vidéo sur place.
Si la vidéo est à vous et peut être hébergée avec ses pistes et ses droits, le bloc Vidéo natif est une autre possibilité. Remplacer un lecteur externe par ce bloc change cependant la diffusion, la charge de l’hébergement et éventuellement les fonctions de sous-titrage ou de qualité vidéo. Faites la comparaison sur une copie du contenu, sans toucher à l’intégration initiale. Pour revenir en arrière, restaurez le bloc intégré sauvegardé au même emplacement. Ne changez ni la couverture d’article ni le thème entier pour corriger un réglage qui dépend d’un autre lecteur.
Valider le rendu et revenir à l’ancienne affiche
Refaites le parcours du visiteur sur la copie. Ouvrez la page sans interaction et vérifiez que la nouvelle image tient dans la zone du lecteur. Comparez une largeur de téléphone et une largeur d’ordinateur. Une image correcte dans le panneau Réseau peut quand même sembler incorrecte si le thème recadre la vidéo ou si le fichier comporte déjà des bandes sombres. Regardez le même fichier ouvert directement sur la copie, puis dans la page. Si seul le rendu intégré coupe la composition, rapprochez les proportions de l’image de celles de la vidéo et vérifiez où se trouve le sujet principal. Le retour consiste à resélectionner le fichier d’origine dans ce bloc.
Lancez ensuite la lecture. Vérifiez les contrôles, le son si la vidéo en possède, et une piste de sous-titres déjà configurée si elle fait partie de votre page. Il est normal que l’affiche laisse place au film. Un arrêt ou un retour au début ne reproduit pas nécessairement le tout premier affichage. Pour chaque comparaison avant lecture, rechargez la page et attendez qu’elle s’affiche sans cliquer. Si le défaut ne concerne que le film après démarrage, sortez du diagnostic d’affiche. Il faut alors vérifier la source vidéo ou le lecteur selon le symptôme.
Pour revenir à l’état initial, ouvrez le bloc Vidéo et reprenez la sélection A, ou l’image notée au départ, puis enregistrez. Si aucune affiche n’avait été définie, retirez la sélection d’affiche dans le bloc en conservant la vidéo. Rechargez la même adresse en visiteur. Dans Éléments, vérifiez l’ancienne valeur de poster ou son absence ; dans Réseau, vérifiez l’image correspondante lorsqu’elle est demandée. Si la restauration manuelle est impossible, comparez la révision précédente en vérifiant qu’elle ne rétablit pas d’autres modifications. Gardez la version de page actuelle en lieu sûr avant une restauration globale.
Conservez la vidéo et les deux fichiers jusqu’à la fin de la comparaison. Si vous voulez retirer B après l’essai, vérifiez d’abord qu’aucun autre bloc ou contenu de la copie ne le référence. Supprimer l’image de la médiathèque pour voir si la page change laisserait un lien cassé et ne constitue pas une vérification de retour arrière.
Documenter ce qui doit rester indépendant
Notez l’adresse de la page, le type de bloc, le nom de l’affiche voulue, la valeur trouvée dans le document HTML, l’adresse finale de l’image et le résultat visuel avant lecture. Ce relevé aide à isoler le défaut si la page change au prochain enregistrement. Pour le cas d’école, la comparaison attendue est A avec son fichier orange, B avec son fichier bleu, puis A après retour. La vidéo doit rester identique tout au long du parcours. Si vous n’avez pas eu accès à la vue visiteur, indiquez que seul l’aperçu connecté a été vérifié.
En cas de résultat incohérent, utilisez la première observation qui diverge. Un bloc qui indique A appelle une correction dans l’éditeur. Un bloc qui indique B avec une réponse HTML encore sur A appelle une comparaison du rendu ou du cache de page. Un HTML et un élément corrects avec une image orange dans l’aperçu de la requête désignent le fichier réellement livré. Garder cette chaîne dans cet ordre évite de reconfigurer la médiathèque alors que la page utilise encore l’ancienne adresse.
Enfin, conservez les autres réglages à leur place. Le texte alternatif d’une image utilisée ailleurs appartient à ce contexte. Le nom de la vidéo, les sous-titres et le texte qui présente son contenu restent nécessaires selon le besoin du lecteur. Une belle affiche peut annoncer le sujet, mais elle ne rend pas la vidéo lisible sans ses contrôles et ses alternatives. Si une photo sert aussi d’image mise en avant pour la liste d’articles, vérifiez cette liste séparément. Vous saurez ainsi quel réglage modifier si l’un des deux emplacements change plus tard.
