HTML5 and video in email

We’ve revisited our results: For the latest on video support in email, view our blog post.

As momentum quickly builds behind HTML5, the new version of HTML and XHTML, we’ve had a close eye on what impact this might have on HTML email in the years to come. While the finer details of HTML5 are still being finalised, Firefox, Safari, Chrome and Opera have offered support for much of the new technology for some time.

One particular area of interest to me was the HTML5 <video> tag. The aim of this tag was to provide native video support using a single codec across all browsers without the need for third party plugins like Flash. While the dream of a universal codec appears unlikely, one clever project has surfaced that uses the <video> tag for browsers that support it and falls back on traditional video options for those that don’t.

Current approaches to video in email

This isn’t the first time we’ve had a close look at support for video in email. In our previous research we were looking for an approach that would allow video in email clients that support it and a clickable fallback image for those that didn’t (that would then play the video in the browser).

The results were disappointing. Only Apple Mail supported decent video playback via Flash, and there was no consistent way to provide fallback content for those clients that don’t support Flash. To me, this is the crux of the problem. If video doesn’t work, you better have a backup plan that works well for everyone else. Because most email clients strip the <object> tag used to insert video, a backup plan wasn’t available.

There had to be a better way, and maybe HTML5 was the answer. Turns out I was half right.

A simple approach using HTML5

Using Kroc Camen’s very cool Video for Everybody as a starting point, I quickly saw that the approach for the browser would be very different than for email clients.

Kroc’s technique provided multiple layers of support (seen here). So, if HTML5 <video> isn’t available, you can fallback to QuickTime or Flash and almost always guarantee the video will work. Because we know that Flash and QuickTime are universally blocked in email, I stripped these backup options to keep it simple.

Due to the codec battle I mentioned earlier, you need to provide your video in both H.264 (supported by Apple and Google) and Ogg Theora (supported by Mozilla and Opera). This isn’t the case with email. The only popular email client that uses Gecko (the Firefox rendering engine) is Thunderbird, which currently chooses not to display HTML5 video. So, just like the Flash/Quicktime fallback, Ogg Theora is also out. If a big number of your recipients were clicking on the web version of your emails then you could consider adding it back in for any subscribers using Firefox.

The final code

After cutting out all the video options made redundant by email, here’s the final code that gave the best results.

<video width="640" height="360" poster="fallback.jpg" controls="controls">
        <source src="http://mysite.com/videoname.mp4" type="video/mp4" />
        <a href="http://mysite.com/"><img src="fallback.jpg" width="640" height="360" /></a>
</video>

As you can see, you provide a fallback image (which is conveniently loaded as the poster for the movie before playing for email clients that support video) in the <video> tag along with the width and height of the video. Within the <video> tag you call the H.264 encoded video using the <source> tag, remembering to fully reference the file on your server.

Finally, add the backup content you’d like to be displayed in any email client that doesn’t support HTML5 inside the <video> tags. This would normally be a clickable screenshot of the video that would play the video in the browser when clicked.

The results

Working on a Mac, my first stop was Apple Mail. The video rendered perfectly. Next stop, my iPhone. Holy crap! Video played beautifully on the iPhone email client too.

I then turned to the popular web-based email clients - Yahoo!, Gmail and Hotmail. Unfortunately, it looks like web-based email clients are choosing to disable HTML5 video from playing. While this was disappointing, the news isn’t all bad. In place of the video I was able to display the provided backup content. In this case, a clickable fallback image where I could link to the video on my web site. This facility was never available with any of the previous attempts at true video in email and was a welcomed improvement.

As I continued to test, the same results were experienced on desktop email clients on the PC. The video didn’t play, but the fallback option appeared in every single client I tested. here are the full results.

