mailinapp
Documentation menu

Blocco Video

Un'immagine di anteprima statica nella posta in arrivo che apre il file al tap, e un vero player <video> funzionante sulla vista live ospitata. Nessun client di posta esegue la riproduzione multimediale, quindi questo è l'unico blocco in cui il livello inviato via email e il livello della vista live sono davvero render diversi, invece di una divisione cinetico/fallback dello stesso markup.

Come funziona

Nessun client di posta — non Gmail, non Outlook, nulla nel mezzo — può riprodurre un video in linea. Quindi qui non c'è alcun livello cinetico di cui parlare, a differenza di un Sondaggio o di una Fisarmonica.

L'HTML inviato via email renderizza sempre un'anteprima statica. La tua immagine poster, se ne imposti una, viene mostrata come un semplice <img> a piena larghezza racchiuso in un link diretto al file video (o a una pagina a cui punti). Se lasci il poster vuoto, viene invece renderizzato un riquadro segnaposto: un rettangolo scuro pieno con un glifo ▶ e una didascalia — il testo della descrizione, più una durata formattata M:SS se ne hai impostata una. In questo modo il blocco comunica comunque cos'è, anche senza un'immagine fornita. Toccando l'una o l'altra versione si apre direttamente src, lo stesso schema click-through già usato da un blocco Immagine con link, e il clic viene tracciato nella mappa di calore dei clic a livello di blocco.

La vista live ospitata è una vera pagina che una persona sta effettivamente guardando, non una posta in arrivo vincolata a ciò che i client email possono renderizzare. Lì, quindi, lo stesso blocco renderizza invece un vero elemento <video controls>, con la tua immagine poster impostata come attributo poster se ne hai fornita una e la descrizione come suo aria-label. Questa divisione è guidata dallo stesso segnale usato da ogni emitter con logica lato server condizionale nel codice: se al momento del rendering è presente un URL di base (posta) oppure assente (vista live). Non esiste un blocco "video vista live" separato da configurare — solo un unico blocco i cui due livelli divergono davvero in ciò che possono fare.

Il blocco accetta un semplice URL per src — il file video lo ospiti tu stesso; MailInApp non memorizza file video. L'immagine poster è diversa: proviene dalla libreria multimediale, quindi l'Ispettore mostra una miniatura e un pulsante Scegli immagine… invece di un campo URL — scegli un'immagine già caricata o caricane una nuova direttamente lì. Se src è vuoto, il blocco non viene renderizzato affatto, su nessuno dei due livelli.

Campi configurabili:

  • URL video — il file (o la pagina) a cui rimanda l'anteprima inviata via email, e il src del player nella vista live.
  • Immagine poster — mostrata come immagine di anteprima nell'email e impostata come poster del <video> nella vista live; scelta dalla tua libreria multimediale.
  • Descrizione — usata come didascalia segnaposto (quando non è impostato alcun poster) e come aria-label del player nella vista live.
  • Durata (secondi) — formattata nella didascalia segnaposto come M:SS; 0 la omette.
  • Larghezza (%) — 10–100.
  • Colore di sfondo, padding, bordo e raggio del bordo sul frame.

Video è contenuto puro: non c'è nulla a cui rispondere, quindi i completamenti e il tempo di visione non vengono tracciati — compare solo il click-through in sé, nella mappa di calore dei clic, come per qualsiasi altro blocco con link.

Esempi

Subject

Watch: our product launch recap

Un'email di lancio prodotto incorpora un teaser di 30 secondi. I destinatari toccano l'immagine poster nella posta in arrivo per aprire il video completo sul tuo sito o CDN, mentre chiunque apra invece la vista live ospitata della campagna può guardarlo in linea senza lasciare la pagina. Un digest di recap corso collega la registrazione di ogni lezione nello stesso modo, con il campo durata che dà ai destinatari un'idea dell'impegno di tempo richiesto prima di toccare per aprire. Un video di testimonianza cliente si trova all'interno di un'email case study con un fotogramma fisso del video come poster, così l'anteprima si legge come una vera foto invece che come un generico riquadro segnaposto.

Come appare il fallback statico

<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>

Questo è il livello inviato via email: un'immagine poster racchiusa in un semplice link al file video — il vero elemento <video controls> della vista live viene renderizzato solo sulla pagina ospitata, mai nella posta.

Vedi anche