<view style="position: relative;"><video style="position: absolute;z-index:-1"></video><view style="position: absolute;z-index:999"></view>
</view>
上面代碼并沒有解決view的層級比video高的問題,普通的view無法設置z-index層級比video高,在翻uniapp的官網的時候,發現一個標簽可以解決。
官網原話:
-
<video/>
?組件在非H5端是原生組件,層級高于普通前端組件,覆蓋其需要使用cover-view組件或plus.nativeObj.view、subNVue。微信基礎庫 2.4.0+和抖音小程序 已支持 video 組件的同層渲染,也就是video在非全屏時,可以被前端元素通過調節z-index來遮擋,但video全屏時,仍需要cover-view覆蓋。
覆蓋在原生組件上的文本視圖。
app-vue和小程序框架,渲染引擎是webview的。但為了優化體驗,部分組件如map、video、textarea、canvas通過原生控件實現,原生組件層級高于前端組件(類似flash層級高于div)。為了能正常覆蓋原生組件,設計了cover-view。
<view style="position: relative;"><video style="position: absolute;z-index:-1"></video><cover-view style="position: absolute;z-index:999"></cover-view>
</view>
改成上面這樣即可?