CODEWITHSUNDEEP
htmlcssioscordovaionic-framework
Courtney White
Courtney White

Reputation: 614

Html video background not working for iOS on Ionic framework

I'm trying to get a full screen video background for my Ionic app, it works perfectly fine on Android and the Browser, but when I run the app on an iPhone in Xcode simulator, It's just a white background and the video doesn't load.

Html Code:

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

CSS Code:

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

I've also added this in the config.xml file

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

Am I missing something?

Upvotes: 8

Views: 2375

Answers (2)

Yvette Ochoa
Yvette Ochoa

Reputation: 11

Are you using UIWebView or WKWebView? If you are using UIWebView I recommend you upgrade as it is no longer accepted by apple when you publish your app.

There is a lot of outdated information for both from ionic. Make sure you are looking at the latest.

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

If you are using WKWebView, you should do the following:

Add ionic: to your content-security-policy's default-src and media-src entries. Do it on top of whatever you already have there.

<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';">

Then in your *.component.ts get a local video URL that works by using

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

Upvotes: 1

Dimitri G
Dimitri G

Reputation: 191

I have encountered the same problem recently and the only way I have found is not clean and is temporary but it works. I use an iframe.

Here is my Ionic code

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

I call an iframe with an URL from my server which returns the video in HTML format. Here is the HTML rendering

enter image description here

By doing this, I have no problem on IOS.

This is of course a temporary solution, it would be much better to find a solution without going through an Iframe

Hope to help you

Upvotes: 0

Related Questions