当我们想以视频作为背景时，其他dom通过定位显示在视频上方，h5页面上调试发现可以正常使用，效果如下：

当放在手机上看，会发现，仅仅剩一个视频，本应在视频上层的元素不见了。

经过一番排查，发现是video的层级相当高，而尝试改改zIndex的方法均失效了。因此针对这种特殊情况，总结了一下几种方法可供尝试：

start 👇

方法1（官网标签）：

用uniapp官方提供的cover-view、cover-image标签实现效果：

<view class="outter"><video src="../../static/超小视频.mp4" :autoplay="true" :loop="true" :muted="true" :controls="false" style="width: 100vw; height: 100vw"><cover-view class="video_menu"><cover-view>hello video</cover-view><cover-view style="margin-top: 50rpx;" class="button">hi</cover-view></cover-view></video>
</view>

.button {width: calc(100% - 60rpx);text-align: center;background-color: #fff;padding: 10rpx 20rpx;color: #000;border-radius: 8rpx;
}

效果：

方法1局限性：只能使用cover-view与cover-image标签，不适用于复杂的页面结构。

方法2（subNVue）：

使用subNVue 原生子窗体解决该问题：

官方参考：uni-app subNVue 原生子窗体开发指南 - DCloud问答

1.在当前页面的同级创建subNVue目录，目录中添加nvue文件，用于书写视频上层的内容

2.在pages.json文件中的页面（本例子中的页面名是video）的style中对subNVue进行注册，参考如下，注意id要唯一，后面要使用：

{"path": "pages/video/video","style": {"navigationBarTitleText": "uni-app","app-plus": {  "subNVues":[{  "id": "myMenu", // 唯一标识  "path": "pages/video/subNVue/myMenu", // 页面路径  "style": {  "position": "absolute",  "dock": "right",  "width": "500rpx",  "height": "300rpx","left": "120rpx","top": "500rpx", "background": "transparent"}  }]  } }
}

3.在创建的nvue文件中，书写要展示的内容，并在钩子函数中调用展示的方法。

myMenu.nvue内容参考如下：

<template><view class="video_menu"><!-- 字体颜色nvue中无法继承，需要单独写一下 --><text class="video_text">hello video</text><button style="margin-top: 50rpx;" class="button">hi</button></view>
</template>
<script>export default {onReady() {const subNVue = uni.getSubNVueById('myMenu');subNVue.show('slide-in-left', 300, function(){  // 可在打开后进行一些操作...  //   });  }}
</script>
<style>.video_menu {background-color: rgba(0, 0, 0, 0.5);font-size: 32rpx;font-weight: 600;padding: 30rpx;}.video_text {color: #ffffff;}
</style>

4.进行好以上操作，无需在video.vue中做任何操作，该subNVue弹窗便可超过在页面中展示出来，效果同上。

方法3（原生画布）：

plus.nativeObj.View()原生画布：

（ps：这种方法不适用于pc端，因此需要手机进行调试，pc端会报 ReferenceError: plus is not defined）

此方法貌似适用于无交互的图形、文字、图片展示；相对较为局限。

这里tag对应的font为字体，img为图片，rect为矩形。

详细相关配置项可参考：HTML5+ API Reference

onLoad() {this.view = new plus.nativeObj.View('video_menu',{top: '120px', // 下面均可用变量控制left: '20px',width: '320px',height: '200px',backgroundColor: 'rgba(0, 0, 0, 0.5)',padding: '30px'},[{tag: 'font',text: 'hello video',position:{top:'30px',left:'30px',height:'50px',},textStyles: {color: '#fff',size: '32px',align: 'left'}},{tag:'rect',color:'#fff',position:{top:'100px',left:'30px',width:'80%',height:'50px',},},{tag: 'font',text: 'hi',position:{top:'100px',left:'50px',width:'90%',height:'50px',},textStyles: {color: '#000',size: '32px',align: 'left'}},]);setTimeout(() => {this.view.show();}, 300);this.view.addEventListener('click',e => {this.view.hide();},false);
}

效果：

方法4（三方库）：

最简单粗暴的方法，使用现有的第三方库dom-video-player：

链接：video-player 视频播放器 html5视频播放器-解决频层级、覆盖 - DCloud 插件市场

1.下载并引入

import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';// 。。。export default {components: {DomVideoPlayer},// 。。。

2.使用DomVideoPlayer，下方为参考：

<template><view class="outter"><!-- #ifdef H5 --><video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" :autoplay="true" :loop="true" :muted="true" :controls="false" style="width: 100vw; height: 100vw"></video><!-- #endif --><!-- #ifndef H5 --><DomVideoPlayer src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"style="width: 100vw; height: 100vw":autoplay="true":controls="false":show-play-btn="false":enable-progress-gesture="false"object-fit="cover":muted="true"loop></DomVideoPlayer><!-- #endif --><view class="video_menu"><text>hello video</text><button style="margin-top: 50rpx;">hi</button></view></view>
</template>

效果：

ok！

目前了解这几种方法，当然肯定还有其他方法，欢迎大家补充~

希望本文会对您有所帮助 ^_^ ~