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

Question

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

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

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

Answer 1

I also tried this problem. Overlaying on the native video tag may not be possible because the page after playing will automatically go to the top level (this is what I tested, there may be other methods). My suggestion is to carefully analyze your needs and see if you can implement them in a different way. If not, you can use the open source player framework video.js, etc. It will be much easier to rewrite the button. The phone code is not very standardized, sorry for that.

Answer 2

When you need to display the video with the masked video box

Set the width, height, and overflow:hidden for p;
Put the video into the p above, and set position:absolute;top:-100000px; If you set p, it will be invisible

When you need to display the video, just set back the position and top values ​​

I tested it and it works. This is how I use it on my mobile phone