vue h5 移动端的video 在安卓机上层级太高

Question

如上图，在苹果手机上看 ，举一个例子：蓝色的x 播放的时候是可以显示在video 上面的，但是安卓机就不可以了，所以想要兼容安卓机的x 也可以显示出来。
代码如下

<template>
    <div>
    <section  class="test-section">
        <p class="test-p">x</p>
         <video 
            class="video-js"
            webkit-playsinline="true" x5-playsinline="true" 
            controls playsinline="true" 
          
            src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"
            width="500" 
            height="300">
          </video>
    </section>
    </div>
</template>
<script>
export default {
    data(){
        return {
           
        }
    },
    methods:{
       
    }
}
</script>
<style lang="less" scoped>
.test-section{
    position: relative;
    .video-js{
        position: absolute;
        top: 0px;
        left:0px;
        z-index: 99;
    }
    .test-p{
        color: blue;
        font-size: 60px;
        position: absolute;
        top:.5rem;
        right: 50%;
        z-index: 100;
    }
}
</style>

Answer 1

放弃吧 无解