soulspace/pages/curriculum/order/videoDetail.vue

<template>
  <view class="container commonPageBox commonDetailPage" style="position: relative;">
    <video
      @fullscreenchange="fullscreenchange"
      @timeupdate="videoTimeUpdateEvent($event)"
      ref="videos"
      style="width: 100%; height: 100%"
      autoplay
      id="videoId"
      
      object-fit="contain"
      class="video-box"
      :src="videoUrl"
      :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
      @play="playVideo"
    >
  </video>
  
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  components: {
    courseDescription, //课程说明
  },
  data() {
    return {
      timer: null,
      videoUrl: "",
      currentTime: 0,
      firstTime: 0,

      options: {},
      videoData: {},
      isSetFirstTime: false,
      currentVideoTime: "", //初始播放时长（秒）
      urlList: {
        detail: "sociology/course/getCourseCatalogueChapterDetail",
        curriculumInfo: "app/phone.do?getCourseInfo",
      },
    };
  },
  async onUnload() {
    this.timer = null;
    // #ifdef APP-PLUS
    uni.navigateTo({
      url: "/pages/curriculum/order/back",
    });
   
    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
    // #endif
    await this.setVideoTime();
  },
  onLoad(options) {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("landscape-primary");
    // #endif

    this.options = JSON.parse(options.data);
    this.getLive();

    this.timer = setInterval(() => {
      var that = this;
      if (this.currentTime) {
        that.setVideoTime();
      }
    }, 60000 * 10);
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 播放进度改变
    videoTimeUpdateEvent(e) {
      console.log("e at line 78:", e);
      this.playTime = parseInt(e.detail.currentTime);
      this.allTime = parseInt(e.detail.duration);
      this.recordTime({
        time: this.playTime,
      });
    },

    recordTime(data) {
      this.currentTime = data.time;
      console.log("data at line 54:", data);
      var list = [];
      if (uni.getStorageSync("videoList")) {
        list = JSON.parse(uni.getStorageSync("videoList"));
      }
      var index = list.findIndex((e) => e.id == this.videoData.id);
      if (list.length > 0 && index >= 0) {
        list[index] = {
          ...this.videoData,

          time: data.time,
        };
      } else {
        list.push({
          ...this.videoData,
          time: data.time,
        });
      }

      uni.setStorageSync("videoList", JSON.stringify(list));
    },
    //是否全屏
    fullscreenchange(e) {
      if (!e.target.fullScreen) {
        uni.navigateBack({
          delta: 1,
        });
      }
    },

    getData(data) {
      if (!this.isSetFirstTime) {
        var netWork = this.videoData.userCourseVideoPositionEntity
          ? this.videoData.userCourseVideoPositionEntity.position
          : 0;
        var list = [];
        if (uni.getStorageSync("videoList")) {
          list = JSON.parse(uni.getStorageSync("videoList"));
        }
        var index = list.findIndex((e) => e.id == this.videoData.id);

        if (netWork) {
          if (index >= 0) {
            this.firstTime =
              list[index].time > netWork ? list[index].time : netWork;
          } else {
            this.firstTime = netWork ? netWork : 0;
          }
        } else {
          if (index >= 0) {
            this.firstTime = list[index].time ? list[index].time : 0;
          } else {
            this.firstTime = 0;
          }
        }

        uni.setStorageSync("videoList", JSON.stringify(list));
        this.playVideo();
        this.isSetFirstTime = true;
      }
    },
    setVideoTime(time) {
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime, //秒数
      };
      $http
        .request({
          url: `sociology/course/saveCoursePosition`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          this.$forceUpdate();
        });
    },
    playVideo(e) {
      this.videoContext = uni.createVideoContext("videoId", this);

      this.videoContext.seek(this.firstTime);
      this.videoContext.requestFullScreen();
    },
    async getLive() {
      var data = {
        ...this.options,
      };
      $http
        .request({
          url: `sociology/course/checkVideo`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 252:", res);
          this.videoData = res.video;
          this.videoUrl =
            res.video.videoUrl;

          this.$nextTick(async () => {
            await this.getData();
          });
          this.$forceUpdate();
        });
    },
    openVideo(data) {
      var mynavData = JSON.stringify(data); // 这里转换成 字符串
      if (data.type == 0) {
        //视频云点播
        uni.navigateTo({
          url: `/pages/curriculum/order/videoDetail?data=${mynavData}`,
        });
      } else if (data.type == 1) {
        uni.navigateTo({
          url: `/pages/curriculum/order/videoDetailOss?data=${mynavData}`,
        });
      }
    },
    hancleModalCancel() {
      this.show = false;
    },
    handleClickMore(v, i, status) {
      console.log("i at line 357:", i);
      this.$set(this.correlationiList[i], "isOpen", status);
    },
    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
    }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.video-box{
  position: relative;
}
.image_box{
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>