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/

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

posted @ 2016-08-31 16:35  周截棍的双杰伦  阅读(509)  评论(0编辑  收藏  举报