vue_drf之视频接口
2024-10-21 03:58:03
一、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}}人在学 课程总时长：{{info.lessons}}课时/{{info.pub_lessons}}课时 难度：{{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"])
最新文章
- 关于URLEnCode,URLDeCode,Base64,公钥私钥
- 人工鱼群算法-python实现
- 笔记本_thinkpad_e40_FN
- 如何杀掉当前正在执行的hadoop任务
- github源码开源区块链浏览器
- MySQL汇总数据
- PHP: 异常exception
- ORACLE数据库编程
- Java学习之控制跳转语句
- SpriteBuilder切换解决方案以及CCB的修改与保存
- ZooKeeper 权限管理
- 【easy】108. Convert Sorted Array to Binary Search Tree
- cropper.js 裁剪图片
- 20155333 《网络对抗》 Exp8 Web基础
- Win10环境配置Bitcoin Core节点
- C#操作json类型数据
- rdesktop 源码安装
- 【C#】多线程解决UI界面卡死的问题
- AutoCAD二次开发——AutoCAD.NET API开发环境搭建
- Tomcat – java.lang.OutOfMemoryError: PermGen space Cause and Solution