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

Question

Microsoft Bot Framework 4.9.1（NuGet 包版本）。

C#、.Net 核心 2.1。

客户端是简单的网页。此处测试版本：

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

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

Bot 显示自适应卡片（版本 1.1）。从自适应卡片网站上的 "product video" 示例中提取的视频标记。

两个问题：

1) 在网络聊天（Win10，所有主流浏览器）中，"play" 图标未正确显示。它被剪辑在正确的位置。

在Chrome Dev Tools中手动编辑高度和宽度值并将值设置为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"
        }
      ]
    }

如何修复这两个错误？

谢谢！

亚当·莱弗特

Answer 1

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

也就是说，我做了一些挖掘，看起来 Adaptive Cards SDK 正在尝试使用 div 的左边框呈现播放按钮。你可以看到他们的代码 here:

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)";

这似乎是您看到 bad-looking play button is because they're assuming the page will have some kind of universal border-box 风格的原因。这应该作为错误提出，但它也为您提供了一种自行修复播放按钮的方法。

另一种解决方法可能是将整个播放按钮图形替换为您自己制作的图形，也许是 SVG。我相信您可以使用 attachment middleware. This will probably be necessary if you end up needing to replace the whole media player to get it to work on iOS. You can try to get that to work yourself by researching iOS media playback or you can wait for the Adaptive Cards team to take care of it. There seem to be other people who had this kind of issue years ago but their tips might still be relevant: HTML5 Video tag not working in Safari , iPhone and iPad

在网络聊天中执行此操作

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

Microsoft Bot Framework, Adaptive Card 1.1, media play button doesn't display correctly at all, doesn't respond to click correctly on mobile

c#

bots

botframework

adaptive-cards