一、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: "", //视频封面图 '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: "", //视频封面图 '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', 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', 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"])