HTML5 video in email on Windows Phone 7.5/7.8/8.0/8.1

Has anyone had any success with HTML5 video in Windows Phone?

I was recently testing out HTML5 in email and found Windows Phone keeps just displaying "Aborted" with a blank video player. It happens as soon as the email is opened.

http://i60.tinypic.com/2w32mg2.jpg

The code:

 <video width="273" height="154" controls>
       <source src="/path/to/external/video.mp4" type="video/mp4">
       <source src="/path/to/external/video.ogv" type="video/ogg">
       <a href="" target="_blank"><img src="/path/to/fallback-image.jpg" alt="Fallback" style="display:block;" width="273" height="154" border="0" /></a>
</video>

- The video files are externally hosted
- The appropriate MIME types are set on the server hosting the content
- The filesize of the .mp4 is 716kb
- The filesize of the .ogv is 530kb (Not that IE would use it)
- The .mp4 is encoded with H.264
- The .mp4 plays on iOS no problem

I'm thinking it may be the codec used, but other than that I have no idea. Any ideas?

roshodgekiss roshodgekiss, 2 years ago

Hi jmwhite, this is really curious! I'd love to get my hands on a Windows Phone and test this out. In the interim, would love to hear if anyone has had any experiences with getting video to play - I suspect it's a codec thing too, but I won't claim to be a video expert here ;)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jmwhite, 2 years ago

I figured codec, but as its standard H.264 I was puzzled. What's strange is this video will play in IE11 Mobile (the actual mobile browser) if viewed as a web page, so this confirms that the video is playable, indicating the video codec is not the cause.

The native email client on Windows Phone being tied to the version of IE Mobile, in theory means HTML5 video should work.

More investigation is required. I'll think I'll do some more testing to see if I can get successful playback within the email client.

jmwhite, 2 years ago

I've decided it might be best to get Microsoft intervention on this one!

I've created an Microsoft Answers thread in hopes of escalating this to the Windows Phone dev team.

wilbertheinen wilbertheinen, 2 years ago

I'm missing the .webm format in your example:

<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />

http://v4e.thewikies.com/

Did you also use the IE-edge metatag you've discovered?


Create a Clang!
zerocents zerocents, 2 years ago

This might be due to scripts and activex filtering in IE. Open a local html file with video in IE and you will see the same error with a prompt to enable scripts.

There's a way to get around it in IE, but I'm not sure it will work for email. Add this line of code to the top of your html, before or after the doctype:

<!-- saved from url=(0014)about:internet -->

I can't test this properly right now, as mail chimp strips the video source tags and outlook.com strips the html comment before sending.

If it doesn't work, you're probably out of luck as the WP8 mail client stubbornly refuses to load anything external such as fonts, stylesheets, even data URIs. You could instead show a fallback using an IE specific media query.


Michael Muscat
jmwhite, 2 years ago
wilbertheinen :

I'm missing the .webm format in your example:

<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />

http://v4e.thewikies.com/

Did you also use the IE-edge metatag you've discovered?

In the case of IE, MP4 with H.264 is the only format it will play reliability. OGV and WEBM aren't supported by IE.

Yes IE Edge meta tag is present, it has to be there to prevent Quirks Mode anyway, otherwise HTML5 support would be impossible.

jmwhite, 2 years ago
zerocents :

This might be due to scripts and activex filtering in IE. Open a local html file with video in IE and you will see the same error with a prompt to enable scripts.

There's a way to get around it in IE, but I'm not sure it will work for email. Add this line of code to the top of your html, before or after the doctype:

<!-- saved from url=(0014)about:internet -->

I can't test this properly right now, as mail chimp strips the video source tags and outlook.com strips the html comment before sending.

If it doesn't work, you're probably out of luck as the WP8 mail client stubbornly refuses to load anything external such as fonts, stylesheets, even data URIs. You could instead show a fallback using an IE specific media query.

I was thinking its likely a block measure as the video doesn't even attempt to load. I will test out the comment line you've suggested and get back to you! Fortunately we use a different ESP that won't remove the code.

Yes the fallback is a must as unfortunately despite IE not loading the video, it will still render a HTML5 video player but never allow the user to play it. A similar situation occurs with Android devices, which is bad news. So some clever media queries need to be crafted to essentially toggle the fallback, as the fallback within the HTML5 video code itself, won't be enough in some cases when a unplayable video control is rendered.

Update:

Unfortunately, the "Mark of the Web" doesn't have any affect on this one

- http://msdn.microsoft.com/en-us/library/ms537628.aspx

I'll provide a full screenshot of a emulated Windows Phone 8.1 device (Hyper-V) to show further behaviour clues.

http://i59.tinypic.com/10xsgpc.jpg

It pretty much looks like that a security block on external resources is at play, as you've rightly noted in your previous post zerocents, while there isn't any image content in this test email at all, you'll notice the block message, it says image content but I reckon that's also including the video content.

I tried a couple of varients of the Mark of the web code and nothing worked. I believe you can't leverage the security settings in IE Mobile, or this simply doesn't apply to IE Mobile and its different reason as to why its blocked.

jmwhite, 2 years ago

Came across this earlier:

http://msdn.microsoft.com/en-gb/library/ff462082.aspx

Note the "Unsupported features in Internet Explorer for Windows Phone OS 8.0" section.

Inline HTML5 is listed as not supported.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098