Labs

By Graeme Blackwood | 25th October 2010

Video in email - HTML5 the future?

The possibility of embedded video in marketing emails has been hoped for and talked about for ages. With the web having come on in leaps and bounds over the last few years, and with the general acceptance and availability of online video platforms such as Youtube, things are getting (a bit) better.

There have been a number of attempts at getting embedded video supported in email. GoodMail set up a scheme and forged relationships with email providers to allow emails certified by their system to embed videos, however this seems to have been short lived. Yahoo has discontinued support, and I can't find any information to show that anyone other than AOL work with them now.

Using object or embed tags to add video to emails results in the video being blocked by 99% of viewers, with Apple Mail seemingly the only exception. What is worse is that any fallback code you add is very often stripped out too, leaving nothing at all.

However, there have been some really promising developments with HTML5 video. As it doesn't require anything that could pose a threat to a user's system (email is notorious for being used as a hacking tool), HTML5 video is much safer and therefore not as restricted by email services/software.

According to research carried out by Campaign Monitor, HTML5 video plays in Apple Mail, Entourage 2008, MobileMe and on the iPhone. What is more significant is that the fallback content is displayed everywhere that will not play the video. This is a real step forward, meaning that you can happily embed video, knowing that it will degrade gracefully.

MailChimp currently has a video merge tag that you can use in your emails, which goes to your video page on say Youtube, grabs the keyframe, overlays controls, makes a static jpg wrapped in a link and then drops it into your email. What I am hoping, is that as Vimeo/Youtube/Blip.tv etc roll out HTML5 video, MailChimp will upgrade their video merge tag to make use of real video embedding, knowing that it will degrade properly.

So, after all that, let's see how we do it...

Many HTML5 video players use JavaScript to add controls to their players, but this will not work in email. Video for Everybody has provided some great JavaScript-free examples, so I have based my code on these. The only thing I am going to remove from the VfE examples are the references to the Flash object, which obviously won't work, and would in fact block the fallback image from being displayed.

<video width="580" height="300" controls poster="http://labs.deeson.net/html5-video-email/html5video-poster.jpg">
  <source src="http://labs.deeson.net/html5-video-email/html5Confirmation.mp4" type="video/mp4" />
  <source src="http://labs.deeson.net/html5-video-email/html5Confirmation.webm" type="video/webm" />
  <source src="http://labs.deeson.net/html5-video-email/html5Confirmation.ogv" type="video/ogg" />
  <a href="#"><img src="http://labs.deeson.net/html5-video-email/html5video-fallback.jpg" width="580" height="300" alt="HTML5 Video" title="No video playback capabilities, please click here to view the video in your browser" /></a>
</video>

It should then look like this:

That's all there is to it! The various source tags allow the user agent to go through each one to see if it supports it, finally resting on the linked jpg if all else fails.

A few things to note:

  • When editing source code in web-based editors, sometimes they will mess with your code after you go back to rich-editing mode. I found I had to be pretty careful with MailChimp's editor to get this to work.
  • I strongly recommend that you make the final fallback image look like it is a video player, i.e. overlay video controls on the jpg, like MailChimp do. This will encourage users to click it, and they will then be taken to the browser-based version. Without this prompt, they may not bother at all.
  • I noticed that while the video plays in Apple Mail, if you try to forward it, it strips out the content altogether, including the fallback image. However forwarding from Yahoo Mail, GMail and Hotmail all worked successfully, retaining the fallback image.
  • Miro Video Converter is a really handy program for converting your video to the various file formats you need to cover the major browsers.

Please let me know how you get on with this, especially if you find a way to pull in Youtube or Vimeo-hosted videos, which I have so far failed to achieve.

Comments

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Hi Nuno,

Gmail and many of the other web-based service providers currently still strip out the video tags, even when it is HTML5 video (I would like to think that may change in the future, but that is as yet unclear).

Also the doctypes of their webmail pages are not all HTML5 yet, so that can affect whether or not the browser will display the video, even if the code is not stripped out by the server.

The reason this method is superior to Flash video is that the fall back image is always displayed if the video is not, whereas with Flash, nothing is displayed at all.

The content degradation with HTML5 video is much more graceful, just don't forget the fallback image, and ensure it links to the Youtube / Vimeo / etc hosted version of the video so everyone can enjoy it!

@graemeblackwood

Nuno
Nuno

Hi, this is great and it works in Apple Mail, but doesn't works on Gmail. Why?

Add new comment