iPhone X (and similar) fullscreen Video playback - StatusBar crash


#1

Hey,

I think there is a bug on iPhones with notch screens while playing videos using HTML5 video tag.
When entering fullscreen, landscape mode on application which is fixed to portrait mode, clock, battery and status icons are disappearing.

Steps to reproduce error:

  1. ionic start myApp sidemenu
  2. Modify Home.html as follows
<ion-content padding>
    <video autoplay="" class="video-player" controls="controls"  playsinline webkit-playsinline  controlslist="nodownload" playsinline="" preload="metadata" style="margin-top:15px;" webkit-playsinline="">
      <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4">
    </video>
</ion-content>

  1. Add parameters to config.xml:
    <preference name="orientation" value="portrait" />
    <preference name="AllowInlineMediaPlayback" value="true" />
  1. Compile your App for iOS
  2. Run your App on iPhoneX simulator.
  3. Expand video to full screen, rotate phone left or right, leave full screen.

Before entering fullscreen:

After:

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 4 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v10.11.0 (/usr/local/Cellar/node/10.11.0/bin/node)
   npm        : 6.4.1
   OS         : macOS
   Xcode      : Xcode 10.1 Build version 10B61

All ionic cordova plugins:

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

npm

├── @angular/animations@5.2.11
├── @angular/common@5.2.11
├── @angular/compiler@5.2.11
├── @angular/compiler-cli@5.2.11
├── @angular/core@5.2.11
├── @angular/forms@5.2.11
├── @angular/http@5.2.11
├── @angular/platform-browser@5.2.11
├── @angular/platform-browser-dynamic@5.2.11
├── @ionic-native/core@4.17.0
├── @ionic-native/splash-screen@4.17.0
├── @ionic-native/status-bar@4.17.0
├── @ionic/app-scripts@3.2.1
├── @ionic/storage@2.2.0
├── cordova-ios@4.5.5
├── cordova-plugin-device@2.0.2
├── cordova-plugin-ionic-keyboard@2.1.3
├── cordova-plugin-ionic-webview@2.3.1
├── cordova-plugin-splashscreen@5.0.2
├── cordova-plugin-statusbar@2.4.2
├── cordova-plugin-whitelist@1.3.3
├── ionic-angular@3.9.2
├── ionicons@3.0.0
├── rxjs@5.5.11
├── sw-toolbox@3.6.0
├── typescript@2.6.2
└── zone.js@0.8.26