dialogPage页面终嵌入video标签然后video全屏时dialogPage页面还是在最顶层
dialogPage页面终嵌入video标签然后video全屏时dialogPage页面还是在最顶层
1 回复
在uni-app中处理video全屏时dialogPage仍显示在最顶层的问题,可以通过以下方法解决:
- 使用原生video组件替代webview中的video标签:
<video id="myVideo" controls></video>
- 在页面生命周期中监听全屏事件:
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
this.videoContext.on('fullscreenchange', (e) => {
if(e.fullScreen) {
// 全屏时隐藏dialog
this.showDialog = false
} else {
// 退出全屏时恢复dialog
this.showDialog = true
}
})
}
- 或者使用CSS强制隐藏dialog:
/* 全屏时隐藏dialog */
video:-webkit-full-screen + .dialog {
display: none !important;
}