直接上代码
<video id="myVideo" class="course-head-img video" :src="currentVideo.url" autoplay controls @timeupdate="videoTimeUpdateEvent" @fullscreenchange="videoControl">
</video>
</video>
// 先声明
mounted() {
获取当前视频
this.videoContext = uni.createVideoContext('myVideo', this)
},
// 当视频进入和退出全屏时触发
videoControl(e) {
console.log('eee', e.detail.fullScreen)
if (e.detail.fullScreen) {
}
if (!e.detail.fullScreen) {
this.videoContext.pause(); //终止视频
this.popupvideo = false //关闭视频弹窗
}
},
// 打开视频直接进入全屏（横屏）
this.popupvideo = true //打开视频弹窗
this.videoContext = uni.createVideoContext('myVideo', this);
this.videoContext.requestFullScreen(); 打开视频直接进入全屏（横屏）
this.videoContext.requestFullScreen({direction: 0}); 打开视频直接进入全屏（半黑屏）
上述选其一即可
this.videoContext.play() 视频播放
注：（不建议直接使用@play方法进入全屏，虽可实现进入全屏横屏，但无法直接收回全屏横屏，收回需先暂停视频再点击收回，直接收回会与视频播放暂停有冲突）
