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+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjIwNjU5MzQsMTkuMTQ2MjUxNyBDMTAuNzAzMjA4OCwxOS40Nzg5MTM5IDExLjM1MTU3OCwxOS42NDUxNjU2IDExLjk5OTk3MzYsMTkuNjQ1MTY1NiBDMTIuNjQ4Mzk1NiwxOS42NDUxNjU2IDEzLjI4Mjk3MTQsMTkuNDc4OTEzOSAxMy43OTMzODAyLDE5LjE0NjI1MTcgTDIzLjYyOTI5MjMsMTIuNTUwNzgxNSBDMjQuMDAxODE5OCwxMi4zMDE0MDQgMjQuMDk4NCwxMS44MDI1Njk1IDIzLjg1MDExODcsMTEuNDI4NDIzOCBDMjMuNjAxNzMxOSwxMS4wNTQzMzExIDIzLjEwNTExNjUsMTAuOTU3MzI0NSAyMi43MzI2NDE4LDExLjIwNjcyODUgTDEyLjg5NjcwMzMsMTcuODAyMzU3NiBDMTIuNDI3NjQ4NCwxOC4xMjEwMDY2IDExLjU3MjQwNDQsMTguMTIxMDA2NiAxMS4xMDMyOTY3LDE3LjgwMjM1NzYgTDEuMjY3MzMxODcsMTEuMjA2NzU1IEMwLjg5NDgwNDM5NiwxMC45NTczNTEgMC4zOTgyNDE3NTgsMTEuMDU0Mzg0MSAwLjE0OTg1NDk0NSwxMS40Mjg0NTAzIEMtMC4wOTg0NTI3NDczLDExLjgwMjU5NiAtMC4wMDE4MTk3ODAyMiwxMi4zMDE0MzA1IDAuMzcwNjU0OTQ1LDEyLjU1MDgwNzkgTDEwLjIwNjU5MzQsMTkuMTQ2MjUxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjIuNzMyNjY4MSwxNS41NTc2MTU5IEwxMi44OTY3MDMzLDIyLjE1MzA4NjEgQzEyLjQyNzY0ODQsMjIuNDcxNzM1MSAxMS41NzI0MDQ0LDIyLjQ3MTczNTEgMTEuMTAzMjk2NywyMi4xNTMwODYxIEwxLjI2NzMzMTg3LDE1LjU1NzYxNTkgQzAuODk0ODA0Mzk2LDE1LjMwODIxMTkgMC4zOTgyNDE3NTgsMTUuNDA1MTEyNiAwLjE0OTg1NDk0NSwxNS43NzkyNTgzIEMtMC4wOTg0NTI3NDczLDE2LjE1MzQwNCAtMC4wMDE4MTk3ODAyMiwxNi42NTIxNTg5IDAuMzcwNjU0OTQ1LDE2LjkwMTcyMTkgTDEwLjIwNjU5MzQsMjMuNDk3MTkyMSBDMTAuNzAzMjA4OCwyMy44Mjk4MDEzIDExLjM1MTU3OCwyMy45OTU5NDcgMTEuOTk5OTczNiwyMy45OTU5NDcgQzEyLjY0ODM5NTYsMjMuOTk1OTQ3IDEzLjI4Mjk3MTQsMjMuODI5ODAxMyAxMy43OTMzODAyLDIzLjQ5NzE5MjEgTDIzLjYyOTMxODcsMTYuOTAxNzIxOSBDMjQuMDAxODQ2MiwxNi42NTIxNTg5IDI0LjA5ODQyNjQsMTYuMTUzNDA0IDIzLjg1MDE0NTEsMTUuNzc5MjU4MyBDMjMuNjE1NTc4LDE1LjQwNTExMjYgMjMuMTA1MTQyOSwxNS4zMDgyMTE5IDIyLjczMjY2ODEsMTUuNTU3NjE1OSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="">
                    <p>领取资料</p>
                  </el-col>
                  <el-col :span="12">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNThweCIgaGVpZ2h0PSI1OHB4IiB2aWV3Qm94PSIwIDAgNTggNTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7lrablkZjkuqTmtYE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0i56ys5LqM54mIIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6K++56iL6K+m5oOFIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ0OS4wMDAwMDAsIC0xMTgwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i5a2m5ZGY5Lqk5rWBIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDQ5LjAwMDAwMCwgMTE4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTItQ29weSIgZmlsbD0iIzFFQjhFMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjU4IiBoZWlnaHQ9IjU4IiByeD0iMjkiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxnIGlkPSLkuqTmtYEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3LjAwMDAwMCwgMTguMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy41ODczNzE4NiwwLjAzNDYzODE5OTggQzMuMjM4NzYwMDEsMC4wNzczMzAxMzc3IDIuOTM2OTkwMjEsMC4yNTYxODY1MjcgMi43OTEyODQ2OCwwLjUwOTc2ODQwNCBDMi41NDkzNjIyOSwwLjkyMDg2MDczMSAyLjc2MjY4NDI3LDEuMzY2NjczMDcgMy4zMDM3ODY3NywxLjU4ODIyMTQzIEwzLjQ0NDI1NTk5LDEuNjQ2OTczOTMgTDEyLjMyODQ1MSwxLjY2ODMxOTkgQzE4LjM2OTE5NzEsMS42ODE2NjQ3OCAyMS4yODU0OTg4LDEuNjk3Njk2MTUgMjEuNDQxNjIsMS43MTYzODQ4MiBDMjEuOTg1MjgzNywxLjc4MzEzODQxIDIyLjE5NjA0NDQsMS45NzI2NTMxOCAyMi4zMTA0NzQ1LDIuNDkwNTMzNzQgQzIyLjM0OTUxOTEsMi42NzQ3MzM5MiAyMi4zNTQ3MjY5LDMuMjE5MzA0MjQgMjIuMzY3NzMyMiw5LjAwMzk3MjkxIEwyMi4zODMzMjczLDE1LjMxNzIwOTcgTDIyLjQ0MzIwMzIsMTUuNDc3MzQ4MyBDMjIuNjc0NzY2OCwxNi4xMDczMDI0IDIzLjIxMzI3OTYsMTYuMzE1NTY0MiAyMy42MzIwNjkyLDE1LjkzOTEzMzYgQzIzLjc3MjU2NjksMTUuODEwOTk5NCAyMy44Njg4MTIyLDE1LjY1MzUxODIgMjMuOTMzODY3NCwxNS40MzQ2NTYzIEMyMy45ODA3MDk1LDE1LjI3NzE0NTkgMjMuOTgzMjcwNywxNS4wNTgyMjU2IDIzLjk4MzI3MDcsOC41MTAwOTU2MiBMMjMuOTgzMjcwNywxLjc0ODM4OTE1IEwyMy45Mjg2MzExLDEuNTY2ODc1NDYgQzIzLjY4NjcwODcsMC43NjYwMzY4MDEgMjIuOTczODYxNSwwLjE1MjA1NTU5NyAyMi4xNTQzNTMzLDAuMDM3Mjk1NDk4OCBDMjEuOTE1MTA2LDAuMDAyNTc1NDU3ODIgMy44NjA1MTI4LDAuMDAyNTc1NDU3ODIgMy41ODczNzE4NiwwLjAzNDYzODE5OTggWiBNMS43NjYyODA1LDMuNDAwNzg4NyBDMS4zNTUyMzE1NiwzLjQ3Mjg1Njg5IDAuOTEyOTkyNTM4LDMuNzA3Nzc5MjkgMC42MDg2MDQ1OTgsNC4wMjI3NzA5NyBDMC4zOTI2OTI5MjIsNC4yNDcwMDU3OSAwLjI1NDc4NDkxOCw0LjQ1MjU1MTk3IDAuMTI3MjkyNTc5LDQuNzQ2MTY4NDUgTDAuMDM2MjU1MDczLDQuOTU5NzE1NjkgTDAuMDI4NDU3NTQ4MSwxMS4xMDQ3NTQ1IEwwLjAyMzI0OTcxNDksMTcuMjQ5ODIyNCBMMC4wOTg2OTIxNzE1LDE3LjQ2NjA1NjIgQzAuMzM4MDI0ODcxLDE4LjEzMzQxNjkgMC44NTMxNDUxMzEsMTguNjI0NTc4NCAxLjU0NTEzMjUxLDE4Ljg0NjE4NTIgTDEuNzc5Mjg1ODMsMTguOTIwOTEwNyBMMy44NzM1MTgxMywxOC45MzQyNTU2IEw1Ljk2Nzc1MDQyLDE4Ljk0NzYwMDQgTDUuOTgwNzg0MjMsMjAuNjU2MDM2OCBDNS45OTM3ODk1OSwyMi4zNDU4MTM3IDUuOTkzNzg5NTksMjIuMzY3MTU5NyA2LjA1MTAxODg2LDIyLjUxMTI2NjggQzYuMjQ4NzE3MzQsMjMuMDEwNDg3OSA2LjczNTIzNzE5LDIzLjEzODYyMjEgNy4yMzk5MTMzMSwyMi44MjM2MzA0IEM3LjMyMDUzNTEyLDIyLjc3MjkzNzQgOC4wOTA2MTE1OCwyMi4wMDk0MTc2IDkuMjE5NjU4NjIsMjAuODY0MjExIEwxMS4wNjY3NjA3LDE4Ljk4NzYwNTkgTDE1LjA4NjA5ODgsMTguOTg3NjA1OSBDMTcuNTIzNzA2NiwxOC45ODc2MDU5IDE5LjI0MDc1NTEsMTguOTc2OTQ3NSAxOS40NDYyNTEyLDE4Ljk2MDkxNjEgQzIwLjQ0MDAzNjgsMTguODgzNTMzMyAyMC45NjgxNjI0LDE4LjUyNTgyMDUgMjEuMTk0NTE4MiwxNy43ODYzMzMyIEMyMS4yMzM1MDU4LDE3LjY1MDIyNzIgMjEuMjM4NzEzNywxNy4xNzI0MTA0IDIxLjI0MzkyMTUsMTEuMzA0OTI3NiBDMjEuMjU0MzA4Nyw0LjM1MTA0OTA4IDIxLjI2MjEzNDcsNC44MDQ4MzMzMiAyMS4wOTgyMTYsNC40NzExODIxNyBDMjAuODc0NTA2OCw0LjAxNzM2ODcxIDIwLjM2MjAwNDcsMy42MjQ5NjUwOCAxOS43NTU4NDcsMy40NDYxMDg2NiBMMTkuNTQ3NzMyOCwzLjM4NDcyODA1IEwxMC43Mjg1NjQ2LDMuMzgyMDcwNzYgQzUuNTQzNjk2MTUsMy4zNzk0NDI3MyAxLjg1MjEzODYsMy4zODc0NDM4MiAxLjc2NjI4MDUsMy40MDA3ODg3IFogTTUuMzk4MDE5MSw5LjUxMzgyMzE2IEM1Ljg5NDkyNjE2LDkuNjA0NTgwMDIgNi4zMzE5ODU4LDEwLjAyMzY3MzQgNi40NjIwMzkzNSwxMC41MjgyMDkxIEM2LjYyMzMxMTQ1LDExLjE0NDg3NjcgNi4zMTg5ODA0NCwxMS44MDY4OTM3IDUuNzQxNDIzMDgsMTIuMDk3ODUyOSBDNS4xOTI0NjYxMywxMi4zNzU0NjcyIDQuNTc4NTM5MzUsMTIuMjU1MzYzMyA0LjE1MTg5NTM1LDExLjc4MjgzMiBDMy42MTU5NDM3NiwxMS4xODc1Njg3IDMuNzA3MDA5NzEsMTAuMjY2NTk2OSA0LjM0Njk3NTY5LDkuNzcwMDYyMzMgQzQuNjUxMzkyMTEsOS41MzUxNjkxIDUuMDIzMzk2NTMsOS40NDQ0MTIyNyA1LjM5ODAxOTEsOS41MTM4MjMxNiBaIE0xMC44NjEyMDc4LDkuNTEzODIzMTYgQzExLjM1Mjg3ODUsOS42MDQ1ODAwMiAxMS44MDAzMjU0LDEwLjAyNjM1OTkgMTEuOTI1MjI4LDEwLjUxMjE3NzcgQzEyLjA0NDg5NDQsMTAuOTg3MzY2MyAxMS45MTIxOTQyLDExLjQ4NjUyOSAxMS41NzM5OTgxLDExLjgzMzU1NDIgQzExLjMwMzQ0NjgsMTIuMTExMTY4NiAxMC45OTkwODczLDEyLjIzOTMzMTkgMTAuNjExNDU5NCwxMi4yMzkzMzE5IEM5Ljk3NjcwMTI1LDEyLjIzNjY3NDYgOS40Mjc3NDQzMiwxMS43ODAxNDU1IDkuMjk1MTAxMDUsMTEuMTQyMTkwMyBDOS4yNDU2NjkzMSwxMC45MDE5MjQxIDkuMjQ4MjU5LDEwLjc4NDQ3NzUgOS4zMTA2OTYxLDEwLjUzNjIzOTQgQzkuNDA0MzUxNzUsMTAuMTYyNTI0NCA5LjY1NDA3MTY3LDkuODM5NTMxNjQgOS45OTIyOTYzLDkuNjU3OTg4NzYgQzEwLjI3NTg4MTQsOS41MDMxMzU1NSAxMC41NTY4NDgzLDkuNDU3NzU3MTUgMTAuODYxMjA3OCw5LjUxMzgyMzE2IFogTTE2LjMyNDQyNSw5LjUxMzgyMzE2IEMxNi41MzUxNTczLDkuNTUzODU3OCAxNi44MjEzMDM2LDkuNjk4MDIzMzQgMTYuOTg1MjUwNyw5Ljg1MDE2MDggQzE3LjQ4MjEyOTMsMTAuMzA5MzE4MSAxNy41NzU3ODUsMTEuMDU5NDM0NSAxNy4yMDYzNzAzLDExLjYzMDY5NDUgQzE2LjgwNTczNywxMi4yNTI2NzY4IDE1Ljk2ODAxNTYsMTIuNDMxNTMzMiAxNS4zNTY2Nzg1LDEyLjAyNTc1NTUgQzE1LjAzNjY5NTUsMTEuODEyMjA4MiAxNC44MDI1NDIyLDExLjQ0MzgwNzkgMTQuNzQ1MzQxNCwxMS4wNTY3NDggQzE0LjY0MTI5ODUsMTAuMzc2MDQyNCAxNS4xMjUxNzE4LDkuNjczOTYxNjggMTUuNzk4OTE3NSw5LjUyNDQ4MTU1IEMxNS45OTkyMDU3LDkuNDc5MTAzMDkgMTYuMTI5MzE2Miw5LjQ3NjQ0NTgyIDE2LjMyNDQyNSw5LjUxMzgyMzE2IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="">
                    <p>学员交流</p>
                  </el-col>
                  <el-col :span="12">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNThweCIgaGVpZ2h0PSI1OHB4IiB2aWV3Qm94PSIwIDAgNTggNTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7lhazlvIDor748L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0i56ys5LqM54mIIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6K++56iL6K+m5oOFIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMxMi4wMDAwMDAsIC0xMjc2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i5YWs5byA6K++IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzEyLjAwMDAwMCwgMTI3Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNFMEE3RkYiIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjI5IiBjeT0iMjkiIHI9IjI5Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIxNi41IDE2LjUgNDEuNSAxNi41IDQxLjUgNDEuNSAxNi41IDQxLjUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTguMDAwMDAwLCAxOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03LjUsMS41IEwxNC41LDEuNSBMMTQuNSwzIEMxNC41LDMuODI4NDI3MTIgMTUuMTcxNTcyOSw0LjUgMTYsNC41IEMxNi44Mjg0MjcxLDQuNSAxNy41LDMuODI4NDI3MTIgMTcuNSwzIEwxNy41LDEuNSBMMjAuNSwxLjUgQzIxLjA1MjI4NDcsMS41IDIxLjUsMS45NDc3MTUyNSAyMS41LDIuNSBMMjEuNSw1LjUgTDAuNSw1LjUgTDAuNSwyLjUgQzAuNSwxLjk0NzcxNTI1IDAuOTQ3NzE1MjUsMS41IDEuNSwxLjUgTDQuNSwxLjUgTDQuNSwzIEM0LjUsMy44Mjg0MjcxMiA1LjE3MTU3Mjg4LDQuNSA2LDQuNSBDNi44Mjg0MjcxMiw0LjUgNy41LDMuODI4NDI3MTIgNy41LDMgTDcuNSwxLjUgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjUsNi41IEwyMS41LDE3IEMyMS41LDE4LjkzMjk5NjYgMTkuOTMyOTk2NiwyMC41IDE4LDIwLjUgTDQsMjAuNSBDMi4wNjcwMDMzOCwyMC41IDAuNSwxOC45MzI5OTY2IDAuNSwxNyBMMC41LDYuNSBMMjEuNSw2LjUgWiBNNS4zNTQsMTMuNjQ2IEM1LjE1NzgxMDU2LDEzLjQ1NjUxMzkgNC44NDU5NTc2MSwxMy40NTkyMjM4IDQuNjUzMDkwNzEsMTMuNjUyMDkwNyBDNC40NjAyMjM4MSwxMy44NDQ5NTc2IDQuNDU3NTEzOSwxNC4xNTY4MTA2IDQuNjQ3LDE0LjM1MyBMNS42NDcsMTUuMzUzIEM1Ljg0MjI0OTkzLDE1LjU0ODE5MSA2LjE1ODc1MDA3LDE1LjU0ODE5MSA2LjM1NCwxNS4zNTMgTDguMzU0LDEzLjM1MyBDOC41NDM0ODYxLDEzLjE1NjgxMDYgOC41NDA3NzYxOSwxMi44NDQ5NTc2IDguMzQ3OTA5MjksMTIuNjUyMDkwNyBDOC4xNTUwNDIzOSwxMi40NTkyMjM4IDcuODQzMTg5NDQsMTIuNDU2NTEzOSA3LjY0NywxMi42NDYgTDYsMTQuMjkzIEw1LjM1NCwxMy42NDcgTDUuMzU0LDEzLjY0NiBaIE01LjM1NCw5LjY0NiBDNS4xNTc4MTA1Niw5LjQ1NjUxMzkgNC44NDU5NTc2MSw5LjQ1OTIyMzgxIDQuNjUzMDkwNzEsOS42NTIwOTA3MSBDNC40NjAyMjM4MSw5Ljg0NDk1NzYxIDQuNDU3NTEzOSwxMC4xNTY4MTA2IDQuNjQ3LDEwLjM1MyBMNS42NDcsMTEuMzUzIEM1Ljg0MjI0OTkzLDExLjU0ODE5MSA2LjE1ODc1MDA3LDExLjU0ODE5MSA2LjM1NCwxMS4zNTMgTDguMzU0LDkuMzUzIEM4LjU0MzQ4NjEsOS4xNTY4MTA1NiA4LjU0MDc3NjE5LDguODQ0OTU3NjEgOC4zNDc5MDkyOSw4LjY1MjA5MDcxIEM4LjE1NTA0MjM5LDguNDU5MjIzODEgNy44NDMxODk0NCw4LjQ1NjUxMzkgNy42NDcsOC42NDYgTDYsMTAuMjkzIEw1LjM1NCw5LjY0NyBMNS4zNTQsOS42NDYgWiBNMTEuMDAyLDEwLjUgTDE1Ljk5OSwxMC41MDUgQzE2LjE3NzYzMjgsMTAuNTA1MTc4NiAxNi4zNDI3OTE2LDEwLjQxMDA0NDIgMTYuNDMyMjYyNywxMC4yNTU0MzMgQzE2LjUyMTczMzgsMTAuMTAwODIxOCAxNi41MjE5MjQ0LDkuOTEwMjIyODYgMTYuNDMyNzYyNyw5Ljc1NTQzMzAxIEMxNi4zNDM2MDEsOS42MDA2NDMxNSAxNi4xNzg2MzI4LDkuNTA1MTc4NjMgMTYsOS41MDUgTDExLjAwMyw5LjUgQzEwLjgyNDM2NzIsOS40OTk4MjEzNiAxMC42NTkyMDg0LDkuNTk0OTU1NzYgMTAuNTY5NzM3Myw5Ljc0OTU2Njk4IEMxMC40ODAyNjYyLDkuOTA0MTc4MjEgMTAuNDgwMDc1NiwxMC4wOTQ3NzcxIDEwLjU2OTIzNzMsMTAuMjQ5NTY3IEMxMC42NTgzOTksMTAuNDA0MzU2OSAxMC44MjMzNjcyLDEwLjQ5OTgyMTQgMTEuMDAyLDEwLjUgWiBNMTEuMDAyLDE0LjUgTDE1Ljk5OSwxNC41MDUgQzE2LjI3NTE0MjQsMTQuNTA1Mjc2MSAxNi40OTkyMjM5LDE0LjI4MTY0MjQgMTYuNDk5NSwxNC4wMDU1IEMxNi40OTk3NzYxLDEzLjcyOTM1NzYgMTYuMjc2MTQyNCwxMy41MDUyNzYxIDE2LDEzLjUwNSBMMTEuMDAzLDEzLjUgQzEwLjgyNDM2NzIsMTMuNDk5ODIxNCAxMC42NTkyMDg0LDEzLjU5NDk1NTggMTAuNTY5NzM3MywxMy43NDk1NjcgQzEwLjQ4MDI2NjIsMTMuOTA0MTc4MiAxMC40ODAwNzU2LDE0LjA5NDc3NzEgMTAuNTY5MjM3MywxNC4yNDk1NjcgQzEwLjY1ODM5OSwxNC40MDQzNTY5IDEwLjgyMzM2NzIsMTQuNDk5ODIxNCAxMS4wMDIsMTQuNSBaIE0xNS41LDEgQzE1LjUsMC43MjM4NTc2MjUgMTUuNzIzODU3NiwwLjUgMTYsMC41IEMxNi4yNzYxNDI0LDAuNSAxNi41LDAuNzIzODU3NjI1IDE2LjUsMSBMMTYuNSwzIEMxNi41LDMuMjc2MTQyMzcgMTYuMjc2MTQyNCwzLjUgMTYsMy41IEMxNS43MjM4NTc2LDMuNSAxNS41LDMuMjc2MTQyMzcgMTUuNSwzIEwxNS41LDEgWiBNNS41LDEgQzUuNSwwLjcyMzg1NzYyNSA1LjcyMzg1NzYzLDAuNSA2LDAuNSBDNi4yNzYxNDIzNywwLjUgNi41LDAuNzIzODU3NjI1IDYuNSwxIEw2LjUsMyBDNi41LDMuMjc2MTQyMzcgNi4yNzYxNDIzNywzLjUgNiwzLjUgQzUuNzIzODU3NjMsMy41IDUuNSwzLjI3NjE0MjM3IDUuNSwzIEw1LjUsMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="">
                    <p>定期公开课</p>
                  </el-col>
                  <el-col :span="12">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNThweCIgaGVpZ2h0PSI1OHB4IiB2aWV3Qm94PSIwIDAgNTggNTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7lr7zluIjnrZTnlpE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0i56ys5LqM54mIIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6K++56iL6K+m5oOFIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ0OS4wMDAwMDAsIC0xMjc2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i5a+85biI562U55aRIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDQ5LjAwMDAwMCwgMTI3Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNGRjkyNDciIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjI5IiBjeT0iMjkiIHI9IjI5Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIxNi41IDE2LjUgNDEuNSAxNi41IDQxLjUgNDEuNSAxNi41IDQxLjUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOCwyOC41IEwzMCwyOC41IEMzMC44Mjg0MjcxLDI4LjUgMzEuNSwyOS4xNzE1NzI5IDMxLjUsMzAgTDMxLjUsMzggQzMxLjUsMzguODI4NDI3MSAzMC44Mjg0MjcxLDM5LjUgMzAsMzkuNSBMMjgsMzkuNSBDMjcuMTcxNTcyOSwzOS41IDI2LjUsMzguODI4NDI3MSAyNi41LDM4IEwyNi41LDMwIEMyNi41LDI5LjE3MTU3MjkgMjcuMTcxNTcyOSwyOC41IDI4LDI4LjUgWiBNMjEsMzEuNSBMMjMsMzEuNSBDMjMuODI4NDI3MSwzMS41IDI0LjUsMzIuMTcxNTcyOSAyNC41LDMzIEwyNC41LDM4IEMyNC41LDM4LjgyODQyNzEgMjMuODI4NDI3MSwzOS41IDIzLDM5LjUgTDIxLDM5LjUgQzIwLjE3MTU3MjksMzkuNSAxOS41LDM4LjgyODQyNzEgMTkuNSwzOCBMMTkuNSwzMyBDMTkuNSwzMi4xNzE1NzI5IDIwLjE3MTU3MjksMzEuNSAyMSwzMS41IFogTTM1LjcwNywxOS45NDkgTDM0LjgxOSwxOS43MjggQzM0LjU1ODkxMDYsMTkuNjYzMTU2MyAzNC4zNTMxNzE5LDE5LjQ2NDQ4MjIgMzQuMjc5MjgzNSwxOS4yMDY4MTY0IEMzNC4yMDUzOTUxLDE4Ljk0OTE1MDUgMzQuMjc0NTgyNSwxOC42NzE2Mzg1IDM0LjQ2MDc4MzUsMTguNDc4ODE2NCBDMzQuNjQ2OTg0NSwxOC4yODU5OTQyIDM0LjkyMTkxMDYsMTguMjA3MTU2MyAzNS4xODIsMTguMjcyIEwzOC4wOTMsMTguOTk4IEMzOC40OTQ3MTU3LDE5LjA5ODMzNjIgMzguNzM5MTIwOSwxOS41MDUyMzA2IDM4LjYzOSwxOS45MDcgTDM3LjkxMywyMi44MTggQzM3LjgwNTI0NSwyMy4yMTA5NDEzIDM3LjQwMzQ4NTEsMjMuNDQ1OTc2NiAzNy4wMDgxNTQ1LDIzLjM0NzM0NzcgQzM2LjYxMjgyMzgsMjMuMjQ4NzE4OCAzNi4zNjg1NTAxLDIyLjg1MjUwODEgMzYuNDU4LDIyLjQ1NSBMMzYuODA0LDIxLjA2OCBMMjAuMzQ4LDI5LjY2MSBDMjAuMTEwNDE4NCwyOS43ODQ5NzEyIDE5LjgyNDc0NjEsMjkuNzcyNzc3IDE5LjU5ODU5MzEsMjkuNjI5MDEwOCBDMTkuMzcyNDQwMSwyOS40ODUyNDQ3IDE5LjI0MDE2NDQsMjkuMjMxNzQ4MSAxOS4yNTE1OTMxLDI4Ljk2NDAxMDggQzE5LjI2MzAyMTcsMjguNjk2MjczNSAxOS40MTY0MTg0LDI4LjQ1NDk3MTIgMTkuNjU0LDI4LjMzMSBMMzUuNzA4LDE5Ljk0OCBMMzUuNzA3LDE5Ljk0OSBaIE0zNSwyNS41IEwzNywyNS41IEMzNy44Mjg0MjcxLDI1LjUgMzguNSwyNi4xNzE1NzI5IDM4LjUsMjcgTDM4LjUsMzggQzM4LjUsMzguODI4NDI3MSAzNy44Mjg0MjcxLDM5LjUgMzcsMzkuNSBMMzUsMzkuNSBDMzQuMTcxNTcyOSwzOS41IDMzLjUsMzguODI4NDI3MSAzMy41LDM4IEwzMy41LDI3IEMzMy41LDI2LjE3MTU3MjkgMzQuMTcxNTcyOSwyNS41IDM1LDI1LjUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="">
                    <p>导师答疑</p>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </el-container>
  </div>
