vue_drf之视频接口

　　一、vue-video

　　1,安装依赖

　　npm install vue-video-player --save

　　2，main.js文件中加载组件

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

　　3，在课程详情页中加入组件

　　course_detial.vue

<template>
  <div id="course_detial">
    <el-container>
      <el-header><Header :current_state="current_state"/></el-header>
      <div class="up">
        <div class="video">
          <video-player class="video-player vjs-custom-skin"
               ref="videoPlayer"
               :playsinline="true"
               :options="playerOptions"
          >
          </video-player>
        </div>
        <div class="right">
          <div class="title1">{
    {info.name}}</div>
          <div class="data">{
    {info.students}}人在学&nbsp;&nbsp;&nbsp;&nbsp;课程总时长：{
    {info.lessons}}课时/{
    {info.pub_lessons}}课时&nbsp;&nbsp;&nbsp;&nbsp;难度：{
    {info.levels}}</div>
          <div class="preferential">
            <div>{
    {info.price_service_type.name}}</div>
            <div>距离结束：仅剩  {
    {Math.floor(remain_time/86400)}}天 {
    {Math.floor(remain_time%86400/3600)}}小时 {
    {Math.floor(remain_time%3600/60)}}分 <span>{
    {Math.floor(remain_time%60)}}</span> 秒秒</div> </div>
          <div class="price bac"><span>活动价</span><span class="sp1">¥{
    {info.current_price}}</span><span class="sp2">¥{
    {info.price}}</span></div>
          <div class="btn1" @click="add(info.id)">加入购物车</div>
        </div>
      </div>
      <div class="tab">
        <el-row>
          <el-col :span="3"><div @click="num=1" :class="num==1 ? 'light':''">详情介绍</div></el-col>
          <el-col :span="3"><div @click="num=2" :class="num==2 ? 'light':''">课程章节</div></el-col>
          <el-col :span="4"><div @click="num=3" :class="num==3 ? 'light':''">用户评论<span>(83)</span></div></el-col>
          <el-col :span="3"><div @click="num=4" :class="num==4 ? 'light':''">常见问题</div></el-col>
        </el-row>
      </div>
      <div class="content">
        <div class="contain">
          <div class="left">
            <div v-show="num==1">
              <img :src="info.brief_url" alt="" width="840px">
            </div>
            <div v-show="num==2">
              <div class="module" v-for="chapater in info.coursechapters">
                <div class="module-name"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7mqKHlnZc8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0i56ys5LqM54mIIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6K++56iL56ug6IqCIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzkyLjAwMDAwMCwgLTcxNS4wMDAwMDApIiBmaWxsPSIjOUI5QjlCIj4KICAgICAgICAgICAgPHBhdGggZD0iTTQwMSw3MzMgQzM5Ni4wMjk0MzcsNzMzIDM5Miw3MjguOTcwNTYzIDM5Miw3MjQgQzM5Miw3MTkuMDI5NDM3IDM5Ni4wMjk0MzcsNzE1IDQwMSw3MTUgQzQwNS45NzA1NjMsNzE1IDQxMCw3MTkuMDI5NDM3IDQxMCw3MjQgQzQxMCw3MjguOTcwNTYzIDQwNS45NzA1NjMsNzMzIDQwMSw3MzMgWiBNNDA0LjgxMTY0NCw3MTkuNSBMMzk3LjE4ODM1Niw3MTkuNSBDMzk2Ljk5NjU3NSw3MTkuNSAzOTYuODMzOTA0LDcxOS41NjYxMjIgMzk2LjcwMDM0Miw3MTkuNjk4MzY2IEMzOTYuNTY2NzgxLDcxOS44MzA2MSAzOTYuNSw3MTkuOTkxNjc3IDM5Ni41LDcyMC4xODE1NjYgTDM5Ni41LDcyMC43MDAzNyBDMzk2LjUsNzIwLjg5MDI1OSAzOTYuNTY2NzgxLDcyMS4wNTEzMjYgMzk2LjcwMDM0Miw3MjEuMTgzNTcgQzM5Ni44MzM5MDQsNzIxLjMxNTgxNCAzOTYuOTk2NTc1LDcyMS4zODE5MzYgMzk3LjE4ODM1Niw3MjEuMzgxOTM2IEw0MDQuODExNjQ0LDcyMS4zODE5MzYgQzQwNS4wMDM0MjUsNzIxLjM4MTkzNiA0MDUuMTY2MDk2LDcyMS4zMTU4MTQgNDA1LjI5OTY1OCw3MjEuMTgzNTcgQzQwNS40MzMyMTksNzIxLjA1MTMyNiA0MDUuNSw3MjAuODkwMjU5IDQwNS41LDcyMC43MDAzNyBMNDA1LjUsNzIwLjE4MTU2NiBDNDA1LjUsNzE5Ljk5MTY3NyA0MDUuNDMzMjE5LDcxOS44MzA2MSA0MDUuMjk5NjU4LDcxOS42OTgzNjYgQzQwNS4xNjYwOTYsNzE5LjU2NjEyMiA0MDUuMDAzNDI1LDcxOS41IDQwNC44MTE2NDQsNzE5LjUgWiBNNDA0LjgxMTY0NCw3MjIuNjg0MDMyIEwzOTcuMTg4MzU2LDcyMi42ODQwMzIgQzM5Ni45OTY1NzUsNzIyLjY4NDAzMiAzOTYuODMzOTA0LDcyMi43NTAxNTQgMzk2LjcwMDM0Miw3MjIuODgyMzk4IEMzOTYuNTY2NzgxLDcyMy4wMTQ2NDIgMzk2LjUsNzIzLjE3NTcwOSAzOTYuNSw3MjMuMzY1NTk4IEwzOTYuNSw3MjMuODg0NDAyIEMzOTYuNSw3MjQuMDc0MjkxIDM5Ni41NjY3ODEsNzI0LjIzNTM1OCAzOTYuNzAwMzQyLDcyNC4zNjc2MDIgQzM5Ni44MzM5MDQsNzI0LjQ5OTg0NiAzOTYuOTk2NTc1LDcyNC41NjU5NjggMzk3LjE4ODM1Niw3MjQuNTY1OTY4IEw0MDQuODExNjQ0LDcyNC41NjU5NjggQzQwNS4wMDM0MjUsNzI0LjU2NTk2OCA0MDUuMTY2MDk2LDcyNC40OTk4NDYgNDA1LjI5OTY1OCw3MjQuMzY3NjAyIEM0MDUuNDMzMjE5LDcyNC4yMzUzNTggNDA1LjUsNzI0LjA3NDI5MSA0MDUuNSw3MjMuODg0NDAyIEw0MDUuNSw3MjMuMzY1NTk4IEM0MDUuNSw3MjMuMTc1NzA5IDQwNS40MzMyMTksNzIzLjAxNDY0MiA0MDUuMjk5NjU4LDcyMi44ODIzOTggQzQwNS4xNjYwOTYsNzIyLjc1MDE1NCA0MDUuMDAzNDI1LDcyMi42ODQwMzIgNDA0LjgxMTY0NCw3MjIuNjg0MDMyIFogTTQwNC44MTE2NDQsNzI1Ljg2ODA2NCBMMzk3LjE4ODM1Niw3MjUuODY4MDY0IEMzOTYuOTk2NTc1LDcyNS44NjgwNjQgMzk2LjgzMzkwNCw3MjUuOTM0MTg2IDM5Ni43MDAzNDIsNzI2LjA2NjQzIEMzOTYuNTY2NzgxLDcyNi4xOTg2NzQgMzk2LjUsNzI2LjM1OTc0MSAzOTYuNSw3MjYuNTQ5NjMgTDM5Ni41LDcyNy4wNjg0MzQgQzM5Ni41LDcyNy4yNTgzMjMgMzk2LjU2Njc4MSw3MjcuNDE5MzkgMzk2LjcwMDM0Miw3MjcuNTUxNjM0IEMzOTYuODMzOTA0LDcyNy42ODM4NzggMzk2Ljk5NjU3NSw3MjcuNzUgMzk3LjE4ODM1Niw3MjcuNzUgTDQwNC44MTE2NDQsNzI3Ljc1IEM0MDUuMDAzNDI1LDcyNy43NSA0MDUuMTY2MDk2LDcyNy42ODM4NzggNDA1LjI5OTY1OCw3MjcuNTUxNjM0IEM0MDUuNDMzMjE5LDcyNy40MTkzOSA0MDUuNSw3MjcuMjU4MzIzIDQwNS41LDcyNy4wNjg0MzQgTDQwNS41LDcyNi41NDk2MyBDNDA1LjUsNzI2LjM1OTc0MSA0MDUuNDMzMjE5LDcyNi4xOTg2NzQgNDA1LjI5OTY1OCw3MjYuMDY2NDMgQzQwNS4xNjYwOTYsNzI1LjkzNDE4NiA0MDUuMDAzNDI1LDcyNS44NjgwNjQgNDA0LjgxMTY0NCw3MjUuODY4MDY0IFoiIGlkPSLmqKHlnZciPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" alt=""><span>第{
    {chapater.chapter}}章·{
    {chapater.name}}</span>
                </div>
                <ul>
                  <li v-for="lesson in chapater.coursesections" @click="play(lesson.section_link)">
                    <div class="name"><span class="index">{
    {lesson.orders}}.</span>{
    {lesson.name}}<span class="free" v-show="lesson.free_trail">免费</span></div>
                    <div class="time">{
    {lesson.duration}}<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7mkq3mlL4gY29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSLnrKzkuozniYgiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor77nqIvnq6DoioIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTgyLjAwMDAwMCwgLTgxNS4wMDAwMDApIiBmaWxsPSIjNEE0QTRBIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxNy4wMDAwMDAsIDgxNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03NzIuMzU0OTE5LDE0LjEzNzE0NjYgQzc3Mi4zMDU0NjMsMTQuMTM3MTQ2NiA3NzIuMjU1OTg0LDE0LjEyNTAwMDkgNzcyLjIxMDIzOCwxNC4xMDE2NjY4IEM3NzIuMTAxNTA1LDE0LjA0NzA2ODQgNzcyLjAzMzg1MiwxMy45MzYwMDMyIDc3Mi4wMzM4NTIsMTMuODE1NjE3OSBMNzcyLjAzMzg1Miw2LjQ2ODEyOTQ0IEM3NzIuMDMzODUyLDYuMzQ4Njc4NDYgNzcyLjEwMDEwNSw2LjIzODk4MDQ1IDc3Mi4yMDY1MDUsNi4xODM0NDc4MiBDNzcyLjMxMTk3Miw2LjEyNzkxNTE5IDc3Mi40NDAzMjMsNi4xMzYzMjM3IDc3Mi41MzgzMjUsNi4yMDQ0NTc3IEw3NzcuNjgxMTcsOS43ODIwNjIzNSBDNzc3Ljc2NjU3NCw5Ljg0MTMzMjA5IDc3Ny44MTc5MTksOS45Mzg0MDU5NSA3NzcuODE5MzE5LDEwLjA0MTk5NyBDNzc3LjgyMDc0MSwxMC4xNDYwNjY1IDc3Ny43NzE3MDcsMTAuMjQzNjE4OSA3NzcuNjg4MTY4LDEwLjMwNTE5MDIgTDc3Mi41NDUzNDYsMTQuMDc0MTM5NyBDNzcyLjQ4OTg2OSwxNC4xMTUwNDI5IDc3Mi40MjMyNiwxNC4xMzcwNzgyIDc3Mi4zNTQ5NDEsMTQuMTM3MTQ2NiBMNzcyLjM1NDkxOSwxNC4xMzcxNDY2IFogTTc3NCwxNy43MTQyNzI3IEM3NjkuNzQ2MTcxLDE3LjcxNDI3MjcgNzY2LjI4NTcxMSwxNC4yNTM4MTc1IDc2Ni4yODU3MTEsMTAgQzc2Ni4yODU3MTEsNS43NDYxODI1IDc2OS43NDYxNzEsMi4yODU3MDQ1MiA3NzQsMi4yODU3MDQ1MiBDNzc4LjI1MzgyOSwyLjI4NTcwNDUyIDc4MS43MTQyNjcsNS43NDYxODI1IDc4MS43MTQyNjcsMTAgQzc4MS43MTQyNjcsMTQuMjUzODE3NSA3NzguMjUzODI5LDE3LjcxNDI3MjcgNzc0LDE3LjcxNDI3MjcgTDc3NCwxNy43MTQyNzI3IFogTTc3NCwxIEM3NjkuMDI5MzQyLDEgNzY1LDUuMDI5MzM5OSA3NjUsMTAgQzc2NSwxNC45NzA2NjAxIDc2OS4wMjkzNDIsMTkgNzc0LDE5IEM3NzguOTcxMTAyLDE5IDc4MywxNC45NzA2NjAxIDc4MywxMCBDNzgzLDUuMDI5MzM5OSA3NzguOTcxMTAyLDEgNzc0LDEgTDc3NCwxIFoiIGlkPSLmkq3mlL4tY29weSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="teacher">
              <div class="title"><span>授课老师</span></div>
              <div class="teacher_detial">
                <div class="cont1">
                  <img alt=" " :src="info.teacher.image">
                  <div class="name">
                    <div class="p1">{
    {info.teacher.name}}</div>
                    <div class="p2">{
    {info.teacher.role}}</div>
                  </div>
                </div>
                <p class="narrative">{
    {info.teacher.brief}}</p>
              </div>
            </div>
            <div class="share">
              <div class="title"><span>加入答疑交流群</span></div>
              <div class="content2">
                <img alt=" " src="//hcdn1.luffycity.com/static/frontend/information/551F153CF5BABD20EEB7E8AE3E9F0767_1544009755.8672543.jpeg">
                <div>
                  <p>路飞Python交流群</p>
                  <p>QQ群号：779111660</p>
                </div>
              </div>
              <div class="lower">
                <el-row>
                  <el-col :span="12">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNThweCIgaGVpZ2h0PSI1OHB4IiB2aWV3Qm94PSIwIDAgNTggNTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7pooblj5botYTmlpk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0i56ys5LqM54mIIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6K++56iL6K+m5oOFIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMxMi4wMDAwMDAsIC0xMTgwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i6aKG5Y+W6LWE5paZIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzEyLjAwMDAwMCwgMTE4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTIiIGZpbGw9IiNBRENCRkIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1OCIgaGVpZ2h0PSI1OCIgcng9IjI5Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8ZyBpZD0i5YC65p2D5YC65Yqh6aG555uuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy4wMDAwMDAsIDE3LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEuMDMyNzY0ODQsOS4zNzc3NzQ4MyBMMTAuMTM3NjUyNywxNS4wODY0NjM2IEMxMC42NDgwODc5LDE1LjQwNTExMjYgMTEuMzEwMjUwNSwxNS41ODUzNzc1IDEyLDE1LjU4NTM3NzUgQzEyLjY4OTc0OTUsMTUuNTg1Mzc3NSAxMy4zNTE5NjQ4LDE1LjQwNTExMjYgMTMuODYyMzQ3MywxNS4wODY0NjM2IEwyMi45NjcyODc5LDkuMzc3Nzc0ODMgQzIzLjU4ODA0NCw4Ljk4OTc3NDgzIDIzLjk0NjY3MjUsOC40MDc4Njc1NSAyMy45NDY2NzI1LDcuNzg0MzE3ODggQzIzLjk0NjY3MjUsNy4xNjA3OTQ3IDIzLjU4ODA0NCw2LjU3ODgwNzk1IDIyLjk2NzI4NzksNi4xOTA4MzQ0NCBMMTMuODYyMzIwOSwwLjQ4MjA5MjcxNSBDMTIuODU1MzIzMSwtMC4xNTUzMTEyNTggMTEuMTU4NTIzMSwtMC4xNTUzMTEyNTggMTAuMTUxMzY3LDAuNDgyMDkyNzE1IEwxLjAzMjc2NDg0LDYuMTc2OTgwMTMgQzAuNDExOTU2MDQ0LDYuNTY0OTUzNjQgMC4wNTM0MzI5NjcsNy4xNDY5NDA0IDAuMDUzNDMyOTY3LDcuNzcwNDYzNTggQzAuMDUzNDMyOTY3LDguMzkzOTg2NzUgMC40MTE5NTYwNDQsOC45ODk3NDgzNCAxLjAzMjc2NDg0LDkuMzc3Nzc0ODMgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjIwNjU5MzQsMTkuMTQ2MjUxNyBDMTAuNzAzMjA4OCwxOS40Nzg5MTM5IDExLjM1MTU3OCwxOS42NDUxNjU2IDExLjk5OTk3MzYsMTkuNjQ1MTY1NiBDMTIuNjQ4Mzk1NiwxOS