Bloque de video
Una imagen de vista previa estática en la bandeja de entrada que abre el archivo al tocarla, y un reproductor <video> real y funcional en la vista en vivo alojada. Ningún cliente de correo ejecuta reproducción de medios, así que este es el único bloque donde el nivel del correo enviado y el nivel de la vista en vivo son genuinamente renderizados distintos en lugar de una división cinética/alternativa del mismo marcado.
Cómo funciona
Ningún cliente de correo — ni Gmail, ni Outlook, ni nada intermedio — puede reproducir un video en línea. Así que aquí no hay ningún nivel cinético del que hablar, como sí lo tiene una encuesta o un acordeón.
El HTML enviado por correo siempre renderiza una vista previa estática. Tu imagen de portada, si defines una, se muestra como un <img> simple a todo lo ancho envuelto en un enlace directo al archivo de video (o a una página a la que apuntes). Si dejaste la portada en blanco, se renderiza un marcador de posición en su lugar: un rectángulo oscuro sólido con un glifo ▶ y un pie de foto — el texto de descripción, más una duración con formato M:SS si la definiste. De esa forma el bloque igual comunica de qué se trata, incluso sin una imagen provista. Tocar cualquiera de las dos versiones abre src directamente, el mismo patrón de clic pasante que ya usa un bloque de Imagen enlazado, y el clic se rastrea en el mapa de calor de clics a nivel de bloque.
La vista en vivo alojada es una página real que una persona está viendo activamente, no una bandeja de entrada limitada a lo que los clientes de correo pueden renderizar. Así que ahí, el mismo bloque renderiza un elemento <video controls> genuino en su lugar, con tu imagen de portada definida como el atributo poster si la proporcionaste y la descripción como su aria-label. Esta división está impulsada por la misma señal que usa cada emisor con ramificación de backend en el código base: si hay una URL base presente (correo) o ausente (vista en vivo) en el momento del renderizado. No hay un bloque separado de "video para vista en vivo" que configurar — solo un bloque cuyos dos niveles divergen genuinamente en lo que pueden hacer.
El bloque toma una URL simple para src — tú alojas el archivo de video; MailInApp no almacena archivos de video. La imagen de portada es distinta: proviene de la biblioteca multimedia, así que el Inspector muestra una miniatura y un botón Elegir imagen… en lugar de un campo de URL — elige una imagen ya subida o sube una nueva ahí mismo. Si src está vacío, el bloque no se renderiza en absoluto, en ningún nivel.
Campos configurables:
- URL del video — el archivo (o página) al que enlaza la vista previa del correo, y el
srcdel reproductor de la vista en vivo. - Imagen de portada — se muestra como la imagen de vista previa del correo y se define como el poster del
<video>de la vista en vivo; se elige desde tu biblioteca multimedia. - Descripción — se usa como el pie de foto del marcador de posición (cuando no hay portada definida) y como el
aria-labeldel reproductor de la vista en vivo. - Duración (segundos) — se formatea en el pie de foto del marcador de posición como
M:SS; 0 lo omite. - Ancho (%) — 10–100.
- Color de fondo, relleno, borde y radio de borde del marco.
Video es contenido puro: no hay nada que responder, así que las finalizaciones y el tiempo de visualización no se rastrean — solo el clic pasante en sí aparece, en el mapa de calor de clics, igual que cualquier otro bloque enlazado.
Ejemplos
Subject
Watch: our product launch recap
Un correo de lanzamiento de producto incrusta un adelanto de 30 segundos. Los destinatarios tocan la imagen de portada en su bandeja de entrada para abrir el video completo en tu sitio o CDN, mientras que cualquiera que en su lugar abra la vista en vivo alojada de la campaña puede verlo en línea sin salir de la página. Un resumen de recapitulación de curso enlaza la grabación de cada lección de la misma forma, con el campo de duración dando a los destinatarios una idea del tiempo requerido antes de que hagan clic. Un video de testimonio de cliente se coloca dentro de un correo de caso de estudio con un fotograma fijo del video como su portada, así la vista previa se lee como una foto real en lugar de un recuadro de marcador de posición genérico.
Cómo se ve la alternativa estática
<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>
Este es el nivel de correo: una imagen de portada envuelta en un enlace simple al archivo de video — el elemento <video controls> real de la vista en vivo solo se renderiza en la página alojada, nunca en el correo.