</template>

<script>
  import Header from '../common/header'
  import Footer from '../common/footer'
  import {videoPlayer} from 'vue-video-player';
  export default {
    name:'course_detial',
    data:function () {
      return {
        current_state:0,
        num:1,
        info:{},
        remain_time:0,
        token: localStorage.token || sessionStorage.token,
        playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, //如果true,则自动播放
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 循环播放
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",
          src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址（必填）
        }],
        poster: "", //视频封面图
        width:'680px',
          height:'388px',
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }
      }
    },
    components:{
      Header,Footer,videoPlayer
    },
    methods:{
      intervaltimer(){
          // 课程优惠倒计时
          if(this.remain_time > 0 ){
            let timer = setInterval(()=>{
              if( this.remain_time < 0 ){
                clearInterval(timer)
              }else{
                --this.remain_time;
              }
            },1000);
          }
      },
      add:function (course_id) {
        if (this.token==null){
          this.$router.push('login/')
        }
        else {
          this.$axios.post('http://127.0.0.1:8000/shopcart/',{'course_id':course_id},
            {
            headers:{
              // 附带已经登录用户的jwt token 提供给后端,一定不能疏忽这个空格
              'Authorization':'JWT '+this.token
            },
            responseType:"json",
            withCredentials: true,
          })
            .then(function (res) {
              if (res.data.message=='ok'){
                alert('添加成功')
              }
              else if(res.data.message=='error'){
                alert('商品已经在购物车中')
              }
            }).catch(function (error) {
            console.log(error.response)
          })
        }
      },
      play:function (section_link) {
        sessionStorage.vid=section_link;
        this.$router.push('/player')
      }
    },
    computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
    created:function () {
      let id=sessionStorage.cid;
      let _this=this;
      this.$axios.get('http://127.0.0.1:8000/course/course/'+id)
        .then(function (res) {
          console.log(res.data);
          _this.info=res.data;
          _this.remain_time=res.data.price_service_type.priceservices[0].remaintime;
          _this.playerOptions.poster=res.data.course_img;
          _this.intervaltimer();
        }).catch(function (error) {
        console.log(error.response)
      })
    }
  }
