HTML5视频播放在ios下浮动元素无法点击的解决方案

最近许多人在微博上问到在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/

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

转载于:https://www.cnblogs.com/yangzhihang627/p/5826532.html