Eメール機能は動画を多くの視聴者と共有できる素晴らしいツールですが、残念ながらほとんどの主要なEメールクライアント(GmailやYahooを含む)はメールで直接動画を再生できるよう対応されておりません。とはいえ、動画をEメールに追加するために使用できるいくつかのオプションがあります。
✦ Vimeo上で動画ページにリンクした画像ファイルを挿入する(推奨)
他のサービスを使用してEメールキャンペーンを作成している場合は、そのサービス内に、クリック可能な画像として動画を埋め込むのに役立つツールがあることが多いです。いくつかの異なるプロバイダに役立つリソースがこちらです:
- Mail Chimp: https://mailchimp.com/help/add-video-to-a-campaign/
- Constant Contact: https://knowledgebase.constantcontact.com/articles/KnowledgeBase/6227-insert-a-video-link-in-the-next-generation-editor?+target=&lang=en_US#VideoBlock
- Drip: https://help.drip.com/hc/en-us/articles/115003729431-An-Alternative-to-Embedded-Video
- Campaign Monitor: https://help.campaignmonitor.com/email-builder-video-and-music
GmailのようなEメールクライアントの場合は、手動で画像ファイルを挿入し、Vimeoの動画ページにハイパーリンクを追加することもできます(例 https://vimeo.com/76979871 )、レビューページ(例 https://vimeo.com/staff/review/76979871/3b3934c24b )、または独立型プレーヤー自体(例 https://player.vimeo.com/video/76979871 )。独立型のプレーヤのリンクは動画の埋め込みコードにあります。
画像ファイルから動画にリンクするときは、再生ボタンを含む静止画像を使用するのが最適です。これは動画プレーヤーに似せた表示をすることで、視聴者に向けて動画に誘導されていることを通知します。「再生ボタン」グラフィック付きのサムネイルを生成する最も簡単な方法は、Vimeoプレーヤーのスクリーンショットを撮ることです。
動画設定ページの例はこちらです:
(💡TIP:Plusメンバー以上では、動画設定ページの埋め込みセクションでプレビュープレーヤーをカスタマイズできます)
デベロッパーは、Vimeo API または oEmbed を使用して再生ボタンでサムネイルを引っ張ってくることもできます。VimeoのAPIの詳細については、以下のリソースをご確認ください:
- https://developer.vimeo.com/api/guides/start
- https://developer.vimeo.com/api/oembed/videos#embedding-a-video-with-oembed-step-1
独自の動画サムネイルを自由にクリエイティブにデザインすることもできます(アニメーションGIFはほとんどのEメールクライアントに対応しています)。
✦HTMLを使用して動画を埋め込む
視聴者は主に、Apple MailのようなEメールでの再生に対応しているEメールクライアントを使用している場合は、カスタムHTMLコードを使って動画を埋め込むことができます。
注:このオプションには以下の前提条件があります:
- HTMLに関する技術的な知識
- HTMLのメッセージを直接編集できるEメールクライアント
- Vimeo Proアカウント以上
はじめに、Vimeoでホスティングされている動画ファイルに直接ファイルリンクをアクセスさせ、それをEメールクライアントのHTML動画タグに挿入する必要があります。あなたの動画への直接リンクは、下に示されている通り、動画設定ページの「配信」セクションでから見つけることができます:
(注:異なるインターネット接続を介してストリーミングするのが最も簡単なため、SDの使用をお勧めします)
上記のサムネイルオプションと同様に、動画に対応していないEメールクライアント用には「フォールバック画像」を作成する必要があります。例えば、コードは次のようになります:
<video width="320" height="176" controls poster="https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F452001751_295x166.webp&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png" src="https://player.vimeo.com/external/76979871.sd.mp4?s=64f8b272e5a5a47e8c5208f68beabc71a443a61e&profile_id=112" >
<!-- fallback 1 -->
<a href="https://www.vimeo.com/staff/player" ><img height="176"
src="https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F452001751_295x166.webp&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png" width="320" /></a>
</video>
You can find a detailed overview of using HTML5 video in email from Email on Acid: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email