首页> 开发问题 >前端问题 前端问题
完美解决安卓移动端视频层级最高的问题 修改video属性
作者:小萝卜 2019-08-16 【 H5 】 浏览 4458
简介移动端网站涉及到视频播放的时候,同时又有会员的判断,一般我们会用一个遮盖层去遮住视频,用以判断是否可以观看。但是在安卓系统下,打开移动端页面这个video的层级始终室最顶级的,这个时候我们需要改下video的属性值。
如图示效果:

但是在安卓系统下,打开移动端页面这个video的层级始终室最顶级的,如下图:

这种情况会造成不管是不是vip会员都能看这个视频勒,这个时候我们需要改下video的属性值,如下:
< video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint">< /video>
各个属性的参考如下:
controls="controls" //为视频提供播放控件
x5-playsinline="" //在X5内核中让video标签播放不自动全屏
playsinline="true" //IOS微信浏览器支持小窗内播放
webkit-playsinline="true" //这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放
x-webkit-airplay="true"
x5-video-player-type="h5" //启用H5播放器,是wechat安卓版特性
x5-video-player-fullscreen="" //全屏设置,设置为 true 是防止横屏
x5-video-orientation="portraint" //播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏
很赞哦! (0)
相关文章
文章评论
2020-11-07 11:33:14 网友
真的敢说完美了,安卓机的系统浏览器会让你很打脸
2020-04-01 15:11:22 北京北京网友
你确定可以解决android手机层级问题?