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

Question

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

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

您使用的是 UIWebView 还是 WKWebView？如果您使用 UIWebView，我建议您升级，因为在您发布应用程序时，苹果不再接受它。

ionic 有很多过时的信息。确保您正在查看最新版本。

https://github.com/ionic-team/cordova-plugin-ionic-webview

如果您使用 WKWebView，您应该执行以下操作:

将 ionic: 添加到 content-security-policy 的 default-src 和 media-src 条目中。在你已经拥有的任何东西之上做它。

<meta http-equiv="Content-Security-Policy" 
  content="default-src * 'self' ionic: data: gap: 
  https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline';
  media-src * ionic: 'unsafe-inline';">

然后在您的 *.component.ts 中获取一个可以使用的本地视频 URL

/*declarations*/
private win: any = window;
videoURL: string;

/* put this on onInit or a function you call to return your src
it will return "ionic://localhost/_app_file_/assets/videos/background.mp4"*/

this.videoUrl = this.win.Ionic.WebView.convertFileSrc('/assets/videos/background.mp4');


/* then in your html*/
 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src={{videoUrl}}>
    </video>
 </div>