Desktop email clients Result
Apple Mail Yes  Video plays
Entourage 2008 Yes  Video plays
Lotus Notes 6, 7 and 8.5 No  Fallback content displayed
Outlook 2007 No  Fallback content displayed
Outlook 2003 No  Fallback content displayed
Thunderbird No  Fallback content displayed
Windows Mail No  Fallback content displayed
Web-based email clients Result
AOL Web No  Fallback content displayed
Gmail No  Fallback content displayed
Hotmail No  Fallback content displayed
MobileMe Yes  Video plays
MySpace No  Fallback content displayed
Mobile email clients Result
iPhone Yes  Video plays

See it in action

To give you a feel for how HTML5 video renders in a few of the popular email clients, here are some screenshots from my testing. You can checkout the test page I used here.

Apple Mail 4

When I opened the email in Apple Mail, the fallback image I specified in the poster attribute was displayed while the movie started streaming in. After a few seconds the video controls appeared and I could see the progress of the movie loading and start to watch it.

HTML5 Video in Apple Mail

iPhone 3.1.2

The iPhone doesn’t support video streaming in the browser or email client and instead provides a clear prompt that clicking the poster image will let you watch the movie. Clicking the image then loads the movie in the iPhone’s QuickTime player. At the conclusion of the movie you’re taken back to the email.

HTML5 Video on the iPhone

Outlook 2007

Like all email clients that don’t support HTML5 video, Outlook 2007 displays the fallback content we specify within the video tag. This can be any HTML you like and isn’t limited to a single image. In most cases, this would likely be a screenshot from the movie and perhaps a play icon overlaid to entice the recipient to click the image and view the video in their browser.

Outlook 2007 showing the fallback content

The result was the same for all email clients that didn’t support HTML5 video, making this a handy way to provide a consistent experience for every recipient.

Should you use this technique?

First off, I think this approach is the best option available for including video in email. The fact that you can reliably provide fallback content that works in every email client out there is a huge positive that no other technique I’m aware of offers. The obvious limitation is that right now it only works for your subscribers using Apple related products.

Making a decision on the suitability of this approach really comes down to your subscriber list. For example, 50% of our own customer list open our monthly newsletter using one of the supported Apple email clients (you can find this out for your own list using our handy email client reports). If we wanted to include video in an email, this technique would mean that half our subscribers can watch the video right in their email client, and the other half will see a perfectly acceptable fallback image they can click to watch it in their browser.

Whether you should be sending video in email at all is another question entirely, and perhaps something we’ll tackle in a later post. I didn’t get a chance to test this technique in every email client, and I’d love to see the results in Palm Pre if anyone has one handy (purely because like the iPhone it also uses Webkit to render HTML emails). You can grab a copy of the test email here. I’d also love to hear everyone’s thoughts on this approach and if you think it’s a useful technique.

Posted by David Greiner

