mailinapp
Documentation menu

Bloc Vidéo

Une image d'aperçu statique dans la boîte de réception qui ouvre le fichier au toucher, et un vrai lecteur <video> fonctionnel sur la vue en direct hébergée. Aucun client de messagerie n'exécute la lecture de médias, donc c'est le seul bloc où le niveau envoyé et le niveau vue en direct sont véritablement des rendus différents plutôt qu'une séparation cinétique/repli du même balisage.

Comment ça fonctionne

Aucun client de messagerie — ni Gmail, ni Outlook, ni rien entre les deux — ne peut lire une vidéo intégrée. Il n'y a donc pas de niveau cinétique à proprement parler ici, contrairement à un sondage ou un accordéon.

Le HTML envoyé rend toujours un aperçu statique. Votre image d'affiche, si vous en définissez une, s'affiche comme un simple <img> pleine largeur enveloppé dans un lien direct vers le fichier vidéo (ou une page vers laquelle vous pointez). Si vous laissez l'affiche vide, un encadré de remplacement se rend à la place : un rectangle sombre uni avec un glyphe ▶ et une légende — le texte de description, plus une durée formatée M:SS si vous en avez défini une. Ainsi, le bloc continue de communiquer ce qu'il est, même sans image fournie. Toucher l'une ou l'autre version ouvre src directement, le même motif de clic direct qu'utilise déjà un bloc Image lié, et le clic est suivi dans la carte de chaleur des clics au niveau du bloc.

La vue en direct hébergée est une vraie page qu'une personne consulte activement, pas une boîte de réception limitée à ce que les clients de messagerie peuvent rendre. Là, le même bloc rend donc un véritable élément <video controls> à la place, avec votre image d'affiche définie comme attribut poster si vous en avez fourni une et la description comme son aria-label. Cette séparation est pilotée par le même signal qu'utilise chaque émetteur à branchement selon le backend dans le code : la présence (email) ou l'absence (vue en direct) d'une URL de base au moment du rendu. Il n'y a pas de bloc « vidéo vue en direct » séparé à configurer — juste un seul bloc dont les deux niveaux divergent véritablement dans ce qu'ils peuvent faire.

Le bloc prend une simple URL pour src — vous hébergez le fichier vidéo vous-même ; MailInApp ne stocke pas de fichiers vidéo. L'image d'affiche est différente : elle vient de la bibliothèque de médias, donc l'inspecteur affiche une vignette et un bouton Choisir une image… plutôt qu'un champ URL — choisissez une image déjà téléversée ou téléversez-en une nouvelle sur place. Si src est vide, le bloc ne se rend pas du tout, sur aucun des deux niveaux.

Champs configurables :

  • URL de la vidéo — le fichier (ou la page) vers lequel l'aperçu envoyé crée un lien, et le src du lecteur de la vue en direct.
  • Image d'affiche — affichée comme image d'aperçu envoyée et définie comme affiche du <video> de la vue en direct ; choisie depuis votre bibliothèque de médias.
  • Description — utilisée comme légende de remplacement (quand aucune affiche n'est définie) et comme aria-label du lecteur de la vue en direct.
  • Durée (secondes) — formatée dans la légende de remplacement en M:SS ; 0 l'omet.
  • Largeur (%) — 10–100.
  • Couleur de fond, marge intérieure, bordure et rayon de bordure sur le cadre.

Vidéo est du contenu pur : il n'y a rien à répondre, donc les visionnages et le temps de lecture ne sont pas suivis — seul le clic direct lui-même apparaît, dans la carte de chaleur des clics, comme tout autre bloc porteur de lien.

Exemples

Subject

Watch: our product launch recap

Un email de lancement de produit intègre un teaser de 30 secondes. Les destinataires touchent l'image d'affiche dans leur boîte de réception pour ouvrir la vidéo complète sur votre site ou CDN, tandis que quiconque ouvre plutôt la vue en direct hébergée de la campagne peut la regarder intégrée sans quitter la page. Une synthèse récapitulative de cours crée un lien vers l'enregistrement de chaque leçon de la même manière, le champ de durée donnant aux destinataires une idée de l'engagement en temps avant qu'ils ne cliquent. Une vidéo de témoignage client se trouve dans un email d'étude de cas avec une image fixe extraite de la vidéo comme affiche, afin que l'aperçu se lise comme une vraie photo plutôt qu'un encadré générique de remplacement.

À quoi ressemble l'alternative statique

<a href="https://cdn.example.com/launch-teaser.mp4"
   style="display:block">
  <div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
    <img src="https://cdn.example.com/launch-teaser-poster.jpg" alt="Launch teaser"
         style="display:block;width:100%;max-width:100%" />
  </div>
</a>

Ceci est le niveau envoyé : une image d'affiche enveloppée dans un simple lien vers le fichier vidéo — le véritable élément <video controls> de la vue en direct ne se rend que sur la page hébergée, jamais dans l'email.

Voir aussi