阿里云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 = newAliplayer({id:'AlivideoPlay',  //template里定义的部分width: '100%',height:'100%',vid :this.AliUrl,  //url （必须）playauth : this.playauth,   //（必须）showBarTime: 3000000,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=0 ></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-rateclass="scroeRate"v-model="scoreVal":size="25":count="5"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 bdsharefrom 'bdshare'import { Toast }from 'vant'/*import 'common/js/aliplayer-h5-min.js'import 'common/js/json.min.js'*/exportdefault{props: {catalogList: {type: Array,default: () =>[]},lession: {},favorite:'',videoPlayIndex: {type: Number,default: 0},c_id: {type: Number,default: 0},videoplayShow: {type: Boolean,default: false}},data () {return{videoSrc:'',playTitle:'',classHour:0,voconShow:false,isCollect:false,scoreVal:5, //当前分值commentShow: false,AliUrl:'', //视频urlvid: '',playauth:'',shareSelect:false,noVideoPlayShow:false,passwordTip:'',ifShowPassword:false,copyUrl: window.location.href,submitIsCollection:true,s_id:'', //课时IDplayer: 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.lengthif (this.catalogList.length > 0) {this.changeVideoPlay(this.videoPlayIndex)}}}},methods: {videoplayHidden () {this.voconShow = falsethis.$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= thisif (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 === 200 && response.data.states === true) {_this.$emit('changeFavorites', true)}_this.submitIsCollection= true}).catch(function (error) {console.log(error)_this.submitIsCollection= true})}},//取消收藏
collectionNo () {let _this= thisif (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 === 200 && 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 === 200 && 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 === 200 && response.data.state === true) {_this.noVideoPlayShow= false_this.passwordTip=_this.catalogList[index].playpassif (_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 = falseToast('复制链接成功')},onError () {this.shareSelect = falseToast('复制链接失败')},aliyunPlay () {/*eslint-disable*/this.player = newAliplayer({id:'AlivideoPlay',width:'100%',height:'100%',vid :this.AliUrl,playauth :this.playauth,showBarTime:3000000,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: 500;top:-90px;bottom:0;left:0;right:0;background-color: #f3f5f7;.videoPlayTop{position: relative;height: 90px;background-color: rgba(0, 0, 0, 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:100%;height:100%;}}}.passwordTip{position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);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:100%;height:100%;}}}}.videoplay{width:100%;height: 420px;background-color: rgba(0, 0, 0, 0.7);position: relative;.videoplayIfram{width:100%;height: 420px;}.noVideoPlay{position: absolute;color: #fff;left:50%;top:50%;transform: translate(-50%, -50%);}}.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:100%;height:100%;}}.divVal{display: inline-block;font-size: @font-size-22;color: #313131;margin-left: 10px;}}}.commentShow{position:fixed;left:0;top:0;right:0;bottom:0;z-index: 500;background-color: rgba(0, 0, 0, 0.5);.commentCon{position: absolute;width:90%;padding-bottom: 50px;/*height: 200px;*/background-color: #fff;left:50%;top:50%;transform: translate(-50%, -50%);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:100%;height:100%;}}}}.scroeRate{margin-top: 10px;}.commentSubmit{display: inline-block;padding: 5px 10px;color: #fff;font-size: @font-size-30;line-height: 40px;border-radius: 10px;background-color: #398ed1;margin-top: 30px;}}}.playTitle{color: #313131;font-size: @font-size-26;text-align: left;background-color: #fff;padding: 40px 30px;font-weight: bold;}.playDetails{padding: 20px 30px0;margin-top: 20px;background-color: #ffffff;overflow: hidden;.detailsPlay{border-bottom: 1px solid #dcdcdc;overflow: hidden;padding-bottom: 20px;.classHour{float: left;color: #313131;font-size: @font-size-22;}.goCourseDetail{float: right;color: #8a8a8a;font-size: @font-size-22;}}}.catalog-list{text-align: left;background-color: #fff;overflow: hidden;ul{overflow: hidden;padding: 10px030px;li{margin: 30px 30px0 0;line-height: 24px;overflow: hidden;.catalog-list-title{float: left;margin-left: 20px;color: #313131;font-size: @font-size-20;}}.on{.catalog-list-title{color: #398ed1;}}}.noLists{overflow: hidden;padding: 20px;font-size: @font-size-20;text-align: center;}}}.slide-enter-active,.slide-leave-active{transition: all .3s}.slide-enter,.slide-leave-to{transform: translate3d(100%, 0, 0)}.shareCh{overflow: hidden;.shareline{height: 120px;width: 150px;padding-top:36px;text-align:center;float: left;overflow: hidden;}.bdshare-button-style0-32a{height: 50px;width: 32px;display: block;margin:0auto;float: initial;}.bdshare-button-style0-32p{font-size: @font-size-24;}.bdshare-button-style0-32a.bds_qzone{background: url(http://static.crecgec.com/wxmobile/kongjian.png) 0 0 no-repeat;background-size: 100%auto;}.bdshare-button-style0-32 a.bds_tsina{background: url(http://static.crecgec.com/wxmobile/weibo.png) 0 0 no-repeat;background-size: 100%auto;}.bdshare-button-style0-32 a.bds_copyurl{background: url(http://static.crecgec.com/wxmobile/copyUrl.png) 0 0 no-repeat;background-size: 100%auto;}}</style>

demo地址下载