horzi_rai_wxa/components/videoModule/index.vue

<template>
  <view class="container global-video-box" v-if="showVideoPop">
    <view class="video-content">
      <video
        :id="videoPopList.Id"
        :src="videoPopList.ResourceUrl"
        :poster="videoPopList.BackgroundImg"
        enable-play-gesture
        :custom-cache="false"
        object-fit="contain"
        show-mute-btn
        @ended="handleVideoEnd"
        @timeupdate="handleVideoTimeUpdate"
        @fullscreenchange="handleFullscreenchange"
        autoplay
      >
        <view class="video-inner-right-box" v-if="isShowControls">
          <!-- 倍速控制按钮 -->
          <view class="video-speed-btn" @click.stop="showSpeedOpt = true">倍速</view>
        </view>

        <!-- 倍速选项模块 -->
        <view class="speed-opt-box" v-if="showSpeedOpt">
          <view class="item" :style="{ color: item == curSpeed ? '#F3A52F' : '' }" v-for="item in speedOpts" :key="item" @click.stop="handleVideoSpeedChange(item)">{{ item }}X</view>
        </view>
      </video>
      <view class="title text_twoLine">
        {{ videoPopList.Title }}
      </view>
    </view>
    <view class="close-icon" v-if="showCloseBtn">
      <image @click="handleShow" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close-icon.png"> </image>
    </view>
  </view>
</template>

<script>
import { Home } from "@/config/api";
export default {
  name: "",
  filters: {},
  components: {},
  props: {
    showVideoPop: {
      default: false,
      type: Boolean,
    },
    videoPopList: {
      default: {},
      type: Object,
    },
  },
  computed: {
    curVideoId() {
      return this.$store.state.videoPlay.playVideoId;
    },
    activityVideoId() {
      return this.$store.state.videoPlay.playVideoActId;
    },
  },
  data() {
    return {
      videoContext: null,
      curVideoTime: 0,
      showSpeedOpt: false,
      speedOpts: ["0.5", "0.8", "1.0", "1.25", "1.5", "2.0"],
      curSpeed: "1.0",
      isShowControls: false, //是否显示视频的控制栏
      showCloseBtn: true,
    };
  },
  watch: {
    showVideoPop: {
      handler(newVal) {
        if (newVal) {
          setTimeout(() => {
            this.handelVideoPlayChild();
          }, 300);
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    //视频的播放事件
    handelVideoPlayChild() {
      this.videoContext = wx.createVideoContext(this.videoPopList.Id.toString(), this);
      Home.microAideoHistoryAdd({ SourceId: this.videoPopList.ActivityId || this.videoPopList.Id, SourceType: this.videoPopList.ActivityId ? 2 : 3, PageRouter: this.$store.state.pageRouterReport });
      this.curVideoTime = 0;
      if (this.curVideoId == this.videoPopList.Id || this.activityVideoId == this.videoPopList.ActivityId) {
        this.curVideoTime = this.$store.state.videoPlay.palyCurrentTime;
      }
      this.videoContext.seek(this.curVideoTime);
      this.videoContext.play();
    },
    //视频播放结束
    handleVideoEnd() {
      // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
      this.curVideoTime = 0;
      this.$store.commit("videoPlay/palyTimeUpdate", 0);
      this.videoContext.exitFullScreen();
    },
    handleVideoTimeUpdate(e) {
      let time = parseInt(e.detail.currentTime);
      this.$store.commit("videoPlay/palyTimeUpdate", time);
    },
    handleShow() {
      this.showSpeedOpt = false;
      this.curSpeed = "1.0";
      // this.$parent.showVideoPop = false;
      this.$emit("update:showVideoPop", false);
    },
    // 倍速切换
    handleVideoSpeedChange(item) {
      const num = Number(item);
      this.videoContext.playbackRate(num);
      this.curSpeed = item;
      this.showSpeedOpt = false;
    },
    handleFullscreenchange(e) {
      this.showCloseBtn = !e.detail.fullScreen;
      this.isShowControls = e.detail.fullScreen;
    },
  },
};
</script>
<style scoped lang="scss">
.global-video-box {
  display: flex;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 111;
  background-color: rgba(0, 0, 0, 0.7);
  .video-content {
    position: absolute;
    top: 500rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 456rpx;
    background-color: #fff;
    z-index: 112;
    font-size: 28rpx;
    color: #333333;
    video {
      width: 100%;
      height: 340rpx;
    }
    .title {
      padding: 15rpx 0 0 15rpx;
    }
  }
  .close-icon {
    position: absolute;
    width: 95%;
    height: 48rpx;
    top: 430rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 112;
    display: flex;
    justify-content: flex-end;
    z-index: inherit;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
  .video-inner-right-box {
    position: absolute;
    bottom: 30%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .video-speed-btn {
    width: 80rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 22rpx;
    color: #fff;
    font-size: 12px;
  }
  .speed-opt-box {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 55rpx;
    .item {
      color: #fff;
      font-size: 26rpx;
      flex: 1;
      width: 100%;
      text-align: center;
    }
  }
}
</style>