email-bugs
email-bugs copied to clipboard
hteumeuleu
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.
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.
It's worth noting that Chrome/Edge's user-agent stylesheet applies display: none to audio with no controls:
audio:not([controls]) {
display: none !important;
}
So based on what browser the user views the email on, they may not see the audio element (and wouldn't be able to right-click and select play from the context menu).
