uni-app的video标签全屏播放问题

Question

我在使用uni-app的video标签的时候使用微信开发者工具模拟不能够全屏然后我使用了@fullscreenchange结果会执行两次，一点全屏就会闪一下，请问一下怎样实现video的全屏和非全屏的切换啊

<video id="myVideo" 
:src=selectLookBack.info.remote_url 
style="width: 100%;" 
v-if="showVideo" 
autoplay="true"     
@fullscreenchange="fullScreen">
</video>

fullScreen:function(e){
  console.log("进入123")
  console.log(e)
  var videoContext = wx.createVideoContext('myvideo', this);
  if(!this.fullScreenStatus){
      console.log("进入if")
      videoContext.requestFullScreen();
      this.fullScreenStatus=true
  }else{
      console.log("进入else")
      videoContext.exitFullScreen(); 
      this.fullScreenStatus=false
  }
}

Answer 1

<template>
    <view>
        <video id="myVideo" :class="{ qp: isFullscreen }"
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
            @fullscreenchange="fullscreenchange"></video>
    </view>
</template>
  
<script>
export default {
    data() {
        return {
            isFullscreen: false,
            isFullscreen2: false,
            originalStyle: {},
            fullscreenStyle: { position: 'fixed', top: '0', left: '0', width: '100%', height: '100%' }
        }
    },
    methods: {
        sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        },
        async fullscreenchange(e) {
            console.log(e.detail.fullScreen)
            if (e.detail.fullScreen == false && this.isFullscreen2 == true) {
                this.isFullscreen = false;
                await this.sleep(500)
                this.isFullscreen2 = false;
            } else {
                this.isFullscreen = true;
                await this.sleep(500)
                this.isFullscreen2 = true;
            }
        }
    }
}
</script>


<style>
.qp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
</style>

Answer 2

你好请问解决了嘛，我也遇到了这个问题