dialogPage页面终嵌入video标签然后video全屏时dialogPage页面还是在最顶层

dialogPage页面终嵌入video标签然后video全屏时dialogPage页面还是在最顶层

1 回复

在uni-app中处理video全屏时dialogPage仍显示在最顶层的问题,可以通过以下方法解决:

  1. 使用原生video组件替代webview中的video标签:
<video id="myVideo" controls></video>
  1. 在页面生命周期中监听全屏事件:
onReady() {
  this.videoContext = uni.createVideoContext('myVideo')
  this.videoContext.on('fullscreenchange', (e) => {
    if(e.fullScreen) {
      // 全屏时隐藏dialog
      this.showDialog = false
    } else {
      // 退出全屏时恢复dialog
      this.showDialog = true
    }
  })
}
  1. 或者使用CSS强制隐藏dialog:
/* 全屏时隐藏dialog */
video:-webkit-full-screen + .dialog {
  display: none !important;
}
回到顶部