Outlook.com supports <video> and <audio> but media won't play

A recent update seems to have added support for the <video> and <audio> elements in Outlook.com (and the iOS and Android apps as well). But there are two things that prevent media to play correctly.

1. Content Security Policy

Outlook.com has a strict Content Security Policy header set to the following:

content-security-policy: default-src  *.res.office.com *.res.office365.com *.cdn.office.net  owassets.azureedge.net swx.cdn.skype.com  officefluidprodversionedcdn.azureedge.net  officefluidprodverizoncdn.azureedge.net 'self'; script-src  'nonce-JPCGqDJFERnRJynitxkIMw==' *.res.office.com *.res.office365.com  *.office.net owassets.azureedge.net wss://*.delve.office.com:443  shellprod.msocdn.com amcdn.msauth.net amcdn.msftauth.net *.bing.com  *.skype.com *.skypeassets.com *.delve.office.com *.cdn.office.net  static.teams.microsoft.com fabricis…elve.office.com fs.microsoft.com  officefluidprodprvversionedcdn.azureedge.net 'self'; media-src blob:  *.res.office.com *.res.office365.com *.cdn.office.net  owassets.azureedge.net *.skype.com *.office.net *.office365.net  *.office365-net.de *.office365-net.us *.outlook.live.net *.office.com  ssl.gstatic.com 'self' *.adnxs.com; frame-src * data: mailto:;  manifest-src 'self'; worker-src 'self'; prefetch-src ; child-src ;  report-uri https://csp.microsoft.com/report/OutlookWeb-Mail-PROD; upgrade-insecure-requests;

What interests us here is the media-src part. This states that any media (audio or video) can only play in Outlook.com if it comes from one of the following domain or subdomain:

*.res.office.com
*.res.office365.com
*.cdn.office.net
owassets.azureedge.net
*.skype.com
*.office.net
*.office365.net
*.office365-net.de
*.office365-net.us
*.outlook.live.net
*.office.com
ssl.gstatic.com
*.adnxs.com

I'm not sure it's possible for any third party user (like you and me) to have any media file hosted on any of those URLs. I was able to find an audio file hosted on skype.com to prove it works (https://swc.cdn.skype.com/assets/sounds/Skype_Call_Dialing.m4a). But this brings me to the second point.

2. Controls

Outlook.com removes the controls attribute (as well as autoplay and any media specific attribute). So in order to launch an audio or video, you need to right click on the visible element and hit "Play" from the contextual menu of your browser. Which is… not ideal for marketing emails.

Here’s a full test email code:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Can I email</title>
</head>
<body>
    <h1>Audio</h1>
    <audio loop="loop" controls="controls" style="display:block; width:320px; height:48px; background:green;" src="https://swc.cdn.skype.com/assets/sounds/Skype_Call_Dialing.m4a">
        Fallback content.
    </audio>
    <h1>Video</h1>
    <video style="width:100%;height:auto; background:green;" poster="https://i.imgur.com/j0fUWGp.jpg" autoplay="" -webkit-playsinline="" playsinline="" muted="" controls="">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
        <img src="https://i.imgur.com/3ddxcWL.jpg" alt="Fallback image" style="width:100%; display:block;" width="640">
    </video>
</body>
</html>

In Outlook.com, you'll get two green zones corresponding to the size of the <audio> and <video> element. But no fallback will show.

In the Outlook app on Android, you'll get a giant play button. (But taping on it won't do anything.)

Conclusion

I'm not sure what's the intent from the Outlook team here. But I feel like I'd rather have it not support any <video> or <audio> element like it used to (thus falling back to the native HTML fallback inside each element). Here it requires yet another hack for any emails that include video specific for Outlook.com (and the mobile apps) to hide the interactive elements and show another fallback instead.

hteumeuleu / email-bugs