关于移动端开发,vedio标签层级高遮挡蒙版的解决方案
问题描述:
使用famework7框架搭建了一个界面,然后再界面中需要使用蒙版效果,在PC端,ios测试没有问题,在Andriod播放视屏再点击显示蒙版的效果师,视频会遮盖蒙版。修改定位,z-index都没有用。
安卓手机内置x5内核,x5内核不遵循许多web标准,vedio层级最高,播放时不支持所有DOM层面的操作,所以并没有好的解决方案,最后采用的解决方案就是在点击视频播放按钮之后使视频全屏覆盖。
以下是我在原有代码基础上添加的内容,可供遇到同样问题的你使用:
给vedio标签添加属性,播放时全屏覆盖
<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>
关于移动端开发,vedio标签层级高遮挡蒙版的解决方案的更多相关文章
- HTML5-前端开发很火且工资很高?
前言 晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前 ...
- web移动端开发技巧与注意事项汇总
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...
- 移动端开发viewport深入理解(转)
一.viewport的概念 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...
- web移动端开发技巧
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...
- 移动端开发demo—移动端web相册(一)
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
- 29.html5 移动端开发总结
手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...
- 前端开发-3-HTML-body标签
body标签 h.p.a.ul.ol.div.img. 想要在网页上展示出来的内容一定要放在body标签中. 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中. <!DOC ...
随机推荐
- Linux时间同步问题
一.调整时区 sudo tzselect 选择时区 Asia-> China-> Beijing Time->Yes 二.同步时间 ntpdate cn.pool.ntp.org 三 ...
- 禁止Centos7系统yum自动下载更新
安装Centos7后,系统自动更新状态默认为开启,若禁止系统自动更新需要手动关闭. 1.进入yum目录 [root@localhost ~]$ cd /etc/yum 2.编辑yum-cron.co ...
- webserver开发
https://www.cnblogs.com/zakun/p/5387910.html
- java无需解压zip压缩包直接读取包内的文件名(含中文)
java自带了java.util.zip工具可以实现在不解压zip压缩包的情况下读取包内文件的文件名:(注:只能是ZIP格式的,rar我试了不行)代码如下: public static String ...
- SQL ServerAlways Encrypted Data
SQL Server 提供了一个加密表上字段的功能, Encrypt Columns , 比如身份证号码,手机号码,银行账户等等敏感信息.
- Python-第一篇-python初识及变量
<work smart>主动分享成果和经验,与同伴共同成长</smart work> 启文:使用20多种编程语言,对大家说节日快乐 万国码使用16位(至少)表示内容: ASCI ...
- C# 动态调用WebService 3
using Microsoft.CSharp; using System; using System.CodeDom; using System.CodeDom.Compiler; using Sys ...
- 30分钟,让你彻底明白Promise原理
前言 前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的.ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不 ...
- PCB差分线学习
问:何为差分信号? 答:通俗地说,就是驱动端发送两个等值.反相的信号,接收端通过比较这两个电压的差值来判断逻辑状态“0”还是“1”. 问:差分线的优势在哪? 答:差分信号和普通的单端信号走线相比,最明 ...
- [ubuntu]apt-get update突然出现arm package找不到
https://blog.csdn.net/l741299292/article/details/69671789