Javascript 如何在AirConsole控制器上设置动画按钮？

我们在控件上使用了动画GIF按钮，在我们进行更广泛的用户测试之前，它工作得很好，一些用户使用了iPhone（而不是以前所有人都使用的机器人）。他们使用AirConsole应用程序来控制相关的情况。动画GIF在那里似乎没有动画效果。显然，我们正在寻找一个在所有AirConsole支持的平台上都适用的答案。（动画GIF似乎是最低公分母类型的答案！）

有什么想法/帮助吗？我们需要做一些特定的事情还是用特定的方式编码

否则（如果不支持），我想我们必须看看是否可以检测控制器平台（JS中的浏览器信息？），并提供一个替代方案。（我猜可能是JS在交换图像帧。否则完全回到绘图板：（）如果你知道的话，请建议那些备选方案

我们正在手工编写HTML和JavaScript（不使用生成器）。以下是我希望所有合适的代码

  .main-button{
      position: absolute;
      top: 35%;
      width: 18%;
      height: 30%;
      background-size: contain;
      background-repeat: no-repeat;
  }

  #interact-button{
      background-image: url("Buttons/AnimatedButton-PickUpPutDown01.gif");
      left: 30%;
      top:25%;
  }

  <div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>

.main按钮{
位置：绝对位置；
最高：35%；
宽度：18%；
身高：30%；
背景尺寸：包含；
背景重复：无重复；
}
#交互按钮{
背景图像：url（“Buttons/AnimatedButton-pickuputdown01.gif”）；
左：30%；
最高：25%；
}

这是我们正在使用的一个GIF示例。如果有任何其他可能的帮助，请告诉我，并提前感谢

---

我尝试在旧iPhone（运行iOS 10.3.3）上的AirConsole应用程序、Chrome和Safari浏览器（使用）中显示GIF。 它们都像预期的那样显示动画GIF：

以下是我在controller.html中使用的代码：

让我们来看看控制台；
/**
*设置与屏幕的通信。
*/
函数init（）{
airconsole=新的airconsole（{'orientation'：'crative'}）；
}
.主按钮{
位置：绝对位置；
最高：35%；
宽度：18%；
身高：30%；
背景尺寸：包含；
背景重复：无重复；
}
#交互按钮{
背景图像：url（“Images/support/AnimatedButton-pickuputdown01.gif”）；
左：30%；
最高：25%；
}

我尝试在旧iPhone（运行iOS 10.3.3）上的AirConsole应用程序、Chrome和Safari浏览器（使用）中显示GIF。 它们都像预期的那样显示动画GIF：

以下是我在controller.html中使用的代码：

让我们来看看控制台；
/**
*设置与屏幕的通信。
*/
函数init（）{
airconsole=新的airconsole（{'orientation'：'crative'}）；
}
.主按钮{
位置：绝对位置；
最高：35%；
宽度：18%；
身高：30%；
背景尺寸：包含；
背景重复：无重复；
}
#交互按钮{
背景图像：url（“Images/support/AnimatedButton-pickuputdown01.gif”）；
左：30%；
最高：25%；
}