HTML 5 and Video in Email

Watching the rapid development of HTML5, we do not pay attention to how HTML develops in emails. Although many subtleties of HTML5 are still under development, Firefox, Safari, Opera and Chrome have already offered support for most of the new technologies.

I had a particular interest in the HTML5 <video> tag . This tag was supposed to solve the problem of native video support, using a single codec, in all browsers, without the need for plug-ins such as Flash. Although the idea of ​​using a universal codec seems utopian, there is a project that suggests using the <video> tag in browsers that support it, and in others, just hide the contents of this tag.

')

Current approaches to using video in email.

This is not the first time that we have to carefully study the issue of video support in email. In our previous studies, we looked for an approach that would allow embedding video into email clients that support the <video> tag , and for those that do not, show interactive images (which would then play the video in the browser).

The results disappointed us. Only Apple Mail supports decent video playback using Flash, and still there was no way to provide an alternate display of content for those without Flash. I believe that this is the main problem. If the video is not displayed, then alternative content should be shown. Since most email clients use the <object> tag to insert video, it was not possible to display alternative content.

There must be some solution to the problem, perhaps HTML5 could solve it. As it turned out, I was half right.

Simple approach using HTML5

Using Kroc Camen's Video for All as a starting point, I quickly realized that the solution for the browser problem should be different than for email clients.

The Kroc technique was a multi-level support. Thus, if HTML5 <video> is not available, you can use a return to QuickTime or Flash and almost always the video will be guaranteed to work. Since we know that Flash and QuickTime were blocked everywhere in email, I dropped this simple solution.

Because of the format war I mentioned earlier, you have to share your videos, like H.264 (for Apple and Google support) and Ogg Theora (for Mozilla and Opera support). Email is a little different. The only popular email client using Gecko (Firefox engine) is Thunderbird, which currently does not support HTML5 video display. Thus, neither Flash / Quicktime, nor Ogg Theora is suitable for us. If most of your recipients would choose the web version of emails, then you might consider adding video to recipients using Firefox.

Final code

After removing all the video parameters, 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 an alternative as an image (which is conveniently downloaded as a preview for a movie, before viewing email for clients that support video) in the <video> tag along with the width and height of the video. Together with the <video> tag, you connect the encoded video using H.264 using the <source> tag , remembering that you must put a link to an existing file on your server.

Finally, we add alternative content that will need to be displayed in any email client that does not support the HTML5 <video> tag . These are, as a rule, interactive screenshots of the video, when clicked, the video will play in the browser.

results

Working on a Mac, my first stop was at Apple Mail. The video was displayed perfectly. Next is my iPhone, which remarkably lost the video using the built-in email client.

Then I turned to popular web-based email clients - Yahoo !, Gmail and Hotmail. Unfortunately, it turned out that web clients turn off HTML5 video playback. Although it was a disappointment, not everything was so bad. In place of the video, I was able to display alternative content. In this case, it was a clickable image from which I could put a link to the video on my site. This has never happened before, so it was a great success.

I began to check further, and received the same results on desktop e-mail clients of the PC. The video does not play, but alternative content appears in all clients that I tested. Here are the full results of my testing.

See it in action.

To make you understand what HTML5 video looks like in various popular e-mail clients, here are some screenshots.

Apple Mail 4

When I opened the letter in Apple Mail, an alternate image, which I indicated in the attributes, was shown at the time the movie started streaming. After a few seconds, the video controls appeared, and I could see the progress bar and start watching it.

iPhone 3.1.2

The iPhone does not support streaming video in a browser or email client; instead, you click on a link with a preview of the image and you can watch the video promptly. When you click on the image they are loaded into QuickTime Player's iPhone. After watching the video you are moved back to viewing the letter.

Outlook 2007

Like all email clients that do not support HTML5 video, Outlook 2007 displays alternative content that we specify as part of video tags. This can be any HTML you like, and is not limited to just one image. In most cases, it will probably be a screenshot from the film and, possibly, an icon for playback to encourage the recipient to click on the image and watch the video in your browser.



The result was the same for all email clients that did not support HTML5 video, which makes this method convenient for all recipients (We do not know which email client the recipient has, but we don’t need it, the letter will look the same everywhere).

Should we use this method?

First of all, I think this approach is the best option for video, including email. The fact that you can make alternative content that works in every email client is a big plus. This does not give any other way, as far as I know. A possible limitation is that now it works only for recipients using Apple products. (Video is played directly. Only in Apple clients).

Deciding on the suitability of this approach comes down to analyzing the list of recipients of your mail. For example, 50% of our clients who read our newsletter every month use one of Apple's email clients. If we wanted to include the video in the letter, using this approach would mean that half of our subscribers will be able to watch the video directly in the mail client, and the other half will see the preview image by clicking on which they can watch the video in their browser.

Whether it is necessary to send video by mail, this is of course another question, but we will solve it in future posts. I did not get the opportunity to test this technique in every email client, and I will be glad to see the results in the Palm Pre (just because, like the iPhone, it also uses Webkit). I will also be glad to hear everyone’s opinion about the method considered here, of course, if you think it is useful.