Microsoft机器人框架自适应卡片 1.1 中,媒体播放按钮根本无法正确显示,无法响应移动设备上的正确单击



Microsoft 机器人框架 4.9.1(NuGet 包的版本(。

C#,.Net Core 2.1。

客户端是简单的网页。 测试版本在这里:

https://dnctestbot.z13.web.core.windows.net

键入任何消息(例如 hi(。 单击按钮将消息发送到机器人。

机器人显示自适应卡片(版本 1.1(。 从自适应卡片网站上的"产品视频"示例中获取的视频标记。

两个问题:

1(在网络聊天(Win10,所有主流浏览器(中,"播放"图标未正确显示。 它被剪裁在正确的网站上。

在 Chrome 开发工具中手动编辑高度和宽度值并将值设置为 1px(仅作为测试(会导致图标正确显示,但

a( 不应该这样做 b( 没有合理的方法可以使用 CSS 规则来解决这个问题,因为机器人框架将宽度和高度放在div 上的样式元素中,因此 CSS 规则不会更改它

2(更重要的是,在移动设备上,单击剪辑的图标不会做正确的事情。

在桌面 Web 上,单击该图标可播放视频。 预期行为。

在 iPhone 6 和 iPhone 7+(最新 iOS(上,单击该图标会导致视频看起来像要播放,但从未播放过。 不是加载的问题。 它只是坐在那里。 如果再次单击该图标,然后再次单击它,视频将立即播放。 这更糟。

我尝试过无法修复或覆盖错误的事情:

1( 在卡片中设置海报图像。 图像会显示,但不会更改剪辑的图标或单击以在移动设备上不起作用的播放。

2( 在卡片标记中设置 playButton 元素,以指定要为播放按钮显示的图像。 什么都不做。 是的,我声明了自适应卡片版本 1.1。

下面是自适应卡片的标记:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.1",
"fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!",
"body": [
{
"type": "Media",
"sources": [
{
"mimeType": "video/mp4",
"url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4"
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Learn more",
"url": "https://adaptivecards.io"
}
]
}

如何修复这两个错误?

谢谢!

亚当·莱弗特

应在自适应卡片存储库中引发此类 bug。堆栈溢出并不是真正用于错误报告。

也就是说,我做了一些挖掘,看起来自适应卡片 SDK 正在尝试使用div 的左边框呈现播放按钮。你可以在这里看到他们的代码:

let playButtonInnerElement = document.createElement("div");
playButtonInnerElement.className = this.hostConfig.makeCssClassName("ac-media-playButton-arrow");
playButtonInnerElement.style.width = playButtonArrowWidth + "px";
playButtonInnerElement.style.height = playButtonArrowHeight + "px";
playButtonInnerElement.style.borderTopWidth = (playButtonArrowHeight / 2) + "px";
playButtonInnerElement.style.borderBottomWidth = (playButtonArrowHeight / 2) + "px";
playButtonInnerElement.style.borderLeftWidth = playButtonArrowWidth + "px";
playButtonInnerElement.style.borderRightWidth = "0";
playButtonInnerElement.style.borderStyle = "solid";
playButtonInnerElement.style.borderTopColor = "transparent";
playButtonInnerElement.style.borderRightColor = "transparent";
playButtonInnerElement.style.borderBottomColor = "transparent";
playButtonInnerElement.style.transform = "translate(" + (playButtonArrowWidth / 10) + "px,0px)";

您看到一个不好看的播放按钮的原因是因为他们假设该页面将具有某种通用的border-box样式。这应该作为一个错误提出,但它也为您提供了一种为自己修复播放按钮的方法。

另一种解决方法可能是将整个播放按钮图形替换为您自己制作的东西,也许是 SVG。我相信您可以使用附件中间件在网上聊天中做到这一点。如果您最终需要更换整个媒体播放器以使其在iOS上运行,则可能需要这样做。你可以尝试通过研究 iOS 媒体播放来使其自己工作,也可以等待自适应卡片团队来处理它。几年前似乎还有其他人遇到过这种问题,但他们的提示可能仍然相关:HTML5视频标签在Safari,iPhone和iPad中不起作用

最新更新