vue使用阿里云视频点播

vue使用阿里云视频点播——videoId + playauth的方式

一. 上传视频
官方文档https://help.aliyun.com/document_detail/52204.htm?spm=a2c4g.11186623.0.0.4885a393kRPguB#task-1995648

1.在index.html页面引入JavaScript脚本。

<script src="/static/aliyun-oss-sdk.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.2.min.js"></script>
<script src="/static/es6-promise.min.js"></script>

2. 具体代码，已有视频时回显并且可以查看视频、删除视频；没有视频显示上传视频

<template>
  <div class="container">
    <div class="upload">
      <div class="preview" @click="onpreview(file)" v-if="coverURL">
        <img :src="coverURL" alt="" class="imgUrl">
        <div class="play-icon el-icon-video-play"></div>
        <span class="el-icon-circle-close cancel" @click.stop="deleteVideo"></span>
      </div>
      <div>
        <input type="file" id="fileUpload" @change="fileChange($event)">
        <label class="status">上传状态: <span>{{statusText}}</span></label>
      </div>
      <div class="upload-type">
        <button @click="authUpload" :disabled="uploadDisabled">开始上传</button>
        <button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
        <button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>
        <span class="progress">上传进度: <i id="auth-progress">{{authProgress}}</i> %</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { getVideoUploadAuth, refreshVideoUploadAtuh, getPlayAuth } from '@/api/common.js' // 后端提供的接口：获取视频上传凭证、刷新上传凭证、获取视频播放凭证
  import config from '@/utils/videoSort.js' // 后端提供的视频分类信息，包含sort名、cateId、description等
  import Previewer from '@/components/VideoPlayer/index' // 查看视频

  export default {
    model: {
      prop: 'value',
      event: 'sync'
    },
    props: {
      value: {
        type: [Array, String],
        default: () => []
      },
      sort: { // 后端提供的视频分类
        type: String,
        default: ''
      },
      vId: { // 已有视频时父组件传入的vid
        type: String,
        default: ''
      }
    },
    data () {
      return {
        videoSortParams: '', // 根据父组件传入的sort，查找config中对应的分类信息
        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '123456', // 必填，只需有值即可
        file: null,
        authProgress: 0,
        uploadDisabled: true,
        resumeDisabled: true,
        pauseDisabled: true,
        uploader: null,
        statusText: '',
        videoId: '',
        coverURL: '' // 视频封面
      }
    },
    watch: {
      vId: {
        handler(newValue, oldValue) {
          if (newValue!=='') {
            this.videoId = newValue
            getPlayAuth(newValue).then(res => {
              this.$set(this, 'coverURL', res.videoMeta.coverURL)
            })
          }
        },
        deep: true,
        immediate: false
      }
    },
    created () {
      // 有视频时调用视频播放凭证获取视频封面回显，点击即可播放视频
      this.videoId = this.vId
      if (this.videoId!=='') {
        getPlayAuth(this.videoId).then(res => {
          this.$set(this, 'coverURL', res.videoMeta.coverURL)
        })
      }
      // 根据父组件传入的sort，查找config中对应的分类信息
      this.videoSortParams=config.videoSort.filter(item => item.sort===this.sort)[0]
    },
    methods: {
      fileChange (e) {
        this.file = e.target.files[0]
        if (!this.file) {
          alert("请先选择需要上传的文件!")
          return
        }
        var Title = this.file.name
        var userData = '{"Vod":{}}'
        if (this.uploader) {
          this.uploader.stopUpload()
          this.authProgress = 0
          this.statusText = ""
        }
        this.uploader = this.createUploader()
        this.uploader.addFile(this.file, null, null, null, userData)
        this.uploadDisabled = false
        this.pauseDisabled = true
        this.resumeDisabled = true
      },
      authUpload () {
        // 然后调用 startUpload 方法, 开始上传
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.uploadDisabled = true
          this.pauseDisabled = false
        }
      },
      // 暂停上传
      pauseUpload () {
        if (this.uploader !== null) {
          this.uploader.stopUpload()
          this.resumeDisabled = false
          this.pauseDisabled = true
        }
      },
      // 恢复上传
      resumeUpload () {
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.resumeDisabled = true
          this.pauseDisabled = false
        }
      },
      createUploader (type) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: self.timeout || 10000,
          partSize: self.partSize || 1048576,
          parallel: self.parallel || 5,
          retryCount: self.retryCount || 3,
          retryDuration: self.retryDuration || 2,
          region: self.region,
          userId: self.userId,
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            self.uploadDisabled = false
            self.resumeDisabled = false
            self.statusText = '添加文件成功, 等待上传...'
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            // 以下官方注释，没有删
            // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
            // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
            // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
            // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
            // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
            // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
            if (!uploadInfo.videoId) {
              let title = uploadInfo.file.name.substr(0, uploadInfo.file.name.lastIndexOf('.'))
              // 获取上传凭证需要的参数，可选
              let params = {
                title: title, fileName: uploadInfo.file.name, cateId: self.videoSortParams.cateId, description: self.videoSortParams.description, fileSize: uploadInfo.file.size
              }
              getVideoUploadAuth(params).then(data => {
                let uploadAuth = data.uploadAuth
                let uploadAddress = data.uploadAddress
                let videoId = data.videoId
                self.videoId = data.videoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
              })
              self.statusText = '文件开始上传...'
              console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
              // 如果videoId有值，根据videoId刷新上传凭证
              refreshVideoUploadAtuh(uploadInfo.videoId).then(data => {
                let uploadAuth = data.uploadAuth
                let uploadAddress = data.uploadAddress
                let videoId = data.videoId
                self.videoId = data.videoId
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
              })
            }
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            self.statusText = '文件上传成功!'
          },
          // 文件上传失败
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            self.statusText = '文件上传失败!'
          },
          // 取消文件上传
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            self.statusText = '文件已暂停上传'
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          onUploadProgress: function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
            self.statusText = '文件上传中...'
          },
          // 上传凭证超时
          onUploadTokenExpired: function (uploadInfo) {
            // 以下官方注释，没有删
            // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
            // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
            // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
            refreshVideoUploadAtuh(uploadInfo.videoId).then(({data}) => {
              let uploadAuth = data.UploadAuth
              uploader.resumeUploadWithAuth(uploadAuth)
              console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
            })
            self.statusText = '文件超时...'
          },
          // 全部文件上传结束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
            self.statusText = '文件上传完毕'
            self.$message.success('视频上传完毕')
            // 上传成功返回视频id给父组件
            self.$emit('sync', self.videoId)
          }
        })
        return uploader
      },
      // 预览视频
      onpreview (file) {
        if (this.videoId === ''||!this.videoId) {
          this.$message.error('暂无视频！')
          return
        }
        const conf = {
          width: '400px',
          destroyOnClose: true,
          closeOnClickModal: true,
          showClose: false,
          customClass: 'preview-video-dialog'
        }
        // 使用封装的dialog播放视频
        // url即videoId
        this.$dialog(conf, Previewer, { url: this.videoId, type: 'video/mp4', autoplay: true })
      },
      deleteVideo() {
        this.videoId = ''
        this.coverURL = ''
        this.$emit('sync', this.videoId)
      }
    },
  }
