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>

View Code

　　视频组件实现代码

<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>

View Code

　　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 hashlibclass PolyvPlayer(object):userId = 'xxxxxx'      #保利威网站上有，secretkey = 'xxxxxxx'def tomd5(self, value):"""取md5值"""return hashlib.md5(value.encode()).hexdigest()# 获取视频数据的tokendef 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 Responsefrom 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 = 1user_name = "test"polyv_video = PolyvPlayer()verify_data = polyv_video.get_video_token(vid, remote_addr, user_id, user_name)return Response(verify_data["token"])

转载于:https://www.cnblogs.com/12345huangchun/p/10659390.html

vue_drf之视频接口相关推荐

VGA、DVI、HDMI、DP、Type-C不同视频接口有啥区别？
在我们的生活中,无论是电脑.电视还是投影设备等等,都离不开视频输出接口,尤其在显卡上面,通常会出现3种甚至更多的接口.很多人并不了解其中的区别,觉得只要有画面输出就可以了,其实对于很多显示器来说并非如 ...
dp线和hdmi区别_干货| 认识VGA、DVI、HDMI、DP视频接口
在我们的生活中,无论是电脑.电视还是投影设备等等,都离不开视频输出接口,尤其在显卡上面,通常会出现3种甚至更多的接口.今天,我们就来和大家说一说VGA.DVI.HDMI.DP四种接口之间有什么区别.一 ...
视频光端机各种视频接口的传输距离是多少？
视频光端机将1到多路的模拟视频信号通过各种编码转换成光信号通过光纤介质进行远距离传输.那么,对于视频光端机的各种视频接口以及传输距离你是否详细了解过呢?接下来我们就跟随飞畅科技的小编一起来看看吧! 一 ...
相机标准之onvif---开放型网络视频接口论坛onvif 简介
什么是ONVIF ? ONVIF:原意为开放型网络视频接口论坛,即 Open Network Video Interface Forum ,是安讯士.博世.索尼等三家公司在2008年共同成立的一个国 ...
计算机主机的声音线是哪个好,四大常用视频接口对比，你的电脑是哪种接口？...
5G时代即将到来,网速也将空前提升,视频将成为更主要的信息传播途径.古城堡发明印刷机后把所有的书印刷一遍,互联网出现后把所有东西数据化一遍,那么5G出现后文字信息将被视频化重演一遍.电视.显示屏.投影 ...
计算机视频DVI接口,HDMI、DVI 电脑为什么会有这么多种视频接口？
视频接口多样性在我们的电脑出现的历史中,有很多接口出现了,仅视频接口我们目前能常接触到的就有VGA.DVI.HDMI和DP接口,而且到目前为止,还是有很多显卡还在支持老式的VGA.DVI接口. DV ...
计算机主机的声音线是哪个好,电脑显示器连接线哪种接口好|VGA、HDMI视频接口选哪个好...
电脑显示器和主机之间需要专用线路来连接,显示器和主机箱通常会同时配置多种视频接口,比较常见的视频接口有VGA.DVI.HDMI和DP,其中VGA和HDMI比较常用.视频接口这么多种,要选择哪一种比较好 ...
台式机dp接口_了解笔记本电脑的各种视频接口
随着笔记本电脑的性能越来强大.越来越多的玩家除了需要它的"移动"属性外,还让它扮演了传统台式机的作用,外出时方便携带,回到固定地点,比如家里.办公室内,把它连接显示器使用,享受更大 ...
计算机视频接口有,HDMI，DVI为什么我们的计算机有这么多视频接口？
[PConline DIY旧驱动程序]不久前,我刚刚更换了一台显示器,并且该显示器配备了各种视频电缆,如果我自己使用它,则只能使用其中一根. 实际上,在购买计算机时,您还将看到显示器和图形卡具有多个接 ...
视频接口CVBS/Component/BNC/VGA/DVI/HDMI/SDI/DP/Type-C
视频接口随着新技术的不断出现层出不穷,本文综合CSDN上关于视频接口介绍较为详细的如下两篇文章的内容,对市面上曾经以及目前常用的视频接口进行详细的介绍. 常见视频接口(HDMI/VGA/SDI/Cma ...