阿里云视频上传

阿里云视频上传，点播实现文档

1.使用背景和目标

• 在2204期迭代中出现了富文本上传视频需求，现用的方案是把与图片存在一起。因为出现了上传视频，后续必然会有播放需求，现有的方案不太适合，所以调研阿里云视频上传与点播功能。提前调研为后续的视频上传与播放需求做准备。

2.架构介绍

• 阿里云视频点播（ApsaraVideo VoD）是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、高效云剪辑处理、分发加速、视频播放于一体的一站式音视频点播解决方案。
• 阿里云视频点播基于阿里云强大的基础设施服务，面向视频网站、短视频、在线教育、娱乐社交、新闻传媒等行业，提供端-云-端的视频全链路功能，支持客户针对视频内容的生产、存储、转码、媒资、分发的一站式服务 。

3.上传实现

• 阿里云的视频上传通过独有的SDK来实现，SDK就是视频点播通过多种SDK提供一站式点播解决方案，覆盖视频生产、媒体上传、媒资管理、视频播放等多个点播环节。*
• 上传SDK分为两类服务端上传SDK与客户端上传SDK。其中服务端上传SDK能够独立完成上传功能（服务端所能完成的功能更多，功能更全），客户端上传SDK需要与服务端配合才能实现上传视频。

客户端上传SDK实现

• 1.引入JavaScript上传SDK
  JavaScript脚本下载可在阿里云下载，在HTML中通过script引用

<script src="../lib/es6-promise.min.js"></script>
<script src="../lib/aliyun-oss-sdk6.17.1.min.js"></script>
<script src="../aliyun-vod-upload-sdk1.5.2.min.js"></script>

也可以模块化引入挂载再Window上

import OSS from '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min' 
window.OSS = OSS; 
import '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.2.min'

• 2.请求上传地址和凭证或请求STS临时Token，用于上传授权。

这一步需要服务端的接入客户端向服务端请求接口，根据上床方式向服务端请求请求上传地址和凭证或者请求STS临时Token，用于后续上传的鉴权。
官方比较推荐使用上传地址和凭证我们应当更具实际需求来选择上传方式

使用获取到的上传地址和凭证或STS临时Token作为入参初始化上传实例。

• 3.使用上传凭证或STS临时Token初始化上传实例。
  在使用上传组件上传完成后初始化实例，并把实例挂载在this方便后续调用实例中的方法
  这里我们写了使用上传凭证的方式

    //上传完成的函数
    fileChange(e) {
      this.file = e.target.files[0];
      if (!this.file) {
        alert("请先选择需要上传的文件!");
        return;
      }
      var Title = this.file.name;
      var userData = '{"Vod":{}}';//只有在STS方式上传时需要在SDK指定，如果是上传地址和凭证方式，则服务费端指定
      if (this.uploader) {
        this.uploader.stopUpload();//停止上传的方法
        this.authProgress = 0;//上传的进度
        this.statusText = "";//上传的状态（停止，失败等）
      }
      this.uploader = this.createUploader();//创建实例后返回创建的实例uploader挂载在this上
      this.uploader.addFile(this.file, null, null, null, userData);//将选中的文件添加到上传列表中。
    },
    //开始上传事件
    authUpload() {
      // 然后调用 startUpload 方法, 开始上传
      if (this.uploader !== null) {
        this.uploader.startUpload();
      }
    },
    // 暂停上传
    pauseUpload() {
      if (this.uploader !== null) {
        this.uploader.stopUpload();
      }
    },
    // 恢复上传
    resumeUpload() {
      if (this.uploader !== null) {
        this.uploader.startUpload();

      }
    },
    createUploader(type) {
      let self = this;
      let uploader = new AliyunUpload.Vod({
      //各类默认参数
        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.statusText = "添加文件成功, 等待上传...";
          console.log("addFileSuccess: " + uploadInfo.file.name);
        },
        // 开始上传
        onUploadstarted: async function(uploadInfo) {
          // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口
          // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口
          if (!uploadInfo.videoId) {
            let { Bag } = await api.aliyun_video_on_demandApi({
              Title: "上传测试",
              FileName: uploadInfo.file.name
            });//向服务端获取上传的凭证
            let uploadAuth = Bag.UploadAuth;
            let uploadAddress = Bag.UploadAddress;
            let videoId = Bag.VideoId;
            selt.videoId = Bag.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刷新上传凭证
            // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
            let refreshUrl =
              "https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=" +uploadInfo.videoId;
            axios.get(refreshUrl).then(({ data }) => {
              let uploadAuth = data.UploadAuth;
              let uploadAddress = data.UploadAddress;
              let 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
          );
          console.log(this, "这是this");

          self.uploadname = uploadInfo.file.name;

          self.statusText = "文件上传成功!";
          console.log(this.uploadname);
        },
        // 文件上传失败
        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 调用刷新视频上传凭证接口重新获取 UploadAuth
          // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
          self.statusText = "文件超时...";
          let refreshUrl ="https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=" +//uploadInfo.videoId;
          axios.get(refreshUrl).then(({ data }) => {
            let uploadAuth = data.UploadAuth;
            uploader.resumeUploadWithAuth(uploadAuth);
            console.log(
              "upload expired and resume upload with uploadauth " + uploadAuth
            );
          });
          
        },
        // 全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");

          self.statusText = "文件上传完毕";
        }
      });
      return uploader;
    }

