iosmicrosoft-teamsautoplay

Video not playing in a Microsoft Teams app on iOS

My company is currently working on a Microsoft Teams app that must start playing video inline automatically when the page loads. It works great on desktop and on Android, however the video doesn't play on iOS.

The HTML <video> tag includes these attributes: muted autoplay playsinline webkit-playsinline, which is enough for the video to start playing automatically (and inline) when I visit the website in Safari mobile, Chrome mobile, Opera mobile or Firefox mobile, which all use webkit on iOS. However, when I am in the Microsoft Teams tab I created, the video is paused on the first frame and doesn't play until I interact with it. It then goes fullscreen, which looks a lot like pre-iOS10 behavior.

I assume this is a bug, as my app works great on Microsoft Teams for Android, so not allowing video to play inline on iOS doesn't seem intentional, am I correct? From what I understand, the WKWebViewConfiguration exposes this property that controls this behavior: allowsInlineMediaPlayback (see the docs here). Is there any chance this property is not set properly in the iOS Microsoft Teams app?

Otherwise, is there anything I should be doing on my end that I am missing?

Cheers

Edit:

As requested, here is some minimal code to reproduce the issue:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>Teams bug demo</title>
  </head>
  <body>
    <video preload="auto" src="video.mp4" controls muted autoplay playsinline webkit-playsinline />
  </body>
</html>

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.12/MicrosoftTeams.schema.json",
  "manifestVersion": "1.12",
  "version": "1.0.0",
  "id": "1887dd12-de90-4a53-ba64-f612b8575be0",
  "packageName": "com.cenareo.teamsbugdemo",
  "developer": {
    "name": "Cenareo",
    "websiteUrl": "https://cenareo.com",
    "privacyUrl": "https://cenareo.com/fr/informations-legales/rgpd",
    "termsOfUseUrl": "https://cenareo.com/fr/informations-legales/cgu"
  },
  "name": {
    "short": "Teams bug demo",
    "full": "Teams bug demo"
  },
  "description": {
    "short": "Teams bug demo",
    "full": "Teams bug demo"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#000032",
  "staticTabs": [
    {
      "entityId": "home",
      "name": "Home",
      "contentUrl": "https://frigomeo.fr/chrome/teamsBugDemo/teamsbugdemo.html",
      "scopes": ["personal"]
    }
  ]
}

Zip it along with those 2 images (make sure you rename them color.png and outline.png first):

color.png

color.png

outline.png

outline.png

Add it to your Teams account from the desktop app, then log in using the same account on iOS.

When you go to this Teams app from the desktop app or from an Android phone, the video plays inline automatically. However, from the iOS Teams app, you have to hit play first, and the video goes fullscreen. If you exit fullscreen, the video pauses automatically.

If you go to https://frigomeo.fr/chrome/teamsBugDemo/teamsbugdemo.html from any mobile browser that uses webkit such as Safari or Chrome, the video plays as expected, which makes me think this is not a webkit bug.

Solution

  • The issue seems to have been fixed with the latest update: it now plays fine with version 4.9.0.

    Thanks @Nivedipa-MSFT!