我们公司目前正在开发一个Microsoft Teams应用程序,必须在页面加载时自动开始播放视频。在桌面和Android上工作得很好,但是在iOS上视频不会播放。
HTML <video>
标记包括这些属性:muted autoplay playsinline webkit-playsinline
,这足以使视频在访问Safari移动版、Chrome移动版、Opera移动版或Firefox移动版时自动(且内联)播放,它们都使用iOS的webkit。然而,在我创建的Microsoft Teams选项卡中,该视频会在第一帧暂停,并且在我与其交互之前不会播放。然后它全屏,看起来很像iOS10之前的行为。
我认为这是一个错误,因为我的应用在Android的Microsoft Teams上运行良好,因此不允许在iOS上内联播放视频似乎不是故意的,我是正确的吗?据我所了解,WKWebViewConfiguration
公开了控制此行为的属性:allowsInlineMediaPlayback
(请参阅此处的文档here)。iOSTeams应用程序中是否没有正确设置此属性?
否则,我是否应该在我的端上做些什么,而我需要遗漏的是什么?
干杯
编辑:
如所请求,这里是一些最少代码来重现问题:
<!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>
应用程序的
manifest.json
。{
"$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"]
}
]
}
将这两张图片压缩在一起(确保先将它们重命名为color.png
和outline.png
):
从桌面应用程序将其添加到您的 Teams 帐户中,然后使用相同的帐户在 iOS 上登录。
当您从桌面应用程序或 Android 手机进入此 Teams 应用时,视频会自动内联播放。但是,从 iOS Teams 应用中,您必须先点击播放按钮,然后视频会全屏播放。如果退出全屏模式,则视频会自动暂停。
如果您从任何使用 WebKit 的移动浏览器(如 Safari 或 Chrome)访问https://frigomeo.fr/chrome/teamsBugDemo/teamsbugdemo.html,则视频会按预期播放,这使我认为这不是 WebKit 的错误。