一、背景
陪玩系统源码支持用户在动态广场中上传视频文件,也支持在私聊模块中发送视频文件,用户对视频文件的观看时有全屏展现需求的,所以我们需要通过点击陪玩系统源码的一些元素直接实现全屏播放视频,以及退出全屏关闭视频。
二、代码
<view v-if="videoPlay">
<video
controls
id="myvideo"
:src="videoUrl"
@fullscreenchange="screenChange"
></video>
</view>
data() {
return {
videoPlay: false,
videoUrl: ''
}
}
screenChange(e) {
let fullScreen = e.detail.fullScreen; // 值true为进入全屏,false为退出全屏
console.log(e, "全屏");
if (!fullScreen) {
//退出全屏
this.videoPlay = false; // 隐藏播放盒子
}
},
// 触发全屏播放的点击事件
videoShow(item) {
this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
console.log(item)
this.videoUrl = item.video_path;
this.videoContext.requestFullScreen({ direction: 90 });
this.videoContext.play();
this.videoPlay = true; // 显示播放盒子
}
通过上述代码就能轻松实现了,以上就是“陪玩系统源码开发,通过点击事件直接实现全屏播放视频”的全部内容,希望能对大家开发陪玩系统源码提供帮助。