上传完成后会返回记得保存videoId，videoId可以获取播放器地址等，是很重要的凭证

• 4.其他功能

获取上传列表

var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    log("file:" + list[i].file.name);
}

删除上传文件

uploader.deleteFile(index);//需要删除的文件index，对应listFiles接口返回列表中元素的索引

恢复单个上传文件

uploader.resumeFile(index);

清除上传文件列表

uploader.cleanList();

• 5.上传总结
  客户端上传SDK适用于UGC（用户生产内容）、PGC（专业生产内容）等场景，支持本地文件上传和网络文件上传。存在一定的局限性，需根据实际使用场景来选择服务端上传还是客户端上传

4.点播实现

阿里云的视频点播是通过配套的SDK播放器来进行播放我们主要介绍一下其中的web播放器

• 1.Web播放器简介
  阿里云Web播放器SDK支持HTML5（以下简称H5）和Flash两种播放模式。由于Flash Player已停止服务，主流浏览器均不支持Flash播放。在Internet Explorer及其他不支持H5播放的浏览器下使用需要切换至Flash模式。H5基本适配世面上主流的浏览器有较好的兼容性，桌面端浏览器播放FLV、HLS视频时必须启用跨域访问。Web播放器H5模式在移动端不支持播放FLV视频。
• 2.播放器接入
  Web播放器不依赖于任何的前端js库，只需要在页面中引用js文件，就可以进行初始化。

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" />  //（必须）H5模式播放器，需引用此css文件。
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-h5-min.js"></script>  //（必须）引入H5模式的js文件。
</head>

*3.提供挂载元素
需要指定对应元素挂载播放器

<body>
  <div id="J_prismPlayer"></div>
</body>

• 4.实例化播放器开始播放
  Web播放器SDK支持5种点播播放方式，包括：URL播放、Vid+PlayAuth播放（推荐）、STS播放、MPS播放、加密播放。这里主要介绍url播放

var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: '',//播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
      },function(player){
        console.log('The player is created.')
     });

• 5.功能介绍

阿里云提供的播放器拥有很多功能我们这个介绍几个常用功能，更多需去官网了解

//指定播放时间time为指定的时间，单位：秒。
player.seek(time)
//暂停播放
player.pause()
//旋转设置旋转角度。<角度>正数为顺时针旋转，负数为逆时针旋转。如：player.setRotate(180)表示顺时针旋转180度。
player.setRotate(<角度>)
//获取旋转角度。
player.getRotate()
//镜像
//水平镜像
player.setImage('horizon')
//垂直镜像
player.setImage('vertical')
//设置音量
//volume的值为0～1之间的实数。
player.setVolume(0)
//获取音量信息。
player.getVolume()
//倍数播放设置倍速。以下示例表示设置为2倍速。
player.setSpeed(2)

• 6.播放总结
  阿里云提供的web播放器是功能较为齐全的播放器，能满足大多数的播放需求，更有很好的自由度。与自己的上传功能搭配更能完成例如加密播放，不同清晰度播放等功能，十分强大。