web-dev-qa-db-ja.com

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

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

何か不足していますか？

htmlcssioscordovaionic-framework
8
Courtney White

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>
1
Yvette Ochoa

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

これが私のIonicコードです

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

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

enter image description here

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

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

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

0
D_Loki