css - 移动端怎么在video上面覆盖div等元素？

Question

移动端使用video播放视频，现在需要在视频上面放两个按钮，如图

但是在手机浏览器中播放时视频永远会遮住按钮，不关z-index多大，ios和安卓
都一样。

然后看了一下B站的手机网页版，貌似播放的时候也没有弹幕，也显示不了自定义控件。
有没有人遇到过相同的问题，如何解决？

Answer 1

我也试过这个问题。在原生的video 标签上覆盖可能无法实现，因为播放后的页面会自动到最顶层(我测试是这样的，可能有其他方法)。我的建议是仔细分析下你的需求，看看能不能换过方式实现。不行的话可以用开源的播放器框架video.js等等，重写按钮会简单很多。手机码字不是很规范，谅解。

Answer 2

在需要显示遮盖视频框video的时候

给p设置 宽 高、overflow:hidden;
将video放到上面的p里，并设置position:absolute;top:-100000px; 给置出去p，它就看不见了

在需要显示video时，再设置回position和top的值就行了

我测试了，可以用，我在手机端就这么用的