阿里雲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>

demo地址下載