</script>
<style lang='scss' scoped>
.preview {
  width: 200px;
  text-align: center;
  position: relative;
  .imgUrl {
    width: 100%;
  }
  .play-icon {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 27px;
    cursor: pointer;
    transform: translate(-50%, -50%);
  }
  .cancel {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 27px;
    cursor: pointer;
    color: #fff;
  }
}
</style>

二. 播放
官方文档https://help.aliyun.com/document_detail/125572.html

<template>
  <div class="player">
    <div class="prism-player" id="player-con"></div>
  </div>
</template>

<script>
import { getPlayAuth } from '@/api/common.js'

export default {
  props: {
    vId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      videoId: '',
      playAuth: '',
      coverURL: ''
    }
  },
  mounted () {
  	// 根据父组件传入的videoId调用接口获取播放凭证和视频封面
    if (this.vId) {
      getPlayAuth(this.vId).then(res => {
        this.videoId = this.vId
        this.playAuth = res.playAuth
        this.coverURL = res.videoMeta.coverURL
      }).then(() => {
        this.getVideo()
      }).catch(err => {
        this.$opener.close()
      })
    }
  },
  methods: {
    getVideo() {
      var player = new Aliplayer({
        "id": "player-con",
        "vid": this.videoId,
        "playauth": this.playAuth,
        "width": "100%",
        "height": "500px",
        "autoplay": true,
        "cover": this.coverURL
      }, function (player) {
          console.log("The player is created");
        }
      );
    }
  }
}
</script>
<style lang='scss' scoped>
.player {
  width: 100%;
  height: 100%;
  background: #000;
  p {
    color: #fff;
  }
}
</style>

三. uniapp-微信小程序使用视频点播播放

方式一：根据videoId获取播放凭证接口中，后端返回一个视频地址，直接放在video标签上展示
方式二：在微信小程序中跳H5，在H5中使用官网提供的sdk