关于钉钉小程序中,Android端video标签隐藏原生控件的方法

398 阅读3分钟

项目场景:

在开发钉钉小程序的时候,因为要用到video视频,而小程序的video无法支持后端返回的视频地址,所以采用了原生h5的video标签,但是在使用Video标签的过程中,遇到了很多兼容性问题!!!

问题1:

video在移动端只有进度条,静音键,全屏键,
而我的开发需求是需要实现倍速功能的,video标签在pc端是有倍速功能的,但是在移动端却没有。

问题2:

因为没有倍速键,我尝试自定义控制按钮,但是只要video视频一播放,我自定义覆盖在视频上方的按钮就会被覆盖。

百度后了解到:

1. 安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。
安卓下qq的x5内核浏览器,提供了相关属性。分别为:x5-playsinline:行内播放。x5-video-player-type=“h5”:播放层级为文档层级。如果页面只有一个视频而且该视频在页面的顶部用起来还是比较顺心的。否则会发现,播放视频的时候会紊乱的。
所以移动端中,不建议做视频和dom重合的设计。
以下内容范围:安卓
在video未被播放之前,video标签属于正常文档元素,z-index也是生效的。此时层级高的dom可以展示在video标签区域上方。
video标签播放中和播放之后均会覆盖dom。
浏览器同时只能播放一个video标签。当切换播放视频内容时体验不是很好:
浏览器播放组件切换视频时花费的时间可以明显的感知的到。
浏览器播放组件的底色一般是黑色,而我们的web底色大多时候不是黑色,切换时,会出现闪动。是由于浏览器播放组件的关闭然后再次打开造成的。

2. 关于钉钉小程序中,Android端标签隐藏原生控件的方法(ios端大多数方法都可行)
工作需要,使用钉钉小程序,很像微信小程序。微信小程序用的是x5浏览器内核,所以有tbs提供的方法,H5同层播放器。
钉钉上也有在标签上有属性可用,是 raw-controls="false",在video标签上设置该属性,就可以隐藏掉原生的控制器,然后通过js去控制视频的播放状态。
这个在文档中是没有写明的,钉钉小程序文档的不全

问题解决过程:

  1. 刚开始跟着百度上的答案设置各种属性如下:
webkit-playsinline='true' 
playsinline='true'
x5-playsinline='true' 
x5-video-player-type="h5-page"

但是统统没有用,还是无法改变视频层级的问题,设置的z-index也是失效的
  1. 后来百度找到了原来是钉钉导致了原生控件无法被隐藏,加个raw-controls="false"即可把原生控件隐藏掉