uni-app或源生微信小程序通过点击事件直接全屏播放视频

最近连续两个小程序项目都有通过点击图标或者其他点击事件全屏播放视屏的需求 刚开始的时候也是一头雾水，通过一步步采坑终于解决 现将代码以及步骤分享一下 不喜勿喷

首先我的需求是点击视频直接全屏并且进入播放状态 退出时关闭视频播放 并且页面上的视屏也不能播放
1，html代码

 <view class="other_cont">
          <scroll-view scroll-x="true" class="other_scr">
            <template v-for="(item, index) in planData.fileUrl">
              <view class="other_item" v-if="index < 5" :key="index">
                <view class="z-index" @click="videoshow(item)"></view>
                <video :src="imgUrl + item" controls="false"></video>
                <!-- <image :src="imgUrl + item.img" mode=""></image> -->
              </view>
            </template>
          </scroll-view>
        </view>
        //这里是全屏播放视频的盒子    注意id='你自己的命名'   必写
         <view v-if="videoplay">
        <video
          controls
          id="myvideo"
          :src="videoUrl"
          @fullscreenchange="screenChange"
        ></video>
      </view>

2.js部分

//这里我用的是uniapp   vue语法  
data(){
return {
 videoplay: false, //通过是否播放控制播放盒子显示隐藏
      videoUrl: "", //全屏播放视频的URL
}
},
// 这里myvideo 是你上面命名的id    
 onReady: function () {
    this.videoContext = uni.createVideoContext("myvideo", this);    // this这个是实例对象  必传
  },
  method:{
screenChange(e) {
      let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
      console.log(e, "qweeee========================================");
      if (!fullScreen) {
        //退出全屏
        this.videoplay = false;   // 隐藏播放盒子
      }
    },
    videoshow(e) {
    //e 是通过点击事件拿到的视屏地址
      this.videoUrl =e;
      this.videoContext.requestFullScreen({ direction: 90 });  //direction: 90  这个是控制全屏的时候视屏旋转多少度 
      this.videoContext.play();
      this.videoplay = true;  // 显示播放盒子
    },
}

到这里基本就可以实现这个功能啦 css部分我就不写了 这个样式可以根据你自己的需求进行调整

来看下效果吧
视频连接 ： https://image.wedoss.com/1617269856415.0227f1e83aeca9b70012b45d90700c506c00.mp4