[BUG] video.js in Xiaomi 5 cannot eject the virtual keyboard after nailing webview full screen

  dingtalk, input, video.js, vue.js, webview

BUG background

Trigger environment

  1. MI 5 or MI 6 (samsung no problem)
  2. Nail 3.5.3 (Development Version No Problem) Webview [WebKit 537.36 Chrome 57.0.2987.132] (See the end of the article for identification methods)
  3. video.js 6.2.4+vue-video-player 4.0.3

Trigger condition

  1. Enter the video page and click on the full screen button (the screen cannot automatically cross the screen; the video is in the middle of the screen, with black screens above and below)
  2. Click the full screen button again (exit full screen) or click the back button of mi5 (return to the previous page directly)
  3. After exiting the full screen, there is an input box on the page or other pages. Click the input box, and the virtual keyboard cannot pop up.

BUG analysis

Model

  • For the time being, only two mi5s, one MI6 and one Samsung will be tested. only Xiaomi has problems and iphone has no problems.
  • There is no problem with Xiaomi’s own browser, no problem with WeChat webview in Xiaomi, and no problem with installing Chrome 57.0.2987.132 in Xiaomi (see the end of the article for download of various versions of Chrome)

Nail

  • There is no problem with nailing development version 3.5.3, but there is a problem with formal version 3.5.3.

plug-in

  • Issues on the official repo found no similar problem.
  • No other plug-in tests were used

BUG resolution

Solutions

  • From the above analysis, it can be seen that the BUG is closely related to Xiaomi and nailing, so we should start with Xiaomi mobile phone and nailing authorities to find a solution.
  • Xiaomi Forum, MIUI Forum and Ali Official Forum did not find relevant information
  • One solution is to refresh the current page after exiting the full screen, record and set the video playback position. After exiting the full screen through experiments, refreshing the page directly cannot trigger the soft keyboard (unless the page is reopened)
  • One method can be solved: when the software disk cannot be ejected, the task management of the outgoing millet can be switched back into the nail to eject the soft keyboard.

Solution

  • Since we are a micro-application developed based on nailing, nailing has a corresponding JS-SDK to call native functions, and the above outbound task management can be solved, so we plan to start with nailing to see if we can achieve the same effect as outbound millet task management (if android engineers may consider the issue of activity)
  • Prompt pop-up window discovery in JS-API using nailing can be solved
  • Follow the train of thought and use showPreloader+hidePreloader to solve the problem. there is no load in the interface.

Related codes

  • The final code needs the Fullscreen API of the relevant browser. see the end of the article for details. since we only use the adapter nail, we use thewebkitfullscreenchangeMonitor full screen
    document.addEventListener('webkitfullscreenchange', handleFullScreen)
  • In handleFullScreen, thedocument.webkitIsFullScreenTo determine whether the current is full screen, also only support webkit kernel, other kernel demo can see the example on MDN at the end of the article
    function handleFullScreen (e) {
      if (document.webkitIsFullScreen) {
        console.log('fullscreen')
      } else {
        console.log('exit fullscreen')
        dd.device.notification.showPreloader()
        dd.device.notification.hidePreloader()
      }
    }

Postscript

  • It seems that it is very useful to learn more languages. . .

Appendix

  • See appendix at the end of the original text:My blog