Html 视频背景不适用于 Ionic 框架上的 iOS

Question

我正在尝试为我的Ionic应用程序获取全屏视频背景，它在 Android 和浏览器上运行良好，但是当我在 Xcode 模拟器中的 iPhone 上运行该应用程序时，它只是一个白色背景，视频无法加载.

html代码：

 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src="/assets/videos/background.mp4" type="video/mp4">
    </video>
 </div>

CSS 代码：

.fullscreen-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  height: 100vh;
}

我还在 config.xml 文件中添加了这个

<preference name="AllowInlineMediaPlayback" value="true"/>

我错过了什么吗？

Answer 1

我最近遇到了同样的问题，我发现的唯一方法不是干净的，而且是暂时的，但它有效。我使用 iframe。

这是我的离子代码

<div class="video">
    <iframe [src]='videoUrl'></iframe>
</div>

我使用来自服务器的 URL 调用 iframe，该 URL 以 HTML 格式返回视频。这是 HTML 渲染

通过这样做，我在IOS上没有问题。

这当然是一个临时解决方案，如果能找到不通过Iframe的解决方案会好很多

希望能帮到你