vue中引入js,然后new js里的方法
阿里云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: 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-rate class="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 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: 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: '', // 视频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 > 0) { 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 === 200 && 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 === 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].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: 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 30px 0; 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: 10px 0 30px; li{ margin: 30px 30px 0 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-32 a{ height: 50px; width: 32px; display: block; margin: 0 auto; float: initial; } .bdshare-button-style0-32 p{ font-size: @font-size-24; } .bdshare-button-style0-32 a.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>