阿里云Web播放器Web端使用SDK说明：https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101.searchclickresult.15a92458LoTQhA
vue项目中要使用阿里云的播放器，步骤如下：
先在index.html中引入需要的js,css
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
<script src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-h5-min.js"></script>
<script src="//g.alicdn.com/de/prismplayer/2.7.2/json/json.min.js"></script>
Vue组件中
template代码：
<section class="playBox prism-player videoplayIfram" id="AlivideoPlay"></section>
id是必须的
script代码：
aliyunPlay () {
/* eslint-disable */
this.player = new Aliplayer({
id: 'AlivideoPlay', // template里定义的部分
width: '100%',
height: '100%',
vid : this.AliUrl, // url （必须）
playauth : this.playauth, // （必须）
showBarTime: ,
qualitySort: "asc"
}, function (player) {
// console.log("播放器创建成功");
});
}
Vue完整代码：
<template>
<transition name="slide">
<div class="videoplayback">
<div class="videoPlayTop">
<div class="passwordTip" v-show="ifShowPassword">播放密码：{{passwordTip}}</div>
<div class="goBack" @click="videoplayHidden">
<div class="imgDiv">
<img src="http://static.crecgec.com/wxmobile/left_arrow.png"/>
</div>
</div>
<div class="videoOperation" @click="changeVocon">
<div class="videoOperationImg">
<img src="http://static.crecgec.com/wxmobile/videoOperation.png"/>
</div>
</div>
</div>
<div class="videoplay" ref='videoplay'>
<!--<iframe class="videoplayIfram" :src='AliUrl' frameborder= ></iframe>-->
<section class="playBox prism-player videoplayIfram" id="AlivideoPlay"></section>
<!-- <div class="prism-player videoplayIfram" id="prismPlayer"></div> -->
<div class="noVideoPlay" v-show="noVideoPlayShow">视频暂时无法播放</div>
</div>
<div class="videoOperationCon" v-show="voconShow">
<div class="voconItem" v-if="favorite === null" @click="collectionYes">
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/collection.png"/>
</div>
<div class="divVal">收藏</div>
</div>
<div class="voconItem" v-else @click="collectionNo">
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/collectionHas.png"/>
</div>
<div class="divVal">已收藏</div>
</div>
<div class="voconItem" @click='shareopen'>
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/share.png"/>
</div>
<div class="divVal">分享</div>
</div>
<div class="voconItem" @click="commentConShow">
<div class="divImg">
<img src="http://static.crecgec.com/wxmobile/scorEoperation.png"/>
</div>
<div class="divVal">评分</div>
</div>
</div>
<div class="commentShow" v-show="commentShow">
<div class="commentCon">
<div class="closeCommentCon">
<a class="commentConClose" @click.stop="commentConClose">
<div class="commentConCloseImg">
<img src="http://static.crecgec.com/wxmobile/close.png"/>
</div>
</a>
</div>
<van-rate
class="scroeRate"
v-model="scoreVal"
:size=""
:count=""
color="#398ed1"
void-color="#ceefe8"
/>
<a class="commentSubmit" @click.stop="commentSubmit">提交</a>
</div>
</div>
<div class="playTitle">{{playTitle}}</div>
<div class="playDetails">
<div class="detailsPlay">
<div class="classHour">共{{classHour}}课时</div>
<a class="goCourseDetail" @click="videoplayHidden">课程详情></a>
</div>
</div>
<div class="catalog-list">
<ul v-if="catalogList.length > 0">
<li v-for="(item, index) in catalogList" :key="index" @click="changeVideoPlay(index)">
<div class="catalog-list-title">{{item.sc_name}}</div>
</li>
</ul>
<div class="noLists" v-else>没有数据</div>
</div>
<!-- 分享 -->
<van-actionsheet v-model="shareSelect" title="分享" class="shareCh">
<div class="bdsharebuttonbox bdshare-button-style0-32">
<div class="shareline" @click='Qzshare'>
<a class="bds_qzone" data-cmd="qzone" href="javascript:;"></a>
<p>QQ空间</p>
</div>
<div class="shareline" @click='tsina'>
<a class="bds_tsina" data-cmd="tsina" href="javascript:;"></a>
<p>微博</p>
</div>
<div class="shareline" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">
<a class="bds_copyurl" data-cmd="copyurl" href="javascript:;"></a>
<p>复制链接</p>
</div>
</div>
</van-actionsheet>
</div>
</transition>
</template> <script type="text/ecmascript-6">
import {mapGetters} from 'vuex'
import bdshare from 'bdshare'
import { Toast } from 'vant'
/*
import 'common/js/aliplayer-h5-min.js'
import 'common/js/json.min.js'
*/ export default {
props: {
catalogList: {
type: Array,
default: () => []
},
lession: {},
favorite: '',
videoPlayIndex: {
type: Number,
default:
},
c_id: {
type: Number,
default:
},
videoplayShow: {
type: Boolean,
default: false
}
},
data () {
return {
videoSrc: '',
playTitle: '',
classHour: ,
voconShow: false,
isCollect: false,
scoreVal: , // 当前分值
commentShow: false,
AliUrl: '', // 视频url
vid: '',
playauth: '',
shareSelect: false,
noVideoPlayShow: false,
passwordTip: '',
ifShowPassword: false,
copyUrl: window.location.href,
submitIsCollection: true,
s_id: '', // 课时ID
player: null,
shareConfig: {
bdText: this.$store.state.courseName,
bdUrl: this.$store.state.bdUrl,
bdPic: this.$store.state.bdPic
}
}
},
watch: {
videoplayShow (val) {
if (val === true) {
this.classHour = this.catalogList.length
if (this.catalogList.length > ) {
this.changeVideoPlay(this.videoPlayIndex)
}
}
}
},
methods: {
videoplayHidden () {
this.voconShow = false
this.$emit('videoHidden', false)
},
changeVideoPlay (index) {
if (this.player) {
this.player.dispose()
var oSection = document.createElement('section')
oSection.className = 'playBox prism-player videoplayIfram'
oSection.id = 'AlivideoPlay'
this.$refs.videoplay.appendChild(oSection)
}
this.videoOverdue(this.catalogList[index].id, index)
},
changeVocon () {
this.voconShow = !this.voconShow
},
// 收藏
collectionYes () {
let _this = this
if (this.submitIsCollection) {
this.submitIsCollection = false
_this.axios({
method: 'post',
url: _this.api.course.favorite,
data: {
cid: this.c_id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === && response.data.states === true) {
_this.$emit('changeFavorites', true)
}
_this.submitIsCollection = true
})
.catch(function (error) {
console.log(error)
_this.submitIsCollection = true
})
}
},
// 取消收藏
collectionNo () {
let _this = this
if (this.submitIsCollection) {
_this.axios({
method: 'post',
url: _this.api.course.unfavorite,
data: {
cid: this.c_id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === && response.data.states === true) {
_this.$emit('changeFavorites', true)
}
_this.submitIsCollection = true
})
.catch(function (error) {
console.log(error)
_this.submitIsCollection = true
})
}
},
// 评分提交
commentSubmit () {
let _this = this
_this.axios({
method: 'post',
url: _this.api.course.ajaxpinglunadd,
data: {
sec_score: this.scoreVal,
s_id: this.s_id,
c_id: this.c_id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === && response.data.success === true) {
_this.$toast('评分成功!')
_this.evaluation = ''
_this.commentConClose()
}
})
.catch(function (error) {
console.log(error)
})
},
// 打开评分弹出层
commentConShow () {
this.commentShow = true
},
// 关闭评分弹出层
commentConClose () {
this.commentShow = false
},
shareopen () {
this.shareSelect = true
},
Qzshare () {
bdshare.qzone(this.shareConfig)
},
tsina () {
bdshare.tsina(this.shareConfig)
},
// 查看课程视频是否过期
videoOverdue (id, index) {
let _this = this
_this.axios({
method: 'get',
url: _this.api.course.study,
params: {
id: id,
token: _this.api.token,
client: _this.api.encodeClient
}
})
.then(function (response) {
if (response.status === && response.data.state === true) {
_this.noVideoPlayShow = false
_this.passwordTip = _this.catalogList[index].playpass
if (_this.catalogList[index].videolocation === 'aliyun') {
_this.ifShowPassword = false
} else {
_this.ifShowPassword = true
}
_this.AliUrl = response.data.data.lession.yun_url
_this.playauth = response.data.data.lession.PlayAuth
_this.playTitle = _this.catalogList[index].sc_name
_this.s_id = _this.catalogList[index].id
_this.aliyunPlay()
} else {
_this.noVideoPlayShow = true
}
})
.catch(function (error) {
console.log(error)
})
},
onCopy (e) {
this.shareSelect = false
Toast('复制链接成功')
},
onError () {
this.shareSelect = false
Toast('复制链接失败')
},
aliyunPlay () {
/* eslint-disable */
this.player = new Aliplayer({
id: 'AlivideoPlay',
width: '100%',
height: '100%',
vid : this.AliUrl,
playauth : this.playauth,
showBarTime: ,
qualitySort: "asc"
}, function (player) {
// console.log("播放器创建成功");
});
}
},
components: {
...mapGetters([
'courseName', 'bdUrl', 'bdPic'
])
}
}
</script> <style scoped lang="less" rel="stylesheet/less" type="text/less">
@import "../../common/less/variable"; .videoplayback{
position: absolute;
z-index: ;
top: -90px;
bottom: ;
left: ;
right: ;
background-color: #f3f5f7;
.videoPlayTop{
position: relative;
height: 90px;
background-color: rgba(, , , 0.7);
.goBack{
margin-left: 10px;
width: 58px;
height: 90px;
vertical-align: middle;
text-align: center;
display: flex;
justify-content:center;
align-items:Center;
float: left;
.imgDiv{
width: 18px;
height: 30px;
img{
display: inline-block;
float: left;
width: %;
height: %;
}
}
}
.passwordTip{
position: absolute;
left: %;
top: %;
transform: translate(-%, -%);
color: #fff;
font-size: 28px;
}
.videoOperation{
width: 80px;
height: 90px;
float: right;
margin-right: 10px;
display: flex;
justify-content:center;
align-items:Center;
.videoOperationImg{
width: 30px;
height: 6px;
img{
display: inline-block;
float: left;
width: %;
height: %;
}
}
}
}
.videoplay{
width: %;
height: 420px;
background-color: rgba(, , , 0.7);
position: relative;
.videoplayIfram{
width: %;
height: 420px;
}
.noVideoPlay{
position: absolute;
color: #fff;
left: %;
top: %;
transform: translate(-%, -%);
}
}
.videoOperationCon{
position: absolute;
background-color: #fff;
border-radius: 4px;
margin-top: 10px;
top: 80px;
right: 30px;
display: flex;
flex-direction: column;
padding-bottom:26px;
padding-right: 26px;
padding-left: 26px;
.voconItem{
line-height: 28px;
padding-top: 26px;
&:first-child{
padding-top: 22px;
}
.divImg{
width: 30px;
height: 28px;
display: inline-block;
img{
vertical-align: top;
width: %;
height: %;
}
}
.divVal{
display: inline-block;
font-size: @font-size-;
color: #;
margin-left: 10px;
}
}
}
.commentShow{
position: fixed;
left: ;
top: ;
right: ;
bottom: ;
z-index: ;
background-color: rgba(, , , 0.5);
.commentCon{
position: absolute;
width: %;
padding-bottom: 50px;
/*height: 200px;*/
background-color: #fff;
left: %;
top: %;
transform: translate(-%, -%);
border: 1px solid #eeeeee;
border-radius: 10px;
.closeCommentCon{
overflow: hidden;
.commentConClose{
float: right;
padding: 10px;
margin-right: 10px;
.commentConCloseImg{
width: 30px;
height: 30px;
img{
width: %;
height: %;
}
}
}
}
.scroeRate{
margin-top: 10px;
}
.commentSubmit{
display: inline-block;
padding: 5px 10px;
color: #fff;
font-size: @font-size-;
line-height: 40px;
border-radius: 10px;
background-color: #398ed1;
margin-top: 30px;
}
}
}
.playTitle{
color: #;
font-size: @font-size-;
text-align: left;
background-color: #fff;
padding: 40px 30px;
font-weight: bold;
}
.playDetails{
padding: 20px 30px ;
margin-top: 20px;
background-color: #ffffff;
overflow: hidden;
.detailsPlay{
border-bottom: 1px solid #dcdcdc;
overflow: hidden;
padding-bottom: 20px;
.classHour{
float: left;
color: #;
font-size: @font-size-;
}
.goCourseDetail{
float: right;
color: #8a8a8a;
font-size: @font-size-;
}
}
}
.catalog-list{
text-align: left;
background-color: #fff;
overflow: hidden;
ul{
overflow: hidden;
padding: 10px 30px;
li{
margin: 30px 30px ;
line-height: 24px;
overflow: hidden;
.catalog-list-title{
float: left;
margin-left: 20px;
color: #;
font-size: @font-size-;
}
}
.on{
.catalog-list-title{
color: #398ed1;
}
}
}
.noLists{
overflow: hidden;
padding: 20px;
font-size: @font-size-;
text-align: center;
}
}
}
.slide-enter-active,.slide-leave-active{
transition: all .3s
}
.slide-enter,.slide-leave-to{
transform: translate3d(%, , )
}
.shareCh{
overflow: hidden;
.shareline{
height: 120px;
width: 150px;
padding-top:36px;
text-align:center;
float: left;
overflow: hidden;
}
.bdshare-button-style0- a{
height: 50px;
width: 32px;
display: block;
margin: auto;
float: initial;
}
.bdshare-button-style0- p{
font-size: @font-size-;
}
.bdshare-button-style0- a.bds_qzone{
background: url(http://static.crecgec.com/wxmobile/kongjian.png) 0 0 no-repeat;
background-size: % auto;
}
.bdshare-button-style0- a.bds_tsina{background: url(http://static.crecgec.com/wxmobile/weibo.png) 0 0 no-repeat;
background-size: % auto;}
.bdshare-button-style0- a.bds_copyurl{background: url(http://static.crecgec.com/wxmobile/copyUrl.png) 0 0 no-repeat;
background-size: % auto;}
}
</style>