外星人源码论坛 首页 编程经验 【BUG】小米5中 video.js 在钉钉 webview 中全屏后 后退无法弹出虚拟键盘 ...

【BUG】小米5中 video.js 在钉钉 webview 中全屏后 后退无法弹出虚拟键盘 ...

2018-3-5 06:51
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

BUG背景 触发环境MI 5 或 MI 6(三星没问题) 钉钉3.5.3(开发版没问题)Webview (识别方法见文末)video.js 6.2.4 + vue-video-player 4.0.3触发条件进入video 页面

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()
      }
    }

后记

看来多学几种语言还是很有用的。。。

附录

附录见原文末尾: 我的博客

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读123 回复0
上一篇:
使用HBuilder开发移动APP发布时间:2018-03-05
下一篇:
使用 lombok 简化 Java 代码发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们