小青苔基地app2022-08-19

uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路

前一阵子用了videojs作为视频播放器，之前为了页面的美观性，把播放器本身的工具栏隐藏了，也就是说播放按钮、全屏按钮等等需要自定义，对于播放、暂停之类的操作，videojs本身是有API的，用起来也挺方便的，但是全屏没有发现有API方法，后来网上查了好多资料，发现全屏以及退出全屏对于所有元素其实都是适用的，一般来说，全屏是：element.requestFullscreen()，退出全屏是：document.exitFullscreen()，并且为了兼容不同浏览器有不同的方法。但是试了安卓是正常的，iOS里面不能全屏，所以只能考虑其他方案了，后来在想，视频全屏无非就是想把视频显示区域放大，那我手动放大显示区域行不行呢，于是试了一下，感觉还行。效果如下：

效果

一、思路

自定义全屏按钮，点击全屏按钮放大视频显示区域，增加旋转动画

每次点击之后记录当前是否处于全屏模式的状态，通过此状态动态调整进入全屏-退出全屏的图标

全屏之后，需要调整视频播放区域的层级以及高度等，以便于全屏之后能够操作视频上的按钮等

二、代码

1.播放器外层容器定义动态样式，播放器本身增加动画

<!-- 示例代码 -->
<!-- 播放器显示区域 -->
    <!-- #ifdef H5 -->
    <view
      class="video-display-wrap"
      :style="{ height: videoDisplayHeight, zIndex: videoDisplayZIndex }"
    >
      <view
        class="video-js"
        :class="{
          'video-rotate-ani': isFullScreen,
          'video-rotate-back-ani': !isFullScreen && !isFirstLoad
        }"
        ref="video"
        style="width: 100%; height: 100%"
      ></view>

      <!-- 返回按钮 -->
      <image
        v-if="isFullScreen"
        :src="resource.backBtnIcon"
        mode="heightFix"
        class="full-screen-btn-icon back-btn"
        @tap.stop="switchFullScreen"
      ></image>
      <!-- 返回按钮 -->

      <!-- 播放按钮 -->
      <image
        v-if="isShowPlayBtn"
        :src="resource.playBtnIcon"
        mode="heightFix"
        class="play-btn-icon"
        @tap.stop="playVideo"
      ></image>
      <!-- 播放按钮 -->

      <!-- 全屏小按钮 -->
      <image
        v-if="isShowFullBtn"
        :src="videoFullScreenIcon"
        mode="heightFix"
        class="full-screen-btn-icon"
        :class="{ 'video-full-icon-pos': isFullScreen }"
        @tap.stop="switchFullScreen"
      ></image>
      <!-- 全屏小按钮 -->

    </view>
    <!-- #endif -->
    <!-- 播放器显示区域 -->

2.定义变量记录当前是否处于全模式

data() {
    return {
          //资源图标
          resource: {
          ...
          //播放按钮图标
          playBtnIcon:
              this.$cnf.resDomains.image +
                  '/1/20102/2022/0418/625cee3f79c73v4lb.png',
          //进入全屏按钮图标
          enterFullScreenIcon:
              this.$cnf.resDomains.image +
                  '/1/20102/2022/0504/62722edb0420at1hj.png',
          //退出全屏按钮图标
          exitFullScreenIcon:
              this.$cnf.resDomains.image +
                  '/1/20102/2022/0506/6273f4d06f96cgu6s.png',
          //全屏的时候返回按钮
          backBtnIcon:
              this.$cnf.resDomains.image +
                  '/1/20102/2022/0506/6274d2b32b769kgeb.png'
          },
          //当前是否是全屏模式
          isFullScreen:false,
          //定义页面是否首次加载（默认是首次加载）
          isFirstLoad:true,
          //活动数据(业务中用到)
          activityDetail:{}
          ...
    }
}

3.切换全屏方法

//切换视频全屏
switchFullScreen() {
    if (this.isFirstLoad) {
      //标记已经不是首次加载了，避免首次页面加载的时候播放器有旋转的动画
      this.isFirstLoad = false
    }
    this.isFullScreen = !this.isFullScreen
},

4.页面样式控制的相关计算属性

computed: {
    //视频显示区域的层级
    videoDisplayZIndex() {
      //如果是横屏模式并且当前是全屏模式
      if (this.activityDetail.style.mode == 2 && this.isFullScreen) {
        return 10075
      } else {
        return 999
      }
    },
    //视频显示区域高度
    videoDisplayHeight() {
       //如果是横屏模式并且当前是全屏模式
      if (this.activityDetail.style.mode == 2 && this.isFullScreen) {
        const systemInfo = uni.getSystemInfoSync()
        return systemInfo.windowHeight + 'px'
      } else {
        return 'auto'
      }
    },
    //视频全屏/退出全屏图标
    videoFullScreenIcon() {
      if (this.isFullScreen) {
        return this.resource.exitFullScreenIcon
      } else {
        return this.resource.enterFullScreenIcon
      }
    },
   ...
}

5.部分css样式

//视频显示区域样式
.video-display-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000;
    overflow: hidden;
    .play-btn-icon {
      position: absolute;
      z-index: 999;
      width: 100rpx;
      height: 100rpx;
    }
    .full-screen-btn-icon {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      z-index: 999;
      width: 50rpx;
      height: 50rpx;
    }
    .back-btn {
      top: 30rpx;
      right: 30rpx;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
}

//进入全屏的旋转放大动画
.video-rotate-ani {
  animation: videoRotateAni 0.8s 1 forwards;
  @keyframes videoRotateAni {
    0% {
      transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
    }
    100% {
      transform: rotate(90deg) scale(1.77);
      -webkit-transform: rotate(90deg) scale(1.77);
    }
  }
}

//退出全屏的动画
.video-rotate-back-ani {
  animation: videoRotateBackAni 0.8s 1 forwards;
  @keyframes videoRotateBackAni {
    0% {
      transform: rotate(90deg) scale(1.77);
      -webkit-transform: rotate(90deg) scale(1.77);
    }
    100% {
      transform: rotate(0deg) scale(1);
      -webkit-transform: rotate(0deg) scale(1);
    }
  }
}
//动态调整全屏按钮的位置
.video-full-icon-pos {
  left: 30rpx !important;
  bottom: 30rpx !important;
}