BUG背景

觸發環境

MI 5 或 MI 6（三星沒問題）

釘釘3.5.3(開發版沒問題）Webview [WebKit 537.36 Chrome 57.0.2987.132]（識別方法見文末）

video.js 6.2.4 + vue-video-player 4.0.3

觸發條件

進入video 頁面，點擊全屏按鈕（屏幕無法自動橫屏，視頻在屏幕中間，上下都是黑屏）

再次點擊全屏按鈕（退出全屏）或者點擊 mi5 的后退按鈕（直接返回上一頁）

退出全屏后頁面上或者其他頁面上有 input 框，點擊 input 框，虛擬鍵盤無法彈出

BUG分析

機型

• 暫時只測試 兩臺 MI5，一臺 MI6，一臺三星，只有小米有問題，iphone均無問題
• 小米自帶瀏覽器無問題、小米中微信 webview 無問題、小米中安裝 Chrome 57.0.2987.132 也無問題（Chrome 各個版本下載見文末）

釘釘

• 釘釘開發版 3.5.3 無問題，正式版 3.5.3 有問題

插件

• 官方 repo 上的 issues 未找到相似問題
• 未使用其他插件測試

BUG解決

解決思路

• 由上面分析可知，該BUG 與小米相關度較大，與釘釘相關度較大，所以從小米手機和釘釘官方入手尋找解決方案
• 小米論壇、MIUI論壇和阿里官方論壇未找到相關信息
• 一個解決思路是：退出全屏后刷新當前頁面，記錄并設置視頻播放位置，經實驗退出全屏后直接刷新頁面也無法觸發軟鍵盤(除非重新打開頁面）
• 一個方法可解決：當無法彈出軟件盤時，呼出小米的任務管理，重新切換進釘釘，即可彈出軟鍵盤

解決方案

• 由于我們是基于釘釘開發的微應用，釘釘有相應的 JS-SDK 來調用原生功能，再加上上面呼出任務管理可以解決，所以打算從釘釘方面入手，看是否能達到與呼出小米任務管理相同的效果（如果是 android 工程師可能會考慮 activity 方面的問題吧）
• 使用釘釘的 JS-API 中 prompt 彈窗發現可以解決
• 順著思路使用 showPreloader + hidePreloader 問題解決，界面上完全看不出來有加載中

相關代碼

• 最終的代碼需要相關瀏覽器的 Fullscreen API ，詳見文末，由于我們只用適配釘釘，所以使用的是 webkitfullscreenchange 監聽是否全屏

document.addEventListener('webkitfullscreenchange', handleFullScreen)

• 而在 handleFullScreen 中，使用document.webkitIsFullScreen 來判斷當前是否是全屏，同樣也只支持 webkit 內核，其他內核 demo 可以看 文末MDN 上的例子

function handleFullScreen (e) {if (document.webkitIsFullScreen) {console.log('fullscreen')} else {console.log('exit fullscreen')dd.device.notification.showPreloader()dd.device.notification.hidePreloader()}}

后記

• 看來多學幾種語言還是很有用的。。。

附錄

• 附錄見原文末尾： 我的博客

總結

以上是生活随笔為你收集整理的【BUG】小米5中 video.js 在钉钉 webview 中全屏后 后退无法弹出虚拟键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。