</script>
<style scoped>
.el-header,.el-footer{
  padding: 0;
}
.el-header{
  height: 80px !important;
}
.up{
  width: 1200px;
  height: 388px;
  margin: 0 auto;
  margin-top: 30px;
}
.video{
  width: 680px;
  height: 388px;
  float: left;
  background-color: black;
}
.video img{
  width: 680px;
  height: 388px;
}
.right{
  width: 520px;
  height: 388px;
  float: right;
  position: relative;
}
.title1{
  font-size: 20px;
  color: #333;
  padding: 10px 23px;
  letter-spacing: .45px;
}
.data{
  padding-left: 23px;
  padding-right: 23px;
  padding-bottom: 16px;
  font-size: 14px;
  color: #9b9b9b;
}
.preferential{
  width: 100%;
  height: auto;
  background: #fa6240;
  font-size: 14px;
  color: #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 23px;
}
.preferential div{
  font-size: 16px;
  color: #fff;
  letter-spacing: .36px;
}
.preferential span{
  width: 24px;
  height: auto;
  display: inline-block;
  background: #fafafa;
  color: #5e5e5e;
  padding: 6px 0;
  text-align: center;
}
.price{
  width: 100%;
  height: auto;
  background: #fff;
  font-size: 14px;
  color: #4a4a4a;
  display: flex;
  align-items: flex-end;
  padding: 5px 23px;
}
.price .sp1{
  font-size: 26px;
  color: #fa6240;
  margin-left: 10px;
  display: inline-block;
  margin-bottom: -5px;
}
.price .sp2{
  font-size: 14px;
  color: #9b9b9b;
  margin-left: 10px;
  text-decoration: line-through;
}
.btn1{
  width: 125px;
  height: 40px;
  background: #ffc210;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  margin-right: 15px;
  outline: none;
  border: none;
  margin-left: 23px;
  position: absolute;
  bottom: 20px;
  line-height: 40px;
  text-align: center;
}
.tab{
  width: 1200px;
  margin: 0 auto;
  height: auto;
  background: #fff;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}
.el-col div{
  margin-right: 15px;
  padding: 26px 20px 16px;
  font-size: 17px;
  cursor: pointer;
}
.light{
  border-bottom: 1px solid orange;
}
.content{
  background: #FAFAFA;
  overflow: hidden;
  padding-bottom: 40px;
}
.contain{
  width: 1200px;
  height: auto;
  margin: 0 auto;
  margin-top: 30px;
}
.content .left{
  width: 880px;
  height: auto;
  padding: 20px;
  background: #fff;
  float: left;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}
.content .right{
  width: 300px;
  height: auto;
  margin-left: 20px;
  float: right;
}
.teacher{
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}
.title{
  font-size: 17px;
  color: #4a4a4a;
  padding: 18px 14px;
  border-bottom: 1px solid #333;
  border-bottom-color: rgba(51,51,51,.05);
}
.title span{
  display: inline-block;
  border-left: 2px solid #ffc210;
  padding-left: 12px;
}
.teacher_detial{
  padding: 30px 20px;
  box-sizing: border-box;
}
.cont1{
  height: auto;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.cont1 img{
  width: 54px;
  height: 54px;
  margin-right: 12px;
}
.name .p1{
  width: 188px;
  font-size: 16px;
  color: #4a4a4a;
  padding-bottom: 4px;
}
.name .p2{
  width: 188px;
  font-size: 13px;
  color: #9b9b9b;
  white-space: nowrap;
}
.narrative{
  font-size: 14px;
  color: #666;
  line-height: 24px
}
.share{
  background: #fff;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}
.content2{
  height: auto;
  margin: 20px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #f3f3f3;
}
.share img{
  width: 95px;
  height: 95px;
  margin-right: 20px;
}
.content2 p{
  margin: 0;
  margin-bottom: 10px;
  font-size: 14px;
}
.lower{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.lower .el-col{
  text-align: center;
  margin-top: 15px;
}
.lower img{
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  margin-right: 0;
}
.module{
  padding-left: 20px;
  padding-right: 20px;
}
.module-name{
  padding: 12px;
  background: #eee;
  border-radius: 2px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  letter-spacing: .26px;
}
li{
  padding: 15px 20px 15px 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
li .name{
  font-size: 14px;
  color: #666;
}
li .time{
  font-size: 14px;
  color: #666;
  letter-spacing: .23px;
  opacity: 1;
  transition: all .15s ease-in-out;
}
.time img{
  margin-left: 15px;
  vertical-align: middle;
}
</style>

　　视频组件实现代码

<template>
  <div id="course_detial">
        <div class="video">
          <video-player class="video-player vjs-custom-skin"
               ref="videoPlayer"
               :playsinline="true"
               :options="playerOptions"
          >
          </video-player>
        </div>
</template>

<script>
  import {videoPlayer} from 'vue-video-player';
  export default {
    name:'course_detial',
    data:function () {
      return {
        playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, //如果true,则自动播放
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 循环播放
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",
          src: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //你的视频地址（必填）
        }],
        poster: "", //视频封面图
        width:'680px',
          height:'388px',
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }
      }
    },
    components:{
      videoPlayer
    },
    methods:{
    },
    computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },</script>

　　二、使用保利威云视频

　　在vue的index.html文件中加入保利威的依赖

<script src='https://player.polyv.net/script/polyvplayer.min.js'></script>

　　player.vue

<template>
    <div id="player">
      <div class="header"></div>
      <div class="content">
        <el-row>
          <el-col :span="19" class="left_video">
            <div id="video"></div>
          </el-col>
          <el-col :span="5" class="right">
            <div class="course">
              <div class="img"><img :src="info.course_img" alt="" height="100%"></div>
              <div class="name">{{info.name}}</div>
            </div>
            <div class="list_name">播放列表</div>
            <div class="ss">
              <ul>
              <li class="section_li" v-for="chapater in info.coursechapters">
                <div class="section_title">
                  <span>章节</span>
                  <span class="number">{{chapater.chapter}}</span>
                  <span>{{chapater.name}}</span>
                </div>
                <ul>
                  <li class="lesson" v-for="lesson in chapater.coursesections" >
                    <div :class="vid==lesson.section_link ? 'section_project_active':'section_project'" @click="change(lesson.section_link)" >
                      <span class="time">课时{{lesson.orders}}</span>
                      <div class="status"> <p class="complete imperfect"></p> </div>
                      <h5 class="section_cont">{{lesson.name}}</h5>
                      <span class="section_time">{{lesson.duration}}</span>
                      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTIgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ4LjIgKDQ3MzI3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Db21iaW5lZCBTaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSIxIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTg3OC4wMDAwMDAsIC0yMjcuMDAwMDAwKSI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NzguMDAwMDAwLCAyMjcuNTAwMDAwKSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPHBhdGggZD0iTTEsMSBMMSwxMSBMMTEsMTEgTDExLDEgTDEsMSBaIE0xLDAgTDExLDAgQzExLjU1MjI4NDcsLTEuMDE0NTMwNjNlLTE2IDEyLDAuNDQ3NzE1MjUgMTIsMSBMMTIsMTEgQzEyLDExLjU1MjI4NDcgMTEuNTUyMjg0NywxMiAxMSwxMiBMMSwxMiBDMC40NDc3MTUyNSwxMiA2Ljc2MzUzNzUxZS0xNywxMS41NTIyODQ3IDAsMTEgTDAsMSBDLTYuNzYzNTM3NTFlLTE3LDAuNDQ3NzE1MjUgMC40NDc3MTUyNSwxLjAxNDUzMDYzZS0xNiAxLDAgWiBNMy41MDAwMDQ0MywzLjAwMjEwNDg4IEwzLjUyNjg2MDQ5LDkuMzgxNTIzMzEgQzMuNTI4NTIzNjgsOS43NzY1OTg3IDMuOTY2MTU0MTIsMTAuMDEzNzcwNSA0LjI5ODA2MzkzLDkuNzk5NDczNTMgTDkuMjcxMjA3ODcsNi41ODg1NzE1NCBDOS41Nzc4MDQ4LDYuMzkwNjE3NzUgOS41NzU5MDE0MSw1Ljk0MTUyNTM2IDkuMjY3NjM3NTUsNS43NDYxNzc1NCBMNC4yNjc2Mzc1NSwyLjU3NzY2MTEgQzMuOTMzOTM0MDMsMi4zNjYxOTIwOSAzLjQ5ODM0MTMsMi42MDcwNDIzMyAzLjUwMDAwNDQzLDMuMDAyMTA0ODggWiBNNC41MjMwMDY0Myw4LjQ2MzkxOTc3IEw4LjA3MjEwNjc2LDYuMTcyNDQ5MTMgTDQuNTAzODQwNTEsMy45MTEyMjcwOCBMNC41MjMwMDY0Myw4LjQ2MzkxOTc3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="" class="project_img">
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            </div>

          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>

export default {
  name:"player",
  data () {
    return {
      // 生成播放器的参数
      info:{},
      vid:sessionStorage.vid,
    }
  },
  created:function () {
    let id=sessionStorage.cid;
    let _this=this;
    this.$axios.get('http://127.0.0.1:8000/course/course/'+id)
      .then(function (res) {
        _this.info=res.data;
      }).catch(function (error) {
        console.log(error)
    })
  },
  mounted(){
    this.play()
  },
  methods:{
    change:function (vid) {
      if (vid==null){
        vid='ff6cdf2e72a688b5117a5e923f22401d_f';
      }
      this.vid=vid;
      this.play();
    },
    play:function () {
      let _this = this;
      var player = polyvObject('#video').videoPlayer({
          wrap: '#player',
          width: 1520,
          height: 889,
          forceH5: true,
          vid: _this.vid,
          code: 'myRandomCodeValue',
          playsafe: function (vid, next) {// 向后端发送请求获取加密的token
              _this.$axios.get("http://127.0.0.1:8000/course/polyv",{
                params:{
                  vid: vid,
                }
              }).then(function (data) {
                  console.log(data);
                  next(data.data.token)
              }).catch(function (error) {
                console.log(error)
              })

          }
      });
    }
  }
}
</script>

<style scoped>
.header{
  width: 100%;
  height: 80px;
  background-color: #14191d;
}
.content{
  width: 100%;
  height: 889px;
}
.left_video{
  height: 889px;
  background-color: #333;
}
.right{
  height: 889px;
  background-color: #34383d;
}
ul{
  padding-left: 20px;
  margin: 0;
}
.course{
  padding: 20px 0 20px 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
}
.course .img{
  width: 121px;
  height: 60px;
  float: left;
  margin-right: 10px;
  margin-left: 20px;
}
.name{
  float: left;
  font-size: 16px;
  color: #b5b9bc;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 60px;
}
.list_name{
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  background: #242424;
}
.ss{
  padding: 0;
  height: 750px;
  overflow: auto ;
}
.section_li{
  list-style: none;
  height: auto;
  position: relative;
}
.section_title{
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #b5b9bc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  position: relative;
}
.number{
  width: 20px;
  height: 20px;
  font-size: 14px;
  border: 1px solid #d0d0d0;
  border-radius: 100%;
  text-align: center;
  line-height: 20px;
  margin-left: 8px;
  display: inline-block;
  background: #14181d;
}
li{
  list-style: none;
}
.lesson:hover{
  color: #fff!important;
  background: #95969a;
}
.section_project{
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.section_project_active{
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: orange;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.time{
  font-size: 12px;
  letter-spacing: 0;
  width: 45px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.status{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #525456;
  margin-left: 5px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.section_cont{
  width: 160px;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
  margin-right: 30px;
  font-size: 12px;
  letter-spacing: .19px;
}
.section_time{
  width: 36px;
  font-size: 12px;
  /*letter-spacing: .23px;*/
  /*white-space: nowrap;*/
  /*text-overflow: ellipsis;*/
  /*overflow: hidden;*/
}
.project_img{
  width: 10px;
  height: 10px;
  margin-left: 15px;
}
</style>

　　player.vue   发起请求逻辑

<template>
    <div id="player">
      <div class="header"></div>
      <div class="content">
        <el-row>
          <el-col :span="19" class="left_video">
            <div id="video"></div>
          </el-col>
          <el-col :span="5" class="right">
            <div class="course">
              <div class="img"><img :src="info.course_img" alt="" height="100%"></div>
              <div class="name">{{info.name}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>

export default {
  name:"player",
  data () {
    return {
      // 生成播放器的参数
      info:{},
      vid:sessionStorage.vid,   #这个是必须要有的，是保利威的视频id
    }
  },
  mounted(){
    this.play()
  },
  methods:{
    play:function () {
      let _this = this;
      var player = polyvObject('#video').videoPlayer({
          wrap: '#player',
          width: 1520,
          height: 889,
          forceH5: true,
          vid: _this.vid,
          code: 'myRandomCodeValue',
          playsafe: function (vid, next) {// 向后端发送请求获取加密的token
              _this.$axios.get("http://127.0.0.1:8000/course/polyv",{
                params:{
                  vid: vid,
                }
              }).then(function (data) {
                  console.log(data);
                  next(data.data.token)
              }).catch(function (error) {
                console.log(error)
              })

          }
      });
    }
  }
}
</script>

　　后端依赖，polyv.py

import time
import requests
import hashlib

class PolyvPlayer(object):
    userId = 'xxxxxx'      #保利威网站上有，
    secretkey = 'xxxxxxx'

    def tomd5(self, value):
        """取md5值"""
        return hashlib.md5(value.encode()).hexdigest()

    # 获取视频数据的token
    def get_video_token(self, videoId, viewerIp, viewerId=None, viewerName='', extraParams='HTML5'):
        """
        :param videoId: 视频id
        :param viewerId: 看视频用户id
        :param viewerIp: 看视频用户ip
        :param viewerName: 看视频用户昵称
        :param extraParams: 扩展参数
        :param sign: 加密的sign
        :return: 返回点播的视频的token
        """
        ts = int(time.time() * 1000)  # 时间戳
        plain = {
            "userId": self.userId,
            'videoId': videoId,
            'ts': ts,
            'viewerId': viewerId,
            'viewerIp': viewerIp,
            'viewerName': viewerName,
            'extraParams': extraParams
        }

        # 按照ASCKII升序 key + value + key + value... + value 拼接
        plain_sorted = {}
        key_temp = sorted(plain)
        for key in key_temp:
            plain_sorted[key] = plain[key]

        plain_string = ''
        for k, v in plain_sorted.items():
            plain_string += str(k) + str(v)

        sign_data = self.secretkey + plain_string + self.secretkey

        # 取sign_data的md5的大写
        sign = self.tomd5(sign_data).upper()

        # 新的带有sign的字典
        plain.update({'sign': sign})

        result = requests.post(
            url='https://hls.videocc.net/service/v1/token',
            headers={"Content-type": "application/x-www-form-urlencoded"},
            data=plain
        ).json()
        data = {} if isinstance(result, str) else result.get("data", {})

        return {"token": data}

　　views.py

from rest_framework.response import Response
from lufei_drf.utils.polyv import PolyvPlayer

from rest_framework.views import APIView
class PolyvAPIView(APIView):
    def get(self, request):
        vid = request.query_params.get("vid")
        remote_addr = request.META.get("REMOTE_ADDR")
        user_id = 1
        user_name = "test"
        polyv_video = PolyvPlayer()
        verify_data = polyv_video.get_video_token(vid, remote_addr, user_id, user_name)
        return Response(verify_data["token"])