部署授權(quán)服務(wù)

目前客戶端上傳SDK支持兩種授權(quán)方式：

• 使用上傳地址和憑證上傳
• 使用STS方式上傳
  點(diǎn)播默認(rèn)推薦使用上傳地址和憑證的方式庇绽，其相比STS方式更具優(yōu)勢(shì)教届，兩種方式對(duì)比參考 上傳(播放)憑證和STS方式對(duì)比碳却。

整體步驟

1.請(qǐng)求上傳地址加憑證或STS涂滴；
2.初始化上傳實(shí)例羔沙，實(shí)例化上傳有兩種方式：上傳地址加憑證和STS方式钉凌；
3.回調(diào)設(shè)置建钥，所有的上傳狀態(tài)包括進(jìn)度专筷，上傳成功糖埋，上傳失敗忿项，憑證過(guò)期都在這里進(jìn)行處理闷旧；
4.添加上傳文件進(jìn)入上傳列表长豁，目前主要支持視頻文件和圖片文件的上傳；
5.啟動(dòng)上傳忙灼；
6.回調(diào)處理蕉斜；

實(shí)現(xiàn)

首先在index.html頁(yè)面上引入下面三個(gè)JS腳本，視頻上傳SDK下載 缀棍。

    <script src="/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
    <script src="/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
    <script src="/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script>

因?yàn)轫?xiàng)目需要的只是一個(gè)簡(jiǎn)單的上傳功能宅此，不需要用戶自己輸入過(guò)期時(shí)間、重新上傳間隔時(shí)間等等爬范、所以都用了默認(rèn)值父腕，只需要直接上傳就可以了，需要自定義更多可以查看JavaScript上傳SDK文檔,html代碼：

        <div>
          <input type="file" id="fileUpload" @change="fileChange($event)" />
          <label class="status">
            上傳狀態(tài):
            <span>{{statusText}}</span>
          </label>
        </div>
        <div class="upload-type">
          <button @click="authUpload" :disabled="uploadDisabled">開(kāi)始上傳</button>
          <button @click="pauseUpload" :disabled="pauseDisabled">暫停</button>
          <button :disabled="resumeDisabled" @click="resumeUpload">恢復(fù)上傳</button>
          <span class="progress">
            上傳進(jìn)度:
            <i id="auth-progress">{{authProgress}}</i> %
          </span>
        </div>

JS代碼：

   fileChange(e) {
      this.file = e.target.files[0];
      if (!this.file) {
        alert("請(qǐng)先選擇需要上傳的文件!");
        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() {
      // 然后調(diào)用 startUpload 方法, 開(kāi)始上傳
      if (this.title == "") {
        this.$message.error("視頻標(biāo)題不能為空");
        this.uploadDisabled = false;
        this.pauseDisabled = true;
        this.resumeDisabled = true;
        return;
      }
      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;
      }
    },
    // 恢復(fù)上傳
    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: 60000,
        partSize: 1048576,
        parallel: 5,
        retryCount: 3,
        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);
        },
        // 開(kāi)始上傳
        onUploadstarted: function(uploadInfo) {
          // 如果是 UploadAuth 上傳方式, 需要調(diào)用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上傳方式, 需要根據(jù) uploadInfo.videoId是否有值青瀑，調(diào)用點(diǎn)播的不同接口獲取uploadauth和uploadAddress
          // 如果 uploadInfo.videoId 有值璧亮，調(diào)用刷新視頻上傳憑證接口，否則調(diào)用創(chuàng)建視頻上傳憑證接口
          // 注意: 這里是測(cè)試 demo 所以直接調(diào)用了獲取 UploadAuth 的測(cè)試接口, 用戶在使用時(shí)需要判斷 uploadInfo.videoId 存在與否從而調(diào)用 openApi
          // 如果 uploadInfo.videoId 存在, 調(diào)用 刷新視頻上傳憑證接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,調(diào)用 獲取視頻上傳地址和憑證接口(https://help.aliyun.com/document_detail/55407.html)

          if (!uploadInfo.videoId) {
            self.$axios
              .post("/api/project/video/gettoken", {
                title: self.title,
                filename: uploadInfo.file.name,
                template: "ProjectVideoWatermark",
                userdescription: self.userdescription,
                project_id: 1
              })
              .then(({ data }) => {
                if (data.code == 0) {
                  let uploadAuth = data.data.UploadAuth;
                  let uploadAddress = data.data.UploadAddress;
                  let videoId = data.data.VideoId;
                  uploader.setUploadAuthAndAddress(
                    uploadInfo,
                    uploadAuth,
                    uploadAddress,
                    videoId
                  );
                }
              });
            self.statusText = "文件開(kāi)始上傳...";
            console.log(
              "onUploadStarted:" +
                uploadInfo.file.name +
                ", endpoint:" +
                uploadInfo.endpoint +
                ", bucket:" +
                uploadInfo.bucket +
                ", object:" +
                uploadInfo.object
            );
          } else {
            // 如果videoId有值斥难，根據(jù)videoId刷新上傳憑證
            let refreshUrl =
              "/api/project/video/refreshtoken?VideoID=" + uploadInfo.videoId;
            self.$axios.get(refreshUrl).then(({ data }) => {
              console.log(data);
              if (data.code == 0) {
                let uploadAuth = data.data.UploadAuth;
                let uploadAddress = data.data.UploadAddress;
                let videoId = data.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 = "文件已暫停上傳";
        },
        // 文件上傳進(jìn)度枝嘶，單位：字節(jié), 可以在這個(gè)函數(shù)中拿到上傳進(jìn)度并顯示在頁(yè)面上
        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 = "文件上傳中...";
        },
        // 上傳憑證超時(shí)
        onUploadTokenExpired: function(uploadInfo) {
          let refreshUrl =
            "/api/project/video/refreshtoken?VideoID=" + uploadInfo.videoId;
          this.$axios.get(refreshUrl).then(({ data }) => {
            let uploadAuth = data.UploadAuth;
            uploader.resumeUploadWithAuth(uploadAuth);
            console.log(
              "upload expired and resume upload with uploadauth " + uploadAuth
            );
          });
          self.statusText = "文件超時(shí)...";
        },
        // 全部文件上傳結(jié)束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");
          self.statusText = "文件上傳完畢";
        }
      });
      return uploader;
    }

播放視頻就很簡(jiǎn)單了，參考官方代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet"  />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
var player = new Aliplayer({
  "id": "player-con",
  "source": "http://player.alicdn.com/video/aliyunmedia.mp4",
  "width": "100%",
  "height": "500px",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true
}, function (player) {
    console.log("The player is created");
  }
);
</script>
</body>