Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hteumeuleu opened this issue May 17, 2021 · 1 comment
Open

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

hteumeuleu opened this issue May 17, 2021 · 1 comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@hteumeuleu
Copy link
Owner

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.)

A screenshot of audio and video in the Outlook app on Android

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 hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label May 17, 2021
@husseinalhammad
Copy link

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hteumeuleu @husseinalhammad