Afficher une vidéo et régler sa lecture

Une vidéo peut présenter votre activité, expliquer un geste ou donner un aperçu d’un lieu. Commencez par décider si le visiteur doit la lancer lui-même ou si elle sert d’animation discrète dans la page.

1. Choisir le fichier vidéo

Dans Design, sélectionnez l’élément vidéo et ouvrez le groupe Vidéo. Le réglage Vidéo permet de choisir le fichier dans le gestionnaire de fichiers. Cliquez sur Changer de fichier si un fichier est déjà sélectionné, puis choisissez la vidéo souhaitée.

Vous pouvez préparer le fichier dans le gestionnaire avant de construire la page. Pour une vidéo hébergée sur YouTube, utilisez l’élément YouTube et son identifiant, plutôt que le sélecteur de fichier vidéo.

La démonstration utilise un petit fichier muet de présentation du studio Alma, préparé pour ce test. Vos propres fichiers doivent être adaptés au web ; vérifiez leur poids et leur rendu sur téléphone.

2. Préparer l’image d’attente

Lorsque la lecture automatique est désactivée, le réglage Image d’aperçu permet de choisir l’image visible avant la lecture. Cliquez sur sa vignette, puis sélectionnez une image dans le gestionnaire.

Choisissez une image qui annonce le contenu de la vidéo et reste lisible dans ses proportions. Une image d’attente soigneusement choisie rend la page plus agréable avant même que le visiteur lance la vidéo.

Ce réglage disparaît du panneau lorsque vous activez la lecture automatique. Cela ne signifie pas que votre fichier vidéo a été supprimé.

3. Afficher les commandes et choisir la répétition

Lorsque la lecture automatique est active, le réglage des contrôles permet d’afficher ou de masquer les commandes du lecteur. En lecture manuelle, le lecteur conserve les commandes pour permettre au visiteur de lancer la vidéo ; le choix Cacher est alors désactivé dans le panneau, avec une explication. Pour une explication ou une présentation que le visiteur doit suivre, gardez-les visibles afin qu’il puisse lancer, arrêter ou reprendre la lecture.

Dans Boucle, activez la répétition si la vidéo doit recommencer une fois terminée. Une courte animation décorative peut fonctionner ainsi. Une longue explication gagne généralement à se terminer normalement.

La démonstration active la lecture automatique et la boucle, puis masque, réaffiche et masque à nouveau les commandes. Pour la lecture manuelle, l’autre démonstration choisit le fichier et son image d’attente ; le visiteur lance ensuite réellement ce lecteur sur ordinateur et téléphone.

4. Choisir la lecture automatique et son seuil

Activez Lecture automatique si la vidéo doit démarrer lorsqu’elle devient visible. Le réglage Seuil de lecture apparaît alors. Il indique la part du lecteur attendue à l’écran. Ce réglage doit être contrôlé dans la prévisualisation publiée : il concerne la visibilité du lecteur dans la fenêtre du visiteur.

La démonstration règle ce seuil à 75 % avec le curseur. Vous pouvez l’ajuster avec les flèches du clavier lorsque le curseur est sélectionné. Le réglage décrit la visibilité du lecteur, pas la progression dans la vidéo.

Le comportement de cet exemple a été contrôlé sur ordinateur et téléphone : pause à environ 10 % puis 74 % de visibilité, lecture à environ 76 %, et pause lorsque le lecteur redevient peu visible ou sort de l’écran. Une répétition complète de l’animation de six secondes a aussi été vérifiée. Cela valide cet exemple dans Chromium ; testez votre propre vidéo sur les appareils de votre public.

La lecture automatique utilise un son coupé. Ne comptez donc pas sur une voix pour transmettre une information indispensable au démarrage : accompagnez-la de texte ou laissez le visiteur lancer une vidéo avec ses commandes.

Le canvas du builder peut suspendre la lecture automatique pendant l’édition. Le réglage reste présent ; vérifiez son comportement dans l’aperçu destiné au visiteur, puis sur le staging.

5. Contrôler la page avant publication

Vérifiez l’image d’attente, les commandes et la lecture sur ordinateur et téléphone. Assurez-vous que le lecteur garde des proportions adaptées et ne dépasse pas de son conteneur.

Contrôlez aussi ce qui se passe lorsque vous faites défiler la page : une vidéo décorative doit rester discrète ; une vidéo explicative doit rester facile à retrouver et à reprendre.

Enregistrez vos réglages puis testez le staging. Le choix d’un fichier et de ses options dans le builder ne publie pas à lui seul la page.