项目需求:看视频即横屏(全屏)播放,点击物理返回键返回上一页,进度不可拖拽,不使用默认播放控件
问题:点击物理返回键会是横屏(全屏)变竖屏
解决:使用@fullscreenchange
官方说明:
因为需求是一到页面播放视频即需要横屏播放,
<video id="myvideo" @fullscreenchange="fullscreenchange" @ended="ended"></video>
this.videoContext = uni.createVideoContext('myvideo')
this.videoContext.requestFullScreen() //进入全屏
视频正常播放完毕返回上一页或使用自定义的左上角返回键,需要先退出全屏在返回上一页(不退出全屏不能返回,原因我找不到,鶸我)
this.videoContext.exitFullScreen()
uni.navigateBack()
监听视频进入和退出全屏
fullscreenchange(e){
//e.detail.direction vertical竖屏 horizontal横屏
}
但是这个监听在视频正常播放完毕或者使用自定义的返回键也会触发,导致不能区分是这类的正常返回还是物理返回键的返回。后来给一个值(backType)去判断,0物理返回键的返回 1正常返回
改进后
//正常返回的方法
backVideo(){
this.backType = 1
this.videoContext.exitFullScreen()
uni.navigateBack()
},
fullscreenchange(e){
if(e.detail.direction == 'vertical' && this.backType == 0){
this.backVideo()
}
}
over!!!