44 Comments

  • Wayde Christie
    14th October

    Apple rules. Nuff said.

  • Wayde Christie
    14th October

    Except, nice work Dave! :D

  • Dave Calleja
    14th October

    Fantastic to see HTML5 pushing forward and starting to help us out in the HTML mail department.

    @Wayde - Shame they cant seem to support that little known flash format on iphones though….

  • Rich
    14th October

    Excellent article.

    It will be interesting to see how this is utilised in the near future. I like the idea of video email for mobile (iPhone) users, it might be easier to watch a short clip than read a long email on a bus or train for example.

  • nomar
    14th October

    why dont i see the video or fallback image in my web browser? how can i test this on my own?

  • David Greiner
    14th October

    @nomar, you can send yourself a test by emailing this page. Depending on the browser you’re using, you should either see the movie or the fallback image as per the screenshots above. Are you seeing something different?

  • Ben Ward
    14th October

    Something that comes to mind with regard to the webmail clients stripping video tags is not that they’re explicitly stripping HTML5 video because it’s video, just that they will be working from a whitelist of known HTML4 tags and won’t have updated for 5 yet. I don’t think it’s infeasible that they will decide to strip video (just as some strip Flash), but it could worth lobbying providers to whitelist audio and video tags now, before they default to excluding them later.

  • David Greiner
    14th October

    That’s a very good point Ben, and is something we’ve also been discussing internally. Definitely something for us to consider with the Email Standards Group as we continue talking to ISP’s.

    We’ll be looking at additional support for CSS3 in future reports, and will likely take the combined findings to each provider in an effort to see as much as possible supported.

  • Lisa
    14th October

    This is a great post, really interesting, nice work :)

  • Koen Mertens
    14th October

    @David Greiner, like @nomar I too see something different when I open the example. A grey background with a cross: http://screencast.com/t/Qvsgdd9OnJG6

    I think it has something to do with the video not being playable on my computer because when I browse directly to the mp4 I get some jibberish code: http://screencast.com/t/QeCVDZCJ

    OS: Windows 7
    Browser: Firefox 3.5.3

  • David Greiner
    14th October

    @Koen Because I chose to remove the Ogg Theora source from the code, the video won’t play in Firefox 3.5+. I did this because no current email clients support his format, but hopefully it’s something Thunderbird will handle soon.

    The mp4 version will only work if you open the movie in either Safari or Chrome.

  • nomar
    15th October

    i copied the example code and put it into a mailing. on entourage 2008 i just the see image twice underneath each other and on the iPhone and an gmail tranfered mail i see the video with a strikedout play button and the fallback image underneath it ?!

  • David Greiner
    15th October

    @nomar, feel free to provide an email address and I’ll send you a version from Campaign Monitor to confirm. I’ve just triple checked my results again in both those clients and see the video perfectly.

  • nomar
    15th October

    @david: i dont like to post a email address in public :(

    maybe the email marketing tool we use does manipulate the video tag code ?!

  • David Greiner
    15th October

    @nomar No problem, feel free to email davidg at freshview.com and I’ll fire a copy back if you’re still interested in seeing the results.

  • Pamela
    15th October

    Great Information, now time to test it

  • Christopher Blizzard
    15th October

    Hey!  Neat post.  Actually google also supports Ogg Theora in Chrome.  It’s the widest-supported codec right now in terms of market share.

  • Anna Yeaman
    15th October

    Hey that’s great Dave! I’m going to have a play with this myself :)  As its true video in email the img is large and good quality (2 of the main drawbacks with Video Gifs) and then there’s sound…

    Video Gifs do play in more clients though and you always see the first frame…so I’d still use them. If you have a high % of Apple subscribers though, I’d prefer this method.

    I’m not a fan of sound in email, but I’ve had tons inquiries after the whole video gif thing…I’d love to see a test of sound support in email clients with an outline of different methods like the bgsound tag…

    - Anna

  • Andrew Osterday
    15th October

    Great post! I did some research several years ago on this subject and found some similar success using the <dyn src> tag. Results varied depending on video file type (avi vs. mpg vs flv), but were disappointing overall.

    Thereis a company called VisMail that uses cid: to reference an attached video, rather than calling to a server. This requires a highly compressed video to keep attachment file size low, but it completely bypasses any restrictions that come along with email clients.

  • lemuel
    15th October

    well, thats good if it work to most widely used desktop email clients…
    and of course most likely to web-base email clients.

  • David Greiner
    15th October

    Thanks for all the great comments guys.

    @Christopher Blizzard Ogg Theora is the widest-supported codec in the browser, but it actually has now market share in email clients. H.264 however is supported by all modern Mac email clients, which is why it was the only format I used.

    @Anna Yeaman That’s a good point, and I agree they both have their place depending on the message, audience, etc. In regards to sound, I imagine the results would likely be almost identical using the HTML5 <audio> tag.

    @Andrew Osterday I’ve checked out that approach before too, but in modern email clients only had minimal success. The problem with that approach is that you still need to use the <object> tag to play these formats in most modern email clients, and they all still block it by default. Another benefit of this approach is that you can provide reliable fallback content, which the cid approach doesn’t.

  • Naca-Yoda
    15th October

    So the best of both worlds would be use use an animated GIF as your fallback image (though not too large). That way, everyone except Outlook 2007 users (pretty much) will get a moving image of some kind. Cool.

    I look forward to the day when Windows machines support H.264 by default. :(

  • Justin Reid
    15th October

    Try viewing the email on MobileMe using firefox. That is the only place where a FF rendering engine gets a shot at rendering the video tag and it fails without an ogg alternative.

    I really dislike FF’s implementation of this. Why doesn’t it fall back to the fallback code instead of displaying the big X and giving the user no options?

  • Justin Reid
    15th October

    I’ve tested a single h.264 source on Safari on Windows without QT installed and it falls back to the proper fallback code. If you install QT, it then loads the h.264 video fine. A perfect implementation.

  • David Greiner
    15th October

    Nice additional testing Justin, it definitely seems the Safari fall back approach is the smarter way to handle it. Looking at the spec, that’s what Firefox should be doing too…

    Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

  • Justin Reid
    15th October

    I tried a single .ogv source on Safari 4 Mac and it falls back to the poster frame and not the fallback content.

    This isn’t ideal but it is infinitely better than a huge gray X.

  • Justin Reid
    15th October

    So it seems to properly deploy this, you have to have a h.264 version as well as an Ogg version. Otherwise Firefox users who are on MobileMe won’t see any content.

    Also worth noting, QuickTime reference files seem to work great. So a single video source pointing to your QT reference file will let you deploy multiple versions for Desktop/iPhone/iPhone cellular, then you supply an ogg version for the FF users. Everyone else gets your fallback content.

  • Ray
    15th October

    Great article. Video in Email isn’t too far off. EyeMail has managed to get video to play in the Outlook platform, while other email platforms get the graphic click-thru display.

  • Kroc Camen
    15th October

    Ahoy. Thanks for the link. I wonder if this hole will be plugged by the app vendors; HTML5 video / audio were probably overlooked because simply nothing has ever come close to displacing Object for aeons and the e-mail vendors have been sitting around not doing much, or making things worse as is the case with Outlook 2010.

    HTML5 video / audio however does allow for a secure way to media into e-mails as bug-fixes do not depend upon a third party, and the client can veto any content, where as no browser or e-mail client can manipulate what goes on inside Flash.

    I think you should also be aware of the licencing issue of H.264 which could blow up in everybody’s face come 2011. You need to include OGG to support Firefox users of webmail programs that do allow Video et Audio, and that Chrome will play the OGG if listed first. OGG right now needs adoption to prepare for the licencing fallout with H.264.

    After all, do you want people coming after you (with legal backing) for money for each and every visitor who views any H.264 video you use? That thought alone should scare you off of favouring it over OGG. H.264 is a stop-gap, that is all.

  • David Greiner
    16th October

    Kroc, thanks for stopping by. it will definitely be interesting to see how quickly email vendors address this, and if they do at all. Let’s hope the security benefits you discussed ensure there’s no decent reason why they wouldn’t.

    That’s a great point about Ogg support too, I’ll look at amending the post tomorrow to make a special mention of the importance of using Ogg for any MobileMe users using Chrome or Firefox, and more importantly to reiterate the licensing issues associated with H.264.

    Given the current email client market and the strong presence of Webkit, it still means that H.264 is by far the most effective format for video support.

  • Kaleb Web
    16th October

    Very nice post !

  • Justin Reid
    16th October

    @David I agree that h.264 is the best format at the moment.

    One thing I think it seriously flawed with the <video> tag is the fact that if an HTML 5 browser doesn’t find a codec it can play, it DOESN’T fall back to the fallback code, it just displays the poster (Safari) or throws up a gray X (Firefox).

    In my opinion, that fallback code should be used anytime the browser can’t find a codec it likes, or if it doesn’t support the <video> tag.

    Otherwise, we’ll have to continually be adding new video sources for each browser that starts supporting HTML 5 <video> and doesn’t support ogg or h264. Lets say IE starts supporting <video> but they only have native support for wmv. (I think this is likely). You’d then have to add a wmv source to your video tags or IE wouldn’t fallback to the fallback code. This is INSANE. What is that fallback code for anyway? Just old browsers? That seems very flawed to me.

  • Justin Reid
    16th October

    Here is a perfect example of what I’m talking about:

    Someone has put together a video site that uses <video> to display ogg files, falling back to a Java applet to play the file for browsers that don’t support <video>

    http://tinyvid.tv/show/1o7h2s3pydoqa

    If you view that site in FF, it works great. IE, works great. IE doesn’t support <video> so it falls back nicely to the Java applet.

    However, view it in Safari 4. You get stuck at a “Loading” message because Safari doesn’t like ogg and there isn’t a poster frame. You don’t get the fallback Java applet.

  • Rex Chung
    20th October

    Great post. Hope the number of fallback displayed will be much less in the near future.
    This should be a permanent page with constant updates.

  • Greg
    30th October

    Nice ... but is it really good that Apple plays it? Or is there a good reason why embedding media has been purposely disabled in email?

    Similar to why forms are disabled.

  • Vincent Video
    30th October

    Nice if more of the email client can play the video,

    For now, it seems like most will experience the fallback.

  • Steven Nickel
    30th October

    I cant get the video to display properly either.

    Can you send me the email David Greiner?

    steven (at) victoriaextra.com

    Thanks,

    Steven

  • Luca
    30th October

    Impressive HTML5!!!

  • Ros Hodgekiss
    30th October

    @Greg As always, this technique should be used for good, not evil. There have been reasons including privacy concerns as to why embedded media has been disabled in the past, but in this case, I think it comes down to personal preference. Time will tell if other email clients choose to support video using HTML5.

    @Rex We’ll look towards updating our ‘Video in Email’ resource (http://www.campaignmonitor.com/videoinemail/), great call!

  • David W
    30th October

    Thanks for this extremely helpful tip!

  • Craig Chant
    3rd November

    Am I missing something here? 99% of email clients won’t show the video, instead they will show the fallback image / content.

    And then you click the image to open the video in your browser.

    Why not just have a hyperlink pointing to the video in the first place, not only that , because it is an external hyperlink it will get tracked in the reports.

    This seems like you’re trying to be clever and actually not acheiving much.

    Please correct me if i’m missing something.

    Also if you have 100’s of megabytes of video, do you really want it auto playing in peoples emails?

    I’d instantly block any one who sent me an email that auto played anything be it music or video, the same way I leave websites that do the same thing on page load and I never return!

  • Ros Hodgekiss
    3rd November

    Hi Craig, thank you for your response. Although HTML5 support is limited to Apple clients for now, this may change in the future. Also, as Dave mentioned in the article, the percentage of subscribers you have using Apple clients may be particularly high, so it’s worth knowing about this technique.

    Again, there are good and not-so-good ways to go about using video in email - of course, 100’s of Mb of video would be counter-intuitive, but I can imagine that embedding small, useful videos could be very well received. Some of our customers have found that animated GIFs have upped the click-through rates on their campaigns; video may be just as beneficial.

    As always, we are open to your thoughts on this. We’ll certainly follow up on this topic when we start seeing campaigns with embedded video, from both a technical and a user experience perspective.

  • Oriol Torrent Florensa
    12th November

    I sent me the test page and I found a strange behavior when checking it in MobileMe with Safari 4.0.3 on Macosx 10.6.1.
    I leave you the link below to show it. It’s actually a gif file, so let it load first, it takes some seconds the first time. Then it’s framerate is quite aprox to what hapens in realtime: every 2 seconds the black square changes, like a slideshow.
    http://dl.dropbox.com/u/2244324/video_email_html5_1.gif

  • Tijn
    15th December

    “Whether you should be sending video in email at all is another question entirely”

    Note that you aren’t really sending a video file, so I can’t see any reasons you’d be against something like this. An e-mail can be a webpage, it supports HTML/CSS (in a way), it can show images, and video’s. Why not making use of it then?

    Say a website I use very often sends me an email explaining me their site has been updated, and that it includes 10 new features. They’ve also included an instuctional video. Would I be happier if that video was 1 click further away?

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

Create an account