Bloco Vídeo
Uma imagem de pré-visualização estática na caixa de entrada que abre o arquivo ao ser tocada, e um player <video> de verdade, funcional, na visualização ao vivo hospedada. Nenhum cliente de e-mail executa reprodução de mídia, então este é o único bloco em que o nível de e-mail e o nível de visualização ao vivo são genuinamente renderizações diferentes, em vez de uma divisão cinético/fallback da mesma marcação.
Como funciona
Nenhum cliente de e-mail — nem o Gmail, nem o Outlook, nem nada intermediário — consegue reproduzir um vídeo embutido. Então não há um nível cinético a se falar aqui, como um bloco de enquete ou acordeão possui.
O HTML enviado por e-mail sempre renderiza uma pré-visualização estática. Sua imagem de capa, se você definir uma, é exibida como uma simples <img> de largura total envolvida em um link direto para o arquivo de vídeo (ou uma página que você aponte). Se você deixar a capa em branco, uma caixa de espaço reservado é renderizada em vez disso: um retângulo sólido escuro com um glifo ▶ e uma legenda — o texto de descrição, mais uma duração formatada como M:SS se você a definiu. Dessa forma, o bloco ainda comunica o que é, mesmo sem nenhuma imagem fornecida. Tocar em qualquer uma das versões abre src diretamente, o mesmo padrão de clique-para-abrir que um bloco de Imagem com link já usa, e o clique é rastreado no mapa de calor de cliques em nível de bloco.
A visualização ao vivo hospedada é uma página real que uma pessoa está de fato visualizando, não uma caixa de entrada limitada ao que os clientes de e-mail conseguem renderizar. Então lá, o mesmo bloco renderiza um elemento <video controls> genuíno, com sua imagem de capa definida como o atributo poster se você a forneceu, e a descrição como seu aria-label. Essa divisão é guiada pelo mesmo sinal que todo emissor com ramificação de backend no código usa: se uma URL base está presente (e-mail) ou ausente (visualização ao vivo) no momento da renderização. Não há um bloco separado de "vídeo para visualização ao vivo" a configurar — apenas um bloco cujos dois níveis genuinamente divergem no que conseguem fazer.
O bloco recebe uma URL simples para src — você mesmo hospeda o arquivo de vídeo; o MailInApp não armazena arquivos de vídeo. A imagem de capa é diferente: ela vem da biblioteca de mídia, então o Inspetor mostra uma miniatura e um botão Escolher imagem… em vez de uma caixa de URL — escolha uma imagem já enviada ou envie uma nova ali mesmo. Se src estiver vazio, o bloco simplesmente não é renderizado, em nenhum dos dois níveis.
Campos configuráveis:
- URL do vídeo — o arquivo (ou página) para o qual a pré-visualização enviada por e-mail é vinculada, e o
srcdo player da visualização ao vivo. - Imagem de capa — exibida como a imagem de pré-visualização no e-mail e definida como o poster do
<video>da visualização ao vivo; escolhida na sua biblioteca de mídia. - Descrição — usada como a legenda do espaço reservado (quando nenhuma capa está definida) e como o
aria-labeldo player da visualização ao vivo. - Duração (segundos) — formatada na legenda do espaço reservado como
M:SS; 0 a omite. - Largura (%) — 10–100.
- Cor de fundo, espaçamento interno, borda e raio da borda do quadro.
Vídeo é conteúdo puro: não há nada a responder, então conclusões e tempo de visualização não são rastreados — apenas o próprio clique aparece, no mapa de calor de cliques, assim como em qualquer outro bloco com link.
Exemplos
Subject
Watch: our product launch recap
Um e-mail de lançamento de produto incorpora um teaser de 30 segundos. Os destinatários tocam na imagem de capa em sua caixa de entrada para abrir o vídeo completo em seu site ou CDN, enquanto quem abrir a visualização ao vivo hospedada da campanha consegue assisti-lo embutido sem sair da página. Um resumo de recapitulação de curso vincula a gravação de cada aula da mesma forma, com o campo de duração dando aos destinatários uma noção do tempo necessário antes de tocarem para abrir. Um vídeo de depoimento de cliente fica dentro de um e-mail de estudo de caso com um quadro estático do vídeo como sua capa, para que a pré-visualização pareça uma foto real em vez de uma caixa de espaço reservado genérica.
Como é o fallback estático
<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 é o nível enviado por e-mail: uma imagem de capa envolvida em um link simples para o arquivo de vídeo — o elemento <video controls> real da visualização ao vivo só é renderizado na página hospedada, nunca no e-mail.