当我们想以视频作为背景时，其他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！
目前了解这几种方法，当然肯定还有其他方法，欢迎大家补充~
希望本文会对您有所帮助 ^_^ ~