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"
        autoplay
      ></video>
      <view class="title text_twoLine">
        {{ videoPopList.Title }}
      </view>
    </view>
    <view class="close-icon">
      <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,
    };
  },
  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 : 1, 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.$parent.showVideoPop = false;
      this.$emit("update:showVideoPop",false);
    },
  },
};
</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;
    }
  }
}
</style>