HTMLビデオの背景がIonicフレームワーク上のiOSで機能しない

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"/>

何か不足していますか？

— コートニーホワイト
ソース

を使用して絶対「ネイティブ」パスで試しましたfile:///android_asset/www/か？

— ヨハンチョピン

あなたのビデオのビデオコーデックはiOSで動作しますか？

— スタッフ

「何か不足していますか？」-何をしているあなたはこれを試してみてデバッグするために、これまでに行わ...？

— CBroe

@johannchopin Ionicは、私が投稿したアセットパスを使用することを明示的に述べており、他のすべてのリソース（SVG、JPG、その他のアセットの読み込み）で動作します。scaff iOSデバイスでサポートされてmp4用途H.264コーデック、：i.imgur.com/lij4wwo.png CBroe私はサファリ内のシミュレータシステムログだけでなく、デバッグコンソールをチェックしようとしただけに見えることはできませんビデオの背景に関するエラーメッセージを検索または生成します。

— コートニーホワイト

CSSコードに絶対的な位置を追加しようとするかもしれません。

— Dmytro Cheglakov

回答:

UIWebViewまたはWKWebViewを使用していますか？UIWebViewを使用している場合は、アプリを公開するときにAppleで受け入れられなくなるため、アップグレードすることをお勧めします。

両方のイオンから古い情報がたくさんあります。最新のものを見ていることを確認してください。

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>

— イヴェット・オチョア
ソース

私は最近同じ問題に遭遇しましたが、私が見つけた唯一の方法はクリーンではなく一時的なものですが、それは機能します。iframeを使用しています。

これが私のイオンコードです

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

HTML形式でビデオを返すサーバーからのURLでiframeを呼び出します。ここにHTMLレンダリングがあります

これを行うことで、IOSには問題がありません。

これはもちろん一時的な解決策です。Iframeを経由せずに解決策を見つける方がはるかに良いでしょう。

あなたを助けることを願っています

— D_Loki
ソース