时间戳

首页 > 解决方案 > Microsoft Bot Framework，Adaptive Card 1.1，媒体播放按钮根本无法正确显示，在移动设备上无法正确点击响应

c# - Microsoft Bot Framework，Adaptive Card 1.1，媒体播放按钮根本无法正确显示，在移动设备上无法正确点击响应

问题描述

Microsoft Bot Framework 4.9.1（NuGet 包版本）。

C#，.Net 核心 2.1。

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

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

键入任何消息（例如，嗨）。单击按钮向机器人发送消息。

Bot 显示了一张自适应卡片（1.1 版）。从自适应卡片网站上的“产品视频”示例中获取的视频标记。

两个问题：

1）在网络聊天（Win10，所有主流浏览器）中，“播放”图标无法正确显示。它被剪辑在正确的站点上。

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

a) 不应该这样做 b) 没有合理的方法来使用 CSS 规则来破解它，因为 Bot Framework 将宽度和高度放在 div 上的样式元素中，因此 CSS 规则不会改变它

2) 更重要的是，在移动设备上，单击已剪裁的图标并没有做正确的事情。

在桌面网络上，单击图标可播放视频。预期的行为。

在 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"
        }
      ]
    }

如何修复这两个错误？

谢谢！

亚当莱弗特

标签： c#botframeworkbotsadaptive-cards

解决方案

这种错误应该在Adaptive Cards repo中提出。Stack Overflow 并不是真正的错误报告。

也就是说，我做了一点挖掘，看起来自适应卡片 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 媒体播放来让其自行工作，或者您可以等待 Adaptive Cards 团队来处理它。几年前似乎还有其他人遇到过这种问题，但他们的提示可能仍然相关：HTML5 Video tag not working in Safari, iPhone and iPad

推荐阅读