mailinapp
Documentation menu

Video-Block

Ein statisches Vorschaubild im Posteingang, das die Datei bei einem Tap öffnet, und ein echter funktionierender <video>-Player auf der gehosteten Live-Ansicht. Kein E-Mail-Client führt Medienwiedergabe aus, daher ist dies der eine Block, bei dem die versendete Stufe und die Live-Ansicht-Stufe tatsächlich unterschiedliche Darstellungen sind, statt einer kinetisch/statisch-Aufteilung desselben Markups.

Wie es funktioniert

Kein E-Mail-Client — nicht Gmail, nicht Outlook, nichts dazwischen — kann ein Video inline abspielen. Es gibt hier also keine kinetische Stufe, wie sie eine Abstimmung oder ein Akkordeon hat.

Die versendete E-Mail rendert immer eine statische Vorschau. Ihr Titelbild, falls gesetzt, wird als einfaches, in voller Breite dargestelltes <img> angezeigt, eingebettet in einen Link direkt zur Videodatei (oder einer Seite, auf die Sie verweisen). Haben Sie kein Titelbild gesetzt, wird stattdessen ein Platzhalter gerendert: ein massives, dunkles Rechteck mit einem ▶-Symbol und einer Bildunterschrift — dem Beschreibungstext, plus einer formatierten M:SS-Dauer, falls Sie eine gesetzt haben. So kommuniziert der Block weiterhin, worum es sich handelt, selbst ohne bereitgestelltes Bild. Ein Tap auf beide Varianten öffnet src direkt, dasselbe Klick-Muster, das ein verlinkter Bild-Block bereits verwendet, und der Klick wird in der blockbezogenen Klick-Heatmap erfasst.

Die gehostete Live-Ansicht ist eine echte Seite, die ein Mensch aktiv betrachtet, kein Posteingang, der auf das beschränkt ist, was E-Mail-Clients rendern können. Dort rendert derselbe Block stattdessen ein echtes <video controls>-Element, mit Ihrem Titelbild als poster-Attribut, falls Sie eines angegeben haben, und der Beschreibung als dessen aria-label. Diese Aufteilung wird durch dasselbe Signal gesteuert, das jeder backend-verzweigende Emitter im Code verwendet: ob zur Renderzeit eine Basis-URL vorhanden ist (E-Mail) oder nicht (Live-Ansicht). Es gibt keinen separaten „Live-Ansicht-Video“-Block zum Konfigurieren — nur einen Block, dessen zwei Stufen sich in dem, was sie können, tatsächlich unterscheiden.

Der Block nimmt eine einfache URL für src entgegen — Sie hosten die Videodatei selbst; MailInApp speichert keine Videodateien. Das Titelbild ist anders: Es stammt aus der Mediathek, daher zeigt der Inspektor eine Miniaturansicht und eine Schaltfläche Bild wählen… statt eines URL-Felds — wählen Sie ein bereits hochgeladenes Bild oder laden Sie direkt dort ein neues hoch. Ist src leer, wird der Block auf keiner der beiden Stufen gerendert.

Konfigurierbare Felder:

  • Video-URL — die Datei (oder Seite), zu der die versendete Vorschau verlinkt, und src des Live-Ansicht-Players.
  • Titelbild — als versendetes Vorschaubild angezeigt und als Poster des <video>-Elements der Live-Ansicht gesetzt; ausgewählt aus Ihrer Mediathek.
  • Beschreibung — verwendet als Platzhalter-Bildunterschrift (wenn kein Titelbild gesetzt ist) und als aria-label des Live-Ansicht-Players.
  • Dauer (Sekunden) — wird als M:SS in die Platzhalter-Bildunterschrift formatiert; 0 lässt sie weg.
  • Breite (%) — 10–100.
  • Hintergrundfarbe, Innenabstand, Rahmen und Eckenradius des Rahmens.

Video ist reiner Inhalt: Es gibt nichts zu beantworten, daher werden Abschlüsse und Wiedergabedauer nicht erfasst — nur der Klick-Durchgang selbst erscheint, in der Klick-Heatmap, genau wie bei jedem anderen verlinkten Block.

Beispiele

Subject

Watch: our product launch recap

Eine Produkteinführungs-E-Mail bettet einen 30-sekündigen Teaser ein. Empfänger tippen im Posteingang auf das Titelbild, um das vollständige Video auf Ihrer Website oder Ihrem CDN zu öffnen, während jeder, der stattdessen die gehostete Live-Ansicht der Kampagne öffnet, es inline ansehen kann, ohne die Seite zu verlassen. Eine Kursrückblick-Digest-E-Mail verlinkt die Aufzeichnung jeder Lektion auf dieselbe Weise, wobei das Feld für die Dauer den Empfängern ein Gefühl für den Zeitaufwand vermittelt, bevor sie durchtippen. Ein Kunden-Testimonial-Video sitzt in einer Fallstudien-E-Mail mit einem Standbild aus dem Video als Titelbild, sodass die Vorschau wie ein echtes Foto wirkt statt wie ein generischer Platzhalter.

So sieht der statische Fallback aus

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

Dies ist die versendete Stufe: ein Titelbild, eingebettet in einen einfachen Link zur Videodatei — das echte <video controls>-Element der Live-Ansicht wird nur auf der gehosteten Seite gerendert, niemals in der E-Mail.

Siehe auch