最近许多人在微博上问到在iPad、iPhone、iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题。

这个现象是设备特性使然,在部分安卓设备以及全部ios设备,如果启用了浏览器默认的视频控制栏(即video标签开启了contorl属性)都是如此表现。

要解决该问题,有两个方案

1. 禁用video标签的control属性。这样悬浮在视频播放器上方的各种元素都可以点击了,但带来的副作用(或者说灾难)就是播放器没有控制栏,一个没有控制栏的播放器,用户怎么操作?你需要再用各种div和video API自行实现一套控制栏。

2. 在需要弹出div浮层时,隐藏播放器,或者将其移动到top:-200%的位置。在用于体验上,二者区别是,隐藏播放器视频停止播放了,此时没有声音;而移动到-200%的位置,视频不会停止播放,用户还会听到声音,可以根据实际场景选择最合适的处理方案。

摘自:http://popotang.com/blog/

注:经测试第一个方法似乎不起作用,只能用第二个方法来解决。

HTML5视频播放在ios下浮动元素无法点击的解决方案的更多相关文章

  1. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  2. 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

    开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...

  3. iOS下调用元素的focus方法,input元素不聚焦,键盘不弹起的问题

    页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20p ...

  4. IE7下浮动元素的内容自动换行的BUG解决方法

    有时候我们想写个浮动得到这样的效果: 代码: <!doctype html> <html> <head> <meta charset="utf-8& ...

  5. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  6. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  8. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  9. 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

    IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...

随机推荐

  1. 使用logrotate来进行轮换mysql的慢日志

    #!/bin/bash SLOWCFG=/etc/my.cnf DATADIR=`awk /^datadir/ $SLOWCFG|awk -F"=" '{print $2}'` S ...

  2. BizTalk动手实验(九)业务规则引擎使用

    1 课程简介 通过本课程熟悉业务规则引擎(BRE)的使用(本环境为Windows 2008 32位操作系统环境 + Visual Studio 2010 + BizTalk 210) 2 准备工作 1 ...

  3. CVTRES : fatal error CVT1100 , fatal error LNK1123:

    CVTRES : fatal error CVT1100: duplicate resource. type:DIALOG, name:901, language:0x0804LINK : fatal ...

  4. HDU 4287 Intelligent IME(字典树数组版)

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. phpcms v9的url优化

    nginx配置重定向 # nginx rewrite rule rewrite ^/show-(.+)-(.+)-(.+).html$ /index.php?m=content&c=index ...

  6. C++ Primer Pluse_8_课后题

    #include <iostream> #include <string> #include<cstring> using namespace std; void ...

  7. WINFORM 打开PDF

    这里使用 Adobe Read 组件 的方式 首先电脑上需要安装AdobeRead VS中添加COM引用 再在工具选项卡中添加Adobe PDF Read 组件即可 从工具箱中直接拖动组件到窗体中即可

  8. Maven-007-Nexus 用户添加,用户角色分配,用户修改密码,管理员重置用户密码

    配置好 maven nexus 私服后,默认的用户可通过查看[Users]查看当前私服中所存在的用户,如下图所示:

  9. Inside Flask - flask 扩展加载过程

    Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...

  10. Linux:挂载外部U盘,移动数据

    背景: 我自己电脑连网采用拨号上网方式,为了把自己的虚拟机中的服务器ip域本机设置为一个局域网,而且ip固定下来,虚拟机网络连接采用了桥接方式.所以也导致了虚拟机内部没法连接外网.(不过可以通过在虚拟 ...