BUG背景

触发环境

  1. MI 5 或 MI 6（三星没问题）
  2. 钉钉3.5.3(开发版没问题）Webview [WebKit 537.36 Chrome 57.0.2987.132]（识别方法见文末）
  3. video.js 6.2.4 + vue-video-player 4.0.3

触发条件

  1. 进入video 页面，点击全屏按钮（屏幕无法自动横屏，视频在屏幕中间，上下都是黑屏）
  2. 再次点击全屏按钮（退出全屏）或者点击 mi5 的后退按钮（直接返回上一页）
  3. 退出全屏后页面上或者其他页面上有 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 中全屏后 后退无法弹出虚拟键盘相关推荐

  1. js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

    js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题 谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效 解决方法 //判断是否是全屏状态 var isFul ...

  2. Viewpager+Fragment+webview中的输入框不弹出软键盘的坑

    最近项目中需要做一个h5的混合开发,商城系统应用已有现成的项目的,省去开发的时间,所以必须webview来展示商城. 我的项目是MainActivity里面放了一个Lazyviewpager嵌套4个F ...

  3. 小米手机碎屏后米四启动屏幕虚拟键，禁用实体键

    小米手机碎屏后米四启动屏幕虚拟键,禁用实体键 故障说明,因为左下角碎裂,导致 实体MENU键处于半触发状态,经常莫名的会启动后台运行程序,同时三个实体键出现经常触发不灵敏的状态. 所以想来想去,还是想 ...

  4. 苹果 ios 使用video 播放器，怎么禁止自动全屏

    苹果 ios 使用video 播放器,怎么禁止自动全屏 最近在做兼职,遇到两个小问题,记录下, ios系统怎么在微信中禁用video 全屏展示 在video标签中 增加 x5-video-player ...

  5. Android中的EditText默认时不弹出软键盘的方法

    在做项目过程中 , 父 Activity 中 用 ViewPager 中 的子 ActivityEditText默认弹出软键盘.这是想屏蔽 软键盘 应该从父 Activity 中处理.处理子 Acti ...

  6. HTML5页面，用JS 禁止弹出手机键盘

    HTML5页面,用JS 禁止弹出手机键盘 用户点击input的时候: 会默认调出手机软键盘: 场景:文本框获取焦点时,需要禁止手机弹出自带的输入键盘: 解决方案1: 用一个p/div等标签显示内容:然 ...

  7. Vue中video.js踩坑日记 单页切换后视频无法播放

    使用video.js踩坑.单页切换后视频无法播放 切换页面以后正常显示效果 但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路 在生命周期beforeDestroy函数中 ...

  8. java 防止js注入_在WebView中如何让JS与Java安全地互相调用

    在现在安卓应用原生开发中,为了追求开发的效率以及移植的便利性,使用WebView作为业务内容展示与交互的主要载体是个不错的折中方案.那么在 这种Hybrid(混合式) App中,难免就会遇到页面JS需 ...

  9. php中的js弹窗,浅谈javascript中的三种弹窗

    js中三种弹窗 1)alert 弹出警告 无返回值---------alert('第一行\n第二行'); 2)confirm()选择确定或取消,返回t或f----var result = confir ...

最新文章

  1. 一打在2019年亮相的迷人科技项目：飞行汽车、子弹头列车、登月、……
  2. 深度学习之图像处理---七级浮屠
  3. php 23种设计模型 - 组合模式(合成模式)
  4. 两个class写在同一个java文件中
  5. 信息学奥赛一本通C++语言——1020： 打印ASCII码
  6. 求计算两个时间的差（DateTime类和TimeSpan类）
  7. 自学c语言中相关知识,设计出医院住院管理系统.要求如下所述:,C语言课程设计题Z目.doc...
  8. 从「猜画小歌」，谈企业的「数据困惑」该何去何从？
  9. Python学习总结（2）——变量
  10. python 中用ts文件合并成为MP4
  11. 一文看懂什么是车规级芯片
  12. Redis--布谷鸟过滤器--使用/原理/实例
  13. 使用树莓派3B+ 制作一个属于自己的无线AP 无线路由器 一个Wi-Fi热点
  14. Mybaits-Plus Invalid bound statement (not found) 问题
  15. 基于DLNA实现iOS、Android投屏：基本概念
  16. html常用长度单位
  17. 基于单片机的超声波测距
  18. 我的世界服务器怎么发全部消息,我的世界服务器里起床战争怎么向所有人说话...
  19. 零撸项目-Star Network注册流程
  20. 【计量】调节效应专题

热门文章

  1. bzoj1007题解
  2. 关于iOS知识的提升
  3. C# 工厂模式 简单入门
  4. cache-control_网站 cache control 最佳实践
  5. Windows PE 第十章 加载配置信息
  6. POJ3422简单费用流
  7. 【Latext】上标下标 ( 右侧上标下标 | 任意字符的正上标记 | 任意字符的正下标记 | 常用数学符号的上标和下标 | 加和 | 乘积 | 交集 | 并集 | 上积 | 极限 | 上弧 )
  8. 【Android 逆向】Android 逆向通用工具开发 ( 网络模块开发 | SOCKET 网络套接字初始化 | 读取远程端 “Android 模拟器“ 信息 | 向远程端写出数据 )
  9. 【错误记录】Flutter 设备连接显示 Loading... ( 断网 | 删除 flutter/bin/cache/lockfile 文件 )
  10. etcd、flannel的安装---单节点