百家云移动端h5点播SDK（实现视频播放）

效果

要实现上面的效果，视频播放，需要两个参数video_id和course_id

1、拿到这两个（video_id和course_id）参数

		<div
          v-for="(item, index) in periods"
          :key="index"
          class="my-study-detail-cell"
          @click="curriculum(item.video_id,item.periods_title)"
        >
          <div class="title">
            <span class="play-type play-type-playback">[回放]</span>
            <span class="name">{{ item.periods_title }}</span>
          </div>
          <div class="teacher">
            <span
              class="name"
              v-for="(items, index) in item.teachers"
              :key="index"
            >{{ items.teacher_name }}</span>
            <span class="time">{{ item.start_play }} - {{ item.end_play }}</span>
          </div>
          <div class="progress-info">
            <div class="my-progress" style="width: 75%; height: 1.06667vw;">
              <span style="width: 0%;"></span>
            </div>
            <span>已观看{{ item.progress_rate }}%</span>
          </div>
        </div>

 // 获取课程数据
    curriculum(video_id, periods_title) {
      this.$router.push({
        path: "/video",
        query: {
          id: this.id,// 这是由前面传过来的参数，也就是路由跳转带的参数，在data里面定义过
          video_id,
          title: periods_title
        }
      });
    },

2、在视频播放页面

展示的页面

	<!-- 视频 -->
    <div class="xps_box">
      <div id="xps_video_play"></div>
    </div>

相关的js内容（获取视频的token根据给的接口和传过来的参数）

getVideo() {
      let token = localStorage.getItem("msmkToken");
      if (token) {
        axios
          .get(
            `https://www.365msmk.com/api/app/getPlayToken/video_id=${this.$route.query.video_id}/course_id=${this.$route.query.id}?`,
            {
              headers: {
                authorization: `Bearer ${token}`
              }
            }
          )
          .then(res => {
            console.log("获取视频数据", res);
            // eslint-disable-next-line no-undef
            var player = new bjcPlayer("#xps_video_play", {
              token: res.data.data.token,
              definition: "low", // hign 高清 low 低清
              media: "video"
            });
            player.play(res.data.data.video_id);
          });
      }
    }
  }

因为我们项目用的百家云的外置播放视频，所以需要外部引入百家云的插件

//在pubic文件下的index.html文件引入文件
 <link href="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css" rel="stylesheet">//css文件
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>//jq文件
 <script src="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js" > </script>//js文件

在页面中添加一个DOM元素，来使用百家云的插件

<div id="xps_video_play"></div>

完整的代码（只是视频播放的页面）

<template>
  <div class="video_box">
    <!-- 头部 -->
    <div class="video_box_header">
      <div class="video_box_header_back" @click="back">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="name">{{ $route.query.title }}</div>
      <div></div>
    </div>
    <!-- 视频 -->
    <div class="xps_box">
      <div id="xps_video_play"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.getVideo();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getVideo() {
      let token = localStorage.getItem("msmkToken");
      if (token) {
        axios
          .get(
            `https://www.365msmk.com/api/app/getPlayToken/video_id=${this.$route.query.video_id}/course_id=${this.$route.query.id}?`,
            {
              headers: {
                authorization: `Bearer ${token}`
              }
            }
          )
          .then(res => {
            console.log("获取视频数据", res);
            // eslint-disable-next-line no-undef
            var player = new bjcPlayer("#xps_video_play", {
              token: res.data.data.token,
              definition: "low", // hign 高清 low 低清
              media: "video"
            });
            player.play(res.data.data.video_id);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.video_box {
  width: 100%;
  height: 100vh;
  background-color: white;
  .video_box_header {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    .video_box_header_back {
      margin-top: 5px;
      margin-left: 10px;
      color: #999;
    }
    .name {
      font-size: 4.8vw;
      color: #595959;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 66.66667vw;
      margin-left: 10px;
    }
  }
  .xps_box {
      margin-top: 100px;
    > div {
      width: 100%;
      height: 500px;
      z-index: 10000;
    }
  }
}
</style>