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

Ionic Framework ionic-v3
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:

step_1
step_1.jpg1125×2436 193 KB

After:

step_4
step_4.jpg1125×2436 187 KB 

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
1 Like
2

Also experiencing this. when coming back from fullscreen in landscape mode, the app gets rammed underneath where the statusbar is and the app becomes un-usable. @gofin_di