HTML5视频播放在ios下浮动元素无法点击的解决方案
最近许多人在微博上问到在iPad、iPhone、iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题。
这个现象是设备特性使然,在部分安卓设备以及全部ios设备,如果启用了浏览器默认的视频控制栏(即video标签开启了contorl属性)都是如此表现。
要解决该问题,有两个方案
1. 禁用video标签的control属性。这样悬浮在视频播放器上方的各种元素都可以点击了,但带来的副作用(或者说灾难)就是播放器没有控制栏,一个没有控制栏的播放器,用户怎么操作?你需要再用各种div和video API自行实现一套控制栏。
2. 在需要弹出div浮层时,隐藏播放器,或者将其移动到top:-200%的位置。在用于体验上,二者区别是,隐藏播放器视频停止播放了,此时没有声音;而移动到-200%的位置,视频不会停止播放,用户还会听到声音,可以根据实际场景选择最合适的处理方案。
注:经测试第一个方法似乎不起作用,只能用第二个方法来解决。
HTML5视频播放在ios下浮动元素无法点击的解决方案的更多相关文章
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...
- iOS下调用元素的focus方法,input元素不聚焦,键盘不弹起的问题
页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20p ...
- IE7下浮动元素的内容自动换行的BUG解决方法
有时候我们想写个浮动得到这样的效果: 代码: <!doctype html> <html> <head> <meta charset="utf-8& ...
- 微信中音乐播放在ios不能自动播放解决
在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...
- IE6下绝对定位元素和浮动元素并列绝对定位元素消失
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- IE下object元素遮挡div表单
目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
随机推荐
- Joomla 3.2.0 - 3.4.4 无限制SQL注入漏洞
http://www.sebug.net/vuldb/ssvid-89680#0-tsina-1-18081-397232819ff9a47a7b7e80a40613cfe1 http://10.21 ...
- Maven3下的java web项目
咱们使用Maven3构建一个j2ee项目,项目的成果是一个war包,只需把它部署在服务器上,就可以使用浏览器访问. 具体详细信息 参考 http://www.mossle.com/docs/mave ...
- 2016huasacm暑假集训训练三 C - Til the Cows Come Home
题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/C N题目大意是有n个点,然后给出从a点到b点的距离,a和b是互相可以抵达的,则是无 ...
- thinkphp 关于iframe一次提交完成所有操作
一.上传操作html界面,upload.html <import type='css' file="admin.css.common" /> <import ty ...
- codeforces480E Parking Lot
题目大意:给一个点阵,其中有的地方没有点,操作是去掉某个点,并询问当前点阵中最大的正方形 若没有修改的话,裸dp 加上修改,可以考虑时光倒流,这样答案就是递增的 可以用并查集维护点的连通性,O^2的 ...
- Unity学习疑问记录之时间变量
1.Time.deltaTime 以秒计算,完成最后一帧的时间 放在Update()函数中的代码是以帧来执行的.如果我们需要物体的移动以秒来执行.我们需要将物体移动的值乘以Time.deltaTime ...
- jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中
jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...
- 成功熬了四年还没死?一个IT屌丝创业者的深刻反思
三个IT屌丝创业的故事 从前有三个屌丝,聚在一起做网络.提供免费的网络服务,砸锅卖铁,通宵达旦,除了卖肾,啥都做了.3年后终于做到了五百万用户.对于年轻人来说,能把五百万人玩弄于鼓掌之间,已经是很牛逼 ...
- centos安装后iptables基本设置
一.首先关闭防火墙#service iptables stop 二.查看状态,确认关闭#service iptables status 三.清除掉防火墙规则#iptables -F#iptables ...
- 遍历echsop的region表形成缓存的程序
header("Content-type: text/html; charset=utf-8"); $con = mysql_connect("localhost&quo ...