HTML5 video in email: An update on client support for 2011

Last week, there was a whole lotta shakin’ in regards to Hotmail introducing partial support for HTML5 video in email. While the results weren’t promising, it soon became pretty clear Hotmail wasn’t the only client that had undergone changes since we published our popular ‘Video in email’ feature in 2009. So, I figured it was high time that we refreshed our results and provided some recommendations for good measure.

Video and HTML5: One step forward, three formats back

While a lot of the fundamentals covered in our earlier post on HTML5 video in email have remained the same, the rise of multiple containers (or loosely, file formats like .mp4 or .wmv) and codecs has made embedding video a hairier task than ever on the web. However, as Hotmail is the only webmail client showing any promise in regards to video playback, you could probably get away with using mp4 only for the benefit of iOS devices.

If you do want to try your luck with Hotmail, ‘Dive into HTML5’ recommends that you link to 3 video files/containers from within HTML5’s <video> tags for maximum compatibility across multiple platforms. These containers are:

  • MP4 (H.264 baseline video and AAC “low complexity” audio) - for Android, Chrome and iOS
  • Ogg (Theora video and Vorbis audio) - for Chrome and Firefox
  • WebM (VP8 + Vorbis) - For Chrome and Opera

Note that Safari will play any format that Quicktime supports, being all of the above. The dubiously good news is that as Flash and <object> tags still aren’t supported in email clients, they’re not a concern to us here.

So, if you’ve got the 3 versions of the same video ready, then you can embed them into an HTML email using the following code, courtesy of the ‘Video for Everybody Generator’. Note the inclusion of a fallback image, which displays if HTML5 is not supported:

<video width="600" poster="fallbackimage.png" controls autoplay>
   <
source src="http://mydomain.com/video.mp4" type="video/mp4" />
   <
source src="http://mydomain.com/video.webm" type="video/webm" />
   <
source src="http://mydomain.com/video.ogv" type="video/ogg" />

   <!-- 
Fallback if HTML5 video is not supported -->
   <
a href="http://mydomain.com"><img border="0" src="fallbackimage.png" label="Fallback Image" width="600"></a>
</
video

Now, I’m certain this looks like a highly pedantic approach to getting video to play in email. But it will ensure playback in Apple Mail and iOS devices (which are well on the rise) and potentially in Hotmail, if our early attempts are anything to go by. Again, you can choose to only use mp4 for video display in Apple Mail/iOS only.

Current email client support for HTML5 video

As before, video plays beautifully on iOS devices and in Apple Mail, which is excellent news. While on the topic of mobile clients, we were successful in getting the fallback image to display in most, except the default email client on Android phones. Strangely enough, the video controls display, but the video never loads. This is a pretty bad outcome in an otherwise solid mobile email client - we’re still looking into whether trickiness with codecs could be at fault here.

Webmail clients also displayed the clickable fallback image in place of the playable video, which is an advantage that embedding video using HTML5 has over previous methods. The notable exception is of course, Hotmail - which despite the lack of video controls, does play HTML5 video in some instances when prompted, or the autoplay attribute is used.

Finally, all the desktop clients we tested either played the video, or displayed a clickable fallback image in its place. So without further hesitation, lets get to the results:

Desktop email clients Result
Apple Mail Yes  Video plays
Lotus Notes 6, 7 and 8.5 No  Fallback content displayed
Outlook 2003, 2007, 2010 No  Fallback content displayed
Outlook for Mac 2011 Yes  Video plays
Windows Live Mail 2011 No  Fallback content displayed
Web-based email clients Result
AOL Web No  Fallback content displayed
Gmail No  Fallback content displayed
Hotmail Yes  Video plays when prompted - see details
Yahoo! Mail Beta No  Fallback content displayed
Mobile email clients Result
Android (default) Not  Controls display, but video does not play*
Android (Gmail) No  Fallback content displayed
Blackberry No  Fallback content displayed
iPhone Yes  Video plays
Windows Mobile 7 No  Fallback content displayed

* This could be an video encoding issue on our part - if you have better luck with Android video playback, please let us know.

HTML5 video in action

Using the updated code, I ran a test email through a variety of popular email clients. Note that I couldn’t get the video to resize using a mobile stylesheet, so this layout may look a little wonky on mobile devices.

To see HTML5 video in action on the iPhone and in Windows Outlook, please refer to our previous blog post, as the behaviors in these clients have not changed. On the Hotmail front, here’s an example courtesy of Andy T’s ‘Get in the Inbox’ blog:

As for fallback images, these displayed in a consistent manner across the majority of email clients that don’t support HTML5 email, which make them perfect for featuring a ‘View video’ -style call to action, a play button, or something similar to prompt the recipient to view the video it’s linked to.

Finally, we were confident enough in this technique that we recently used it to announce the arrival of our updated template editor - take a look at the video email.

Using Hotmail and Gmail previews to view YouTube clips

Now, I promised that I’d mention another technique for embedding video - or at least getting it to display in Hotmail and Gmail. By uploading the video first to YouTube, then adding the URL to your HTML or plain-text email as text, you can get an inbox-playable preview to display. Here’s an example of this in Gmail:

YouTube video in Gmail

The downside of this is that adding URLs as text can trip off phishing warnings in some email clients, so this should be applied with care. That said, we didn’t have any deliverability issues getting our test emails into Hotmail and Gmail inboxes, so this may be a handy technique if sending primarily to these clients.

You can read more about this technique in our earlier blog post on ‘Using YouTube Previews to display video in Gmail’. The same technique works in Hotmail, with very similar results.

Should I be using any of these techniques?

HTML5 remains the best option for embedding video in email. Being able to reliably provide a fallback image is most certainly advantageous in non-Apple email clients - then for Apple users, the option of watching video in the inbox can potentially make for a unique and engaging experience.

Our recommendation remains that you should decide if it’s worthwhile to send video email by referring to your email client reports first. If a high percentage of your subscribers are using Apple devices, then it could be a neat move. Other recipients will see the fallback image, which you can use to prompt click-throughs to a version of your video hosted online.

Hotmail and Gmail video previews have dubious value, unless you’re sending plain-text email (and have to expose your links, anyway). However, I’d be curious to hear if any of you have used it with success.

Regardless of whether or not you believe that email is an appropriate medium for email, I have no doubt that at some point, your clients will ask about whether it can be done. Keeping in mind that you’re not actually sending the video file (it only streams in supported email clients), it could prove to be a solid way to bring a demo video or pitch that one step closer to subscribers - if done tastefully, of course. If you’ve had success with this approach, or any alternate approaches for that matter, we’d be delighted to hear from you in the comments below.

Posted by Ros Hodgekiss

5 Comments

  • TrafficColeman
    29th July

    I think this is something I need to add to may marketing. You guys really makes it look appealing.

    “Black Seo Guy “Signing Off”

  • Walt Mann
    30th July

    Good post. Regarding Android, you probably need to add hint tracks to your MP4 files. Generally speaking, if the video plays on the iPhone, a “hinted” version will play on Android.

  • Mollie
    5th August

    Excellent Post! Walt’s right.

  • Brian
    28th September

    Thanks for the post.

    Do you need a server that will support video streaming? Like a Red5 server or something similar?

    Brian

  • Ros Hodgekiss
    28th September

    Brian, I don’t think so. At least, not on a relatively small scale, anyway. Our tests were conducted by hosting the videos on our company servers, which to my knowledge, haven’t been configured in any special way for streaming video.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account