android-cloud-H5/pages/activity/invite-user/guide.vue

<template>
  <div class="bg2C2C2D">
    <video v-for="item in topADList" id="ad" :key="item.id" class="w345h120" :poster="item.imgUrls[0]" :src="item.videoUrl" @click="playAd()" />
    <div v-for="item in videoList" :key="item.plateId">
      <div class="fs16">{{item.plateName}}</div>
      <div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
        <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card">
          <video :id="'el-video-' + ele.id" class="w165h148" :x5-video-player-fullscreen="true" x5-video-player-type="h5" style="object-fit:fill" x5-video-orientation="landscape|portrait" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
          <div class="video-card-title">{{ele.videoName}}</div>
        </div>
      </div>
    </div>
    <!-- <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div> -->
  </div>
</template>

<script>
import { fileKeyToUrl } from '@/plugins/file-center.js';
export default {
  name: 'Guide',
  auth: false,
  data() {
    return {
      videoList: [],
      topADList: [],
      token: ''
    }
  },
  async fetch() {
    if (this.$userAgent.isAndroid) {
      this.token = await window.native.getToken();
    } else {
      this.token = this.$route.query.token;
    }
  },
  computed: {
    videoURL() {
      return (key) => {
        return fileKeyToUrl(key)
      }
    }
  },
  created() {
    this.getActiveInfo()
    this.getAdInfoByAdPlace()
  },
  methods: {
    async getActiveInfo() {
      const res = await this.$axios.$get('/activity/videoCourse/client/list');
      this.videoList = res.data;
    },
    async getAdInfoByAdPlace() {
      const data = {
        adPlace: 20,
        os: 1
      }
      const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', data);
      this.topADList = res.data;
    },
    play(item, ele) {
      const elVideo = document.getElementById('el-video-' + ele.id)
      if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
        elVideo.play()
      } else if (elVideo.mozRequestFullscreen) {
        elVideo.mozRequestFullscreen()
        elVideo.play()
      } else if (elVideo.msRequestFullscreen) {
        elVideo.msRequestFullscreen()
        elVideo.play()
      } else if (elVideo.webkitRequestFullscreen) {
        elVideo.webkitRequestFullscreen()
        elVideo.play()
      } else {
        elVideo.requestFullscreen()
        elVideo.play()
      }
      elVideo.addEventListener("webkitfullscreenchange", function (e) {
        if (!document.webkitIsFullScreen) {// 退出全屏暂停视频
          elVideo.pause();
        };
      }, false);

      elVideo.addEventListener('ended', function () {
        document.webkitCancelFullScreen(); // 播放完毕自动退出全屏
      }, false);
      this.submit(item, ele, 1)
    },
    playAd(item, ele) {
      const elVideo = document.getElementById('ad')
      if (elVideo.requestFullscreen) {
        elVideo.requestFullscreen()
        elVideo.play()
      } else if (elVideo.mozRequestFullscreen) {
        elVideo.mozRequestFullscreen()
        elVideo.play()
      } else if (elVideo.webkitRequestFullscreen) {
        elVideo.webkitRequestFullscreen()
        elVideo.play()
      }
      this.submit(item, ele, 2)
    },
    submit(item, ele, flag) {
      const data = flag === 1 ? { id: ele.id, plateId: item.plateId, type: flag, videoId: ele.id } : { type: 2 }
      this.$axios.$post('/activity/videoCourse/statistics/save', data, { headers: { Authorization: this.token } });
    }
  }
}
</script>

<style lang="scss" scoped>
.video-player--is-cssfullscreen {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999;
}
.video-card {
  width: 165px;
  height: 148px;
  border-radius: 5px;
  position: relative;
  & .video-card-title {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1e;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0 9px 9px;
  }
}
.bg2C2C2D {
  background-color: #1c1c1e;
  min-height: 100vh;
  overflow: hidden;
}
.w345h120 {
  width: 345px;
  height: 120px;
  margin: 15px;
}
.fs16 {
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.jcjc-list {
  padding: 0 15px;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  margin: 15px 0;
  .video-card {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.fs16::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 14px;
  background: #3b7fff;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  margin-right: 6px;
}
.w144h140 {
  width: 144px;
  height: 140px;
  margin-right: 10px;
}
.w144h140:last-child {
  margin-right: 0;
}
.jjjc-list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 15px;
}
.w165h148 {
  width: 165px;
  height: 148px;
  object-fit: contain;
  margin-bottom: 15px;
  border-radius: 10px;
}
.return {
  width: 42px;
  height: 42px;
  margin-left: 20px;
  margin-bottom: 40px;
  &.out {
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(
      46deg,
      rgba(48, 49, 53, 1),
      rgba(113, 116, 127, 1)
    );
    box-shadow: 0px 9px 17px 0px rgba(0, 0, 0, 0.5);
  }
  .in {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #232427 0%, #4b4c52 100%);
    opacity: 1;
    text-align: center;
    line-height: 40px;
  }

  img {
    width: 16px;
    height: 16px;
  }
}
</style>