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

女爷i 2022-12-01 01:29 339阅读 0赞

1.官方文档[https://help.aliyun.com/document\_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV][https_help.aliyun.com_document_detail_125548.html_spm_a2c4g.11186623.6.1089.3f4b317c0dCNvV]

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

*   Flash
 *   Html5

3.在index.html中引入：

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("创建成功了")
    
                   }
    
                );
            })

[https_help.aliyun.com_document_detail_125548.html_spm_a2c4g.11186623.6.1089.3f4b317c0dCNvV]: https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV