uni-app 视频播放 监听手机横屏竖屏进行全屏播放

文档 点击查看
博客 点击查看

<template>
  <view class="page1">
        <video
          src="http://vjs.zencdn.net/v/oceans.mp4"
          id="popupVideoPlayer"
          @timeupdate="getVideoTime($event, 1)"
          page-gesture
          enable-play-gesture
          @fullscreenchange="fullscreenchange"
        ></video>
  </view>
</template>

<script type="text/ecmascript-6">
export default {
 
  data() {
    return {
     
    };
  },
  onShow(){
    this.playPopupVideo()
  },
  methods: {
    // 弹窗关闭暂停播放视频
    closePopupVideo() {
      // 暂停视频
      uni.createVideoContext("popupVideoPlayer", this).pause();
      this.swiperVideoPlay(this.videoCurrent);
      wx.offAccelerometerChange()
    },
    playPopupVideo(url) {
        uni.createVideoContext("popupVideoPlayer", this).play();
        // 处发监听横竖屏
        this.listeningMobileShake()
    },
    // 监听手机是否横屏竖屏
    listeningMobileShake() {
      let lastState = 0;
      let lastTime = Date.now();
      wx.startAccelerometer();
      wx.onAccelerometerChange((res) => {
        const now = Date.now();
        // 500ms检测一次
        if (now - lastTime < 500) {
          return;
        }

        lastTime = now;

        let nowState;

        // 57.3 = 180 / Math.PI

        const Roll =
          Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;

        const Pitch = Math.atan2(res.y, res.z) * 57.3;
        // 横屏状态

        if (Roll > 50) {
          if ((Pitch > -180 && Pitch < -60) || Pitch > 130) {
            nowState = 1;
          } else {
            nowState = lastState;
          }
        } else if ((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {
          let absPitch = Math.abs(Pitch);
          // 如果手机平躺，保持原状态不变，40容错率
          if (absPitch > 140 || absPitch < 40) {
            nowState = lastState;
          } else if (Pitch < 0) {
            /*收集竖向正立的情况*/

            nowState = 0;
          } else {
            nowState = lastState;
          }
        } else {
          nowState = lastState;
        }
        // 状态变化时，触发
        if (nowState !== lastState) {
          lastState = nowState;
          if (nowState === 1) {
            console.log("change:横屏");
             this.videoFullScreenPlay()
          } else {
             this.videoExitFullScreen()
            console.log("change:竖屏");
          }
        }
      });
    },
    // 全屏播放
    videoFullScreenPlay() {
      console.log("处发全波那个");
      let video = uni.createVideoContext("popupVideoPlayer", this);
      video.requestFullScreen();
      video.play();
    },
    // 退出全屏播放
    videoExitFullScreen(){
      let video = uni.createVideoContext("popupVideoPlayer", this);
      video.exitFullScreen()
    },
    // 处发全屏事件
    fullscreenchange(e) {
      console.log("监听横屏");
    },

     // 250ms一次获取当前视频播放进度
    getVideoTime(e) {
      // 获取视频播放进度
      // console.log(e)

    },
  },
};
</script>
<style lang="less" scoped>
</style>