11.视频播放

当用户购买成功以后，就可以观看此视频了。
代码目录：src/pages/video/index.vue
需求文档：https://www.yuque.com/xiumubai/fe/exlz8q

用户刚进入视频播放页面的时候，视频播放地址有两种情况

• 点击去学习进入，这时候默认播放的视频就是第一条
• 点击某个章节进入，这时候默认播放的视频就是点击的这一条

只需要拿到url当中的videoSourceId即可，另外还需加拿到章节信息

<script>
import courseService from "@/services/course";
export default {
  data() {
    return {
      options: {},
      /** 章节列表 */
      chapterList: [],
      /** 课程信息 */
      course: {},
      /** 视频信息 */
      video: {},
    };
  },
  onLoad(option) {
    console.log("options", option);
    this.options = option;
    this.getCourseDetail();
    this.getVideoUrl(option.videoSourceId);
  },
  methods: {
    async getCourseDetail() {
      try {
        const res = await courseService.courseDetail({
          id: this.options.id,
          // id: '1192252213659774977',
        });
        this.chapterList = res.data.chapterList;
        this.course = res.data;
      } catch (e) {
        console.log("e", e);
      }
    },
    async getVideoUrl(videoSourceId) {
      console.log("videoid", videoSourceId);
      try {
        const res = await courseService.getVideoSource({
          videoSourceId,
        });
        console.log("res", res);
        if (res.code == 200) {
          this.viedeo = res.data;
        } else {
          uni.showToast({
            title: res.message,
            icon: "error",
          });
        }
      } catch (e) {
        console.log("e", e);
      }
    },
    videoErrorCallback(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
  },
};
</script>

视频播放控件

<video
  class="video"
  src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
  @error="videoErrorCallback"
  :poster="course.course.cover"
  object-fit="fill"
  controls
  page-gesture
  enable-play-gesture
></video>