vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog 弹出aliplayer播放

先上效果图

 

1.需要将当前版javascript css脚本导入index.html（最新版请看官网） 

官网：aliyun

这里我给index.html位置防止有人不知道

 我的版本：

    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css" />  
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-min.js"></script>

2.在vue中使用aliplayer

<router-link to="/courseinfo" @click.native="playVedio"><li style="clear: both;"><div class="smallcircle"></div><p>第一节</p></li></router-link>

      playVedio(){

            //const height=this.$refs.main.clientHeight;

            this.disable=true;

            //console.log("我被执行了")

                 

        },

使用a标签控制dialog弹出

 <el-dialog :destroy-on-close="true"  @opened="opena"  :visible="disable" title="任务预览"  @close="closedialog">
                <div > 
                         <div id="J_prismPlayer" class="prism-player"/>
                </div>
            </el-dialog>

dialog注册打开后opened事件（因为aliplayer的创建时机是需要控制创建时机的，不然会找不到容器）

opened事件注册aliplayer

opena(){
  console.log('...')
  new Aliplayer({
      id: 'J_prismPlayer',
      vid:'6405be34fe984a16a3253b95b71e29dd',#播放id
      playauth:'', #播放凭证
      width: '100%', 
      height: '450px',
      // 以下可选设置  
      qualitySort: 'asc', // 清晰度排序
      mediaType: 'video', // 返回音频还是视频
      autoplay: false, // 自动播放
      isLive: false, // 直播
      rePlay: false, // 循环播放
      preload: true,
      controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
      useH5Prism: true, // 播放器类型：html5
    }, function (player) {
      console.log('播放器创建成功')
    });
}