阿里云Aliplayer视频播放（web播放器）

1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV

2.阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术

•  Flash
•  Html5

3.在index.html中引入：

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

 

4.按需引入（根目录下有个lib文件夹，里面是下载好的这些配置js）：

import "../../../lib/aliyun-upload-sdk-1.5.0.min.js"
import "../../../lib/aliyun-oss-sdk-5.3.1.min.js"

 

5.html部分：

div class="prism-player" id="myPlayer"></div>

 

6.初始化部分：

data() {
    return {
      isPlay: false,
      PlayAuth:'',
      videoUrl:'',
      videoId:'',
      coverUrl:'',
      player:''
    };
  },

 

7.获取凭证，拿到视频id

this.getToken(getisvideoApi,{'videoId':this.resourceUrl},res=>{



        //通过接口拿到凭证

          this.PlayAuth=res.data.PlayAuth

        

        //拿到封面

          this.coverUrl=res.data.VideoMeta.CoverURL

          var that=this

          //先判断是否有没有播放器容器，存在的话就要注销

            if(this.player){

              this.player.dispose()

            }

            this.player = new Aliplayer({

                "id": "myPlayer",      //播放器外层容器的dom元素id

                "vid":this.resourceUrl,     //视频id

                "playauth": this.PlayAuth, // 播放凭证

                "width": "100%",        //样式

                "height": "700px",     //样式

                "autoplay": false,  // 自动播放

                "isLive": false,    // 直播

                "cover": this.coverUrl,     //播放器默认封面图片,需要autoplay为’false’时，才生效

                "rePlay": false,    // 循环播放

                "playsinline": true,  //H5是否内置播放

                "preload": false,    //播放器自动加载

                "language": "zh-cn",     

                "controlBarVisibility": "always",  //控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在

                "useH5Prism": true,    //指定使用H5播放器

                'encryptType':1,

               },function(){

                    // console.log("playAuth:",that.playAuth);

                    //  player.replayByVidAndPlayAuth(that.resourceUrl,that.PlayAuth)

                    console.log("创建成功了")

               }

            );
        })