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()
}
}
后记
附录
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。