uni-app通过点击事件直接全屏播放视频

一、背景：项目需求，点击元素直接全屏播放视频，退出全屏关闭视频。

二、代码

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

记录于2021-09-23。