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的值就行了

我測試了，可以用，我在手機端就這麼用的