陪玩系统源码开发,通过点击事件直接实现全屏播放视频

一、背景

陪玩系统源码支持用户在动态广场中上传视频文件,也支持在私聊模块中发送视频文件,用户对视频文件的观看时有全屏展现需求的,所以我们需要通过点击陪玩系统源码的一些元素直接实现全屏播放视频,以及退出全屏关闭视频。

二、代码

<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;  // 显示播放盒子
}

通过上述代码就能轻松实现了,以上就是“陪玩系统源码开发,通过点击事件直接实现全屏播放视频”的全部内容,希望能对大家开发陪玩系统源码提供帮助。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值