動画ブロック

受信トレイではタップするとファイルが開く静止画のプレビューを表示し、ホスティングされたライブビューでは実際に動作する<video>プレイヤーを表示します。メールクライアントはメディア再生を実行できないため、これは、同じマークアップのキネティック/フォールバックの分岐ではなく、メールのティアとライブビューのティアが本当に異なるレンダリングになっている唯一のブロックです。

仕組み

メールクライアントは — Gmailも、Outlookも、その間のどれも — 動画をインラインで再生できません。そのため、投票やアコーディオンにあるようなキネティックティアは、ここには存在しません。

メール送信されるHTMLは常に静止画のプレビューをレンダリングします。ポスター画像を設定していれば、動画ファイル(または指定したページ)へ直接リンクされた、単純な全幅の<img>として表示されます。ポスターを空のままにした場合は、代わりにプレースホルダーのボックスがレンダリングされます: ▶のグリフとキャプション付きの単色の暗い矩形で、キャプションには説明文と、設定していればM:SS形式でフォーマットされた再生時間が含まれます。これにより、画像が指定されていなくても、ブロックはそれが何であるかを伝え続けます。どちらのバージョンをタップしてもsrcが直接開かれ、これはリンク付きの画像ブロックが既に使っているものと同じクリックスルーのパターンで、クリックはブロック単位のクリックヒートマップで追跡されます。

ホスティングされたライブビューは、メールクライアントがレンダリングできる範囲に制約される受信トレイではなく、人間が実際に閲覧している本物のページです。そのため、そこでは同じブロックが代わりに本物の<video controls>要素をレンダリングし、ポスター画像を設定していればそれがposter属性に、説明文がaria-labelに設定されます。この分岐は、コードベース内のバックエンド分岐を行うすべてのエミッターが使っているのと同じ信号によって決まります: レンダリング時にベースURLが存在するか(メール)、存在しないか(ライブビュー)です。設定すべき別の「ライブビュー用動画」ブロックはありません — 2つのティアが実際にできることにおいて本当に分かれている、1つのブロックだけです。

このブロックはsrcに単純なURLを受け取ります — 動画ファイルは自分でホスティングします。MailInAppは動画ファイルを保存しません。ポスター画像は異なります: メディアライブラリから取得されるため、インスペクターにはURLボックスの代わりにサムネイルと**画像を選択…**ボタンが表示されます — その場で、既にアップロード済みの画像を選ぶか、新しい画像をアップロードします。srcが空の場合、ブロックはどちらのティアでも一切レンダリングされません。

設定可能なフィールド:

• 動画URL — メールのプレビューがリンクするファイル(またはページ)であり、ライブビューのプレイヤーのsrcでもあります。
• ポスター画像 — メールのプレビュー画像として表示され、ライブビューの<video>のposterとして設定されます。メディアライブラリから選択します。
• 説明 — (ポスターが設定されていない場合の)プレースホルダーのキャプション、およびライブビューのプレイヤーのaria-labelとして使われます。
• 再生時間(秒) — プレースホルダーのキャプションにM:SS形式で反映されます。0を指定すると省略されます。
• 幅(%) — 10〜100。
• フレーム全体の背景色、パディング、枠線、角丸。

動画は純粋なコンテンツです: 回答するものが何もないため、完了や視聴時間は追跡されません — 他のリンク付きブロックと同様に、クリックスルー自体だけがクリックヒートマップに表示されます。

例

新商品発表のメールには30秒のティーザー動画が埋め込まれます。受信者は受信トレイでポスター画像をタップして、自分のサイトやCDN上の完全な動画を開きます。一方、代わりにキャンペーンのホスティングされたライブビューを開いた人は、ページを離れることなくインラインで視聴できます。コース復習ダイジェストでも同じ方法で各レッスンの録画をリンクし、再生時間フィールドによって受信者はタップする前にかかる時間の見当がつきます。顧客の声動画をケーススタディのメールに配置する際は、動画のワンシーンをポスターにすることで、プレビューが汎用のプレースホルダーボックスではなく本物の写真のように見えます。

静的フォールバックの見え方

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

これがメール送信されるティアです: 動画ファイルへの単純なリンクに包まれたポスター画像です — ライブビューの本物の<video controls>要素は、ホスティングされたページ上でのみレンダリングされ、メールでは決してレンダリングされません。

関連ページ

• ブロックリファレンス概要
• 音声ブロック
• ライブビュー
• インタラクションと分析