Android Cordova - HTML5 Video fullscreen only works on first instance

134 views Asked by At

I have a Cordova 9.0 hybrid app that uses HTML5 tags. On iOS, the videos work great, but on Android, they exhibit the following behavior:

  1. Tapping the fullscreen button on the first instance (of the app running) works as expected
  2. Tapping the fullscreen button on every subsequent instance does not put the video to full screen - it does result in a very quick screen flash and nothing else
  3. If you lock->unlock the phone - or go to home screen->reopen the app - the video shows up as full screen
  4. Hard closing the app->opening it restarts the cycle from #1

A few things that I do know:

  • Looking at Chrome developer tools, it appears that 1) in the working instance, #top-layer is getting assigned to the video, and 2) in the broken instance, #top-layer isn't getting assigned to the video
  • In a broken instance, maximizing the Notifications Drawer does not result in the video being shown full screen.
  • Running video_element.requestFullScreen() and video_element.webkitRequestFullScreen() does not return any errors
  • The full screen button is never disabled in any scenario
  • I have not found a configuration of setSystemUiVisibility options that gets around this (including disabling functionality in CordovaActivity.java lifecycle events, as well as disabling the cordova "fullscreen" preference)
  • This is the case on newer Chrome versions (not prior to Chrome 74)
  • This is still the case when I've removed 100% of the html/javascript and am just operating with the below markup (based on the W3Schools HTML5 video object):

<html>
<head>
</head>
<body>
<video id="video1" style="width:600px;max-width:100%;" controls="">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>

Would love any help! Thanks for reading.

0

There are 0 answers