vue ali-oss 视频播放、下载封装组件

上面文章 https://blog.csdn.net/cxz792116/article/details/96906166 讲到了 ali-oss 视频上传组件的封装
单如果想播放或者利用浏览器下载，还需要进一步的调用ali-oss 的接口文档，下面就开始这方面的
介绍。

1、获取 oss-ali , client 对象参数

import OSS from "ali-oss"
	
// 说明，直接调用阿里云接口，有可能信息会暴露。建议请求自己后台加密后的接口

OSS.urllib.request(  后台接口, { method: 'GET' }, (err, response) => {
		let result = null
        if (err) return _this.$message.error('网络错误！')
        try {
          result = JSON.parse(response)
        } catch (e) {
          result = null
          return alter('网络错误！')
        }
       this.client = new OSS({
	      region: 'oss-cn-hangzhou',
	      accessKeyId: '',
	      accessKeySecret: '',
	      bucket: 'Your bucket name',
	      secure: false
    })

2、编写页面

  

    

      

        

          {{item.fileName}}
        
        

          点击下载
          播放
        
      
    
    
      
    
  

效果：

3、组件传值，请求播放、下载地址（返回的播放和下载地址都是一个值）
组件中接受一个数组，进行分步下载和播放，特别说明 这个数组的数据是和你上传的返回的数据必须一致
否则无法找到对对应资源

// 以上传返回的值如下为例，将这些值传给此组件
this.downList = ["video/20190719/ms4M1A_1563523503744.mp4","video/20190719/GcYHFM_1563523503747.mp4"]

 // 异步，获取视屏播放和下载地址
    async getBuffer () {
      const len = this.downList.length 
      let downLoadLength = 0
      if(len <= 0) return false
      // 蒙版动画
      this.startLoading()
      for (let i = 0; i < len; i++) {
        try {
          downLoadLength++
          let result = await this.client.signatureUrl(this.downList[i]);
          let obj = {
            fileName: this.downList[i].split('/')[2],
            url: result
          }
          this.fileList.push(obj)
          if(downLoadLength === len){
             this.endLoading()
          }
        } catch (e) {
          this.endLoading()
          this.alter('网络错误，请稍后再试试！')
        }
      }
    }

4、点击下载

	downVideo (url) {
    const a = document.createElement('a')
     a.setAttribute('download', 'aaa') 
     a.setAttribute('href', url) 
     a.click() 
   }

效果：

5、点击播放

showVideo (url) {
      this.dialogVideo = true
      this.videoUrl = url
    }

效果：

6、完整代码