h5 小程序 video全屏

<template>
  <view>
    <template v-for="item in list">
      <view :key="item.id" class="flex flex-between list-item-box"
            :class="[{'chapter-video-bg0': item.studyFlag},{'chapter-video-bg1': item.id === relevance.studyInfo.curTwoChapterId && relevance.studyInfo.curType === relevance.type }]"
            @click="toVideoDetail(item)">
        <img :src="processImage(relevance.img.bookmark)" alt="bookmark" class="location-ico" />
        <view class="flex flex-between list-item-box-right"
              :class="item.id === relevance.studyInfo.curTwoChapterId && relevance.studyInfo.curType === relevance.type ? '' : 'list-item-box-mr'">
          <view class="chapter-title">
            <text class="text1 two_lines">{{ item.videoName + winHeight }}</text>
            <text class="text2">{{ item.timeDuration }}</text>
          </view>
          <text class="ic list-ico ic-duihao" v-if="item.studyFlag" />
          <text class="ic list-ico ic-suoding" v-else-if="locked(item)" />
          <text class="ic list-ico ic-bofang1" v-else />
        </view>
      </view>
    </template>
    <xr-popup ref="experiencesPopup" type="center" :mask-click="true" @change="close">
      <video
        id="curVideo"
        v-if="isVideo"
        class="video-class"
        :style="{height: isPlay ? winHeight + 'px' : '500rpx'}"
        :src="videoInfo.videoUrl"
        poster="https://file.bendiclass.com/oss/upload/image/png/6ab8e399dce24b4ab5a5e1302fabcfa7.png"
        :title="videoInfo.videoName"
        :autoplay="true"
        @play="play('item')"
        preload="auto"
        :playsinline="env.isIos ? true : false"
        x5-video-player-type="h5"
        :x5-video-orientation="landscape"
        :webkit-playsinline="true"
        :x5-video-player-fullscreen="false"
        @fullscreenchange="fullscreenchange"
        @error="error"
      >
        <cover-view class="cover">掌握</cover-view>
      </video>
    </xr-popup>
<!--    <view class="cover">掌握</view>-->
  </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'KnowledgeItem',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    relevance: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      videoInfo: {},
      videoContext: {},
      playbackProgress: 0,
      objectFit: 'fill',
      isVideo: false,
      winHeight: 0,
      isPlay: false,
      landscape: 'landscape'
    }
  },
  computed: {
    ...mapState(['userInfo', 'studyPackage', 'systemInfo', 'env'])
  },
  mounted () {
    this.videoContext = uni.createVideoContext('curVideo', this)
    const systemInfo = uni.getSystemInfoSync()
    this.winHeight = systemInfo.screenWidth
  },
  methods: {
    fullscreenchange (event) {
      console.log(event)
      if (event.detail.fullScreen) {
        this.objectFit = 'contain'
      } else {
        uni.setNavigationBarTitle({ title: '章节详情' })
        this.videoContext.pause()
        this.isVideo = false
        this.isPlay = false
        this.$refs.experiencesPopup.close()
      }
    },
    error () {
      uni.showToast({ icon: 'none', title: '播放失败' })
    },
    getVideoTimes () {
      if (this.videoInfo.isKnow && this.env.isWeixin) return
      const times = this.videoInfo.timeDuration && this.videoInfo.timeDuration.split(':')
      if (times) {
        if (times.length === 3) {
          this.playbackProgress = Number(times[0]) * 3600 + Number(times[1]) * 60 + Number(times[2])
        } else if (times.length === 2) {
          this.playbackProgress = Number(times[0]) * 60 + Number(times[1])
        } else {
          this.playbackProgress = Number(times[0])
        }
      }
    },
    play (event) {
      uni.flux.utils.notWifiNetworkTip()
      this.isVideo = true
      uni.showLoading({
        title: '视频加载中'
      })
      setTimeout(() => {
        this.videoContext.requestFullScreen()
        uni.hideLoading()
        uni.setNavigationBarTitle({ title: this.videoInfo.videoName })
        this.isPlay = true
      }, 500)
      uni.flux.track.PackageVideoPlay({
        property: {
          video_type: this.relevance.tpye === 1 ? '课后巩固' : '重点题型精讲',
          grade: this.studyPackage.gradeName,
          book_name: this.studyPackage.bookName || ''
        }
      })
    },
    pause () {
      uni.setNavigationBarTitle({ title: this.title })
    },
    open () {
      this.$refs.experiencesPopup.open()
    },
    close () {
      this.pause()
      uni.setNavigationBarTitle({ title: '章节详情' })
    },
    locked (item) {
      return !this.studyPackage.isBuy && this.studyPackage.freeTimes <= 0 && !item.isUnlock
    },
    processImage (imgSrc) {
      return uni.flux.utils.processImage(imgSrc)
    },
    timeupdate (event) {
      // if (!this.videoInfo.isKnow) {
      //   const curTime = parseInt(event.detail.currentTime)
      //   if (curTime && this.playbackProgress) {
      //     if (curTime / this.playbackProgress >= 0.9) {
      //       this.$api.study.knowVideo({ videoId: this.videoInfo.id }).then(() => {
      //         this.videoInfo.isKnow = true
      //         console.log(this.videoInfo.isKnow, 1111111111)
      //       })
      //     }
      //   }
      // }t
    },
    changeCurTwoChapter (item) {
      this.$emit('change', { id: item.id, curType: this.relevance.type })
      uni.setStorage({
        key: 'curTwoChapter',
        data: Object.assign(item, { type: this.relevance.type })
      })
    },
    toVideoDetail (item) { // 跳转视频详情页
      // uni.flux.track.ChapterDetailSecClick({
      //   property: {
      //     book_name: this.studyPackage.bookName || '',
      //     grade: this.studyPackage.gradeName || '',
      //     is_paid: this.studyPackage.isBuy ? 1 : 0
      //   }
      // })
      if (!this.locked(item)) {
        this.changeCurTwoChapter(item) // 更改当前状态值
        // this.play()
        // 记录视频学习
        this.$api.study.addVideoReaderStudyRecord({
          videoId: item.id
        })

        this.$api.study.unlockVideo({
          studyPackageId: this.studyPackage.studyPackageId,
          videoId: item.id
        }).then(() => {
          item.isUnlock = true
          this.videoInfo = item
          this.isVideo = true
          uni.setNavigationBarTitle({ title: this.videoInfo.videoName })
          this.getVideoTimes()
          this.open()
        })
        // 跳转视频详情页
        // uni.navigateTo({
        //   url: `/pages/study-package/book/video/index?bookId=${this.studyPackage.bookId}&studyPackageId=${this.studyPackage.studyPackageId}&chapterId=${item.id}`
        // })
      } else {
        // 跳转购买页面
        uni.navigateTo({
          url: `/pages/study-package/quiz/payment?bookId=${this.studyPackage.bookId}&studyPackageId=${this.studyPackage.studyPackageId}&chapterId=${this.relevance.studyInfo.chapterId}`
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.video-class{
  width: 500rpx;
  height: 200px;
  //position: fixed;
  //top: 0rpx;
  //left: 0rpx;
  //width: 100%;
  //z-index: 9999;
  position: relative;
}
.cover{
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 20px;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  background: pink;
  z-index: 9999999;
}
.list-item-box {
  margin: 28rpx 0 0 0rpx;
  .list-item-box-right {
    width: 566rpx;
    height: 116rpx;
    border-radius: 65rpx;
    background: #f4f6f9;
    .chapter-title {
      width: 360rpx;
      margin-left: 50rpx;
      text-align: left;
      .text1 {
        -webkit-line-clamp: 1;
        color: #2c2c2c;
        font-weight: 500;
        font-size: 28rpx;
      }
      .text2 {
        display: block;
        color: #515151;
        font-size: 20rpx;
      }
    }
    .list-ico {
      margin-right: 50rpx;
      font-size: 44rpx;
      color: #4989ff;
    }
    .ic-suoding {
      opacity: 0.42;
    }
  }
  .list-item-box-mr {
    margin-left: 56rpx;
  }
}
.location-ico {
  width: 56rpx;
  height: 42rpx;
  z-index: 2;
  display: none;
}

.chapter-video-bg0 {
  .list-item-box-right {
    background: #f1f9fe;
  }
}

.chapter-video-bg1 {
  .list-item-box-right {
    background: #f1f9fe;
    border: 2px solid #4989ff;
  }
  .location-ico {
    display: block;
  }
}

.video-box {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  video {
    width: 100%;
  }
}
.myVideo {
  position: relative;
  z-index: 99999;
}
.cover-view {
  position: absolute;
  top: 10px;
  right: 20px;
  background: pink;
}
</style>