BUG背景

觸發(fā)環(huán)境

MI 5 或 MI 6（三星沒(méi)問(wèn)題）

釘釘3.5.3(開(kāi)發(fā)版沒(méi)問(wèn)題）Webview [WebKit 537.36 Chrome 57.0.2987.132]（識(shí)別方法見(jiàn)文末）

video.js 6.2.4 + vue-video-player 4.0.3

觸發(fā)條件

進(jìn)入video 頁(yè)面，點(diǎn)擊全屏按鈕（屏幕無(wú)法自動(dòng)橫屏，視頻在屏幕中間，上下都是黑屏）

再次點(diǎn)擊全屏按鈕（退出全屏）或者點(diǎn)擊 mi5 的后退按鈕（直接返回上一頁(yè)）

退出全屏后頁(yè)面上或者其他頁(yè)面上有 input 框，點(diǎn)擊 input 框，虛擬鍵盤(pán)無(wú)法彈出

BUG分析

機(jī)型

• 暫時(shí)只測(cè)試 兩臺(tái) MI5，一臺(tái) MI6，一臺(tái)三星，只有小米有問(wèn)題，iphone均無(wú)問(wèn)題
• 小米自帶瀏覽器無(wú)問(wèn)題、小米中微信 webview 無(wú)問(wèn)題、小米中安裝 Chrome 57.0.2987.132 也無(wú)問(wèn)題（Chrome 各個(gè)版本下載見(jiàn)文末）

釘釘

• 釘釘開(kāi)發(fā)版 3.5.3 無(wú)問(wèn)題，正式版 3.5.3 有問(wèn)題

插件

• 官方 repo 上的 issues 未找到相似問(wèn)題
• 未使用其他插件測(cè)試

BUG解決

解決思路

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

解決方案

• 由于我們是基于釘釘開(kāi)發(fā)的微應(yīng)用，釘釘有相應(yīng)的 JS-SDK 來(lái)調(diào)用原生功能，再加上上面呼出任務(wù)管理可以解決，所以打算從釘釘方面入手，看是否能達(dá)到與呼出小米任務(wù)管理相同的效果（如果是 android 工程師可能會(huì)考慮 activity 方面的問(wèn)題吧）
• 使用釘釘?shù)?JS-API 中 prompt 彈窗發(fā)現(xiàn)可以解決
• 順著思路使用 showPreloader + hidePreloader 問(wèn)題解決，界面上完全看不出來(lái)有加載中

相關(guān)代碼

• 最終的代碼需要相關(guān)瀏覽器的 Fullscreen API ，詳見(jiàn)文末，由于我們只用適配釘釘，所以使用的是 webkitfullscreenchange 監(jiān)聽(tīng)是否全屏

document.addEventListener('webkitfullscreenchange', handleFullScreen)

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

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

后記

• 看來(lái)多學(xué)幾種語(yǔ)言還是很有用的。。。

附錄

• 附錄見(jiàn)原文末尾： 我的博客

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。