好记性，不如烂笔头，趁下班时间对今天研究的阿里云视频点播服务做个小小的总结，方便后期查看等。

一、视频点播服务介绍

1.1视频点播总体介绍

阿里云视频点播服务总体介绍

官方文档：
https://help.aliyun.com/document_detail/84752.html?spm=a2c4g.11186623.6.1097.84f7d418JrQa3F

1.2Web端文件上传流程

web端文件上传流程

二、账号授权

2.1视频上传地址和凭证

官方文档：
https://help.aliyun.com/document_detail/57056.html?spm=a2c4g.11186623.6.644.17af4e28dglLzP

2.2 STS临时授权

官方文档：
https://help.aliyun.com/document_detail/57114.html?spm=a2c4g.11186623.6.645.737a69d1hynw4p

2.3

https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.2.12.71c452f34nxfPW

三、后端接口

3.0新增配置信息

在文件OSS_Helper.cs原来配置信息的基础上增加如下配置信息：

#region 视频点播服务 2021-01-29
        private const string videoRegion = "cn-shanghai";//视频初始化服务需要调用
        private const string videoRoleArn = "acs:ram::你的角色配置信息";//【RAM角色管理】——【单机角色】
        private const string videoPolicyFile = @"{
            ""Statement"": [
                    {
                        ""Action"": ""vod:*"",
                        ""Effect"": ""Allow"",
                        ""Resource"": ""*""
                    }
                ],
                ""Version"": ""1""
        }";
        #endregion

备注：上面的三个信息与OSS虽然名字类似，但是信息却不同，开发的时候创建了2个角色，一个用于专门管理OSS、一个用于管理VOD，所以RoleArn会不同，另外视频开通的地区与之前的OSS不同，所以进行了单独的配置，另外视频的授权策略也是独立配置的。

如何查看授权策略？请参考如下，依次点击即可查看：

用户

权限

权限策略管理

当然你可以通过其他路径进入查看，上面的配置信息是默认的，你可以根据实际情况进行配置。

3.1视频上传地址和凭证

(1)新建业务实体类UploadVideoResponseModel.cs，用于返回凭证信息

 /// <summary>
    /// 获取视频上传地址和凭证  https://help.aliyun.com/document_detail/55407.html?spm=a2c4g.11186623.6.763.ec8f70373Xn4lb
    /// </summary>
    public class UploadVideoResponseModel
    {
        /// <summary>
        /// 请求ID  示例值：25818875-5F78-4A*****F6-D7393642CA58
        /// </summary>
        public string RequestId { get; set; }

        /// <summary>
        /// 视频ID  示例值：93ab850b4f6f*****54b6e91d24d81d4
        /// </summary>
        public string VideoId { get; set; }

        /// <summary>
        /// 上传地址 示例值：eyJTZWN1cml0*****a2VuIjoiQ0FJU3p3TjF
        /// </summary>
        public string UploadAddress { get; set; }

        /// <summary>
        /// 上传凭证 示例值：eyJFbmRw*****b2ludCI6Im
        /// </summary>
        public string UploadAuth { get; set; }
    }

(2)在自己定义的工具类OSS_Helper.cs中封装：

• ①初始化视频服务接口

• ②获取视频上传地址和凭证接口

代码如下所示：

/// <summary>
        /// 初始化视频服务
        /// https://help.aliyun.com/document_detail/72086.html?spm=a2c4g.11186623.6.1094.3d83d418WiA4Z6
        /// </summary>
        /// <param name="accessKeyId">访问密钥标识</param>
        /// <param name="accessKeySecret">访问密钥</param>
        /// <returns></returns>
        public static DefaultAcsClient InitVodClient(string accessKeyId, string accessKeySecret)
        {
            // 点播服务接入区域
            string regionId = videoRegion;
            IClientProfile profile = DefaultProfile.GetProfile(regionId, accessKeyId, accessKeySecret);
            return new DefaultAcsClient(profile);
        }

        /// <summary>
        /// 获取视频上传地址和凭证
        /// </summary>
        /// <param name="title">视频标题</param>
        /// <param name="fileName">FileName视频源文件名</param>
        /// <returns></returns>
        public UploadVideoResponseModel GetAuth(string title, string fileName)
        {
            // 构造请求
            CreateUploadVideoRequest request = new CreateUploadVideoRequest();
            request.Title = title;
            request.FileName = fileName;

            // 初始化客户端
            DefaultAcsClient client = InitVodClient(accessKeyId, accessKeySecret);
            // 发起请求，并得到响应结果
            CreateUploadVideoResponse response = client.GetAcsResponse(request);

            UploadVideoResponseModel info = new UploadVideoResponseModel
            {
                RequestId = response.RequestId,
                UploadAddress = response.UploadAddress,
                UploadAuth = response.UploadAuth,
                VideoId = response.VideoId
            };
            return info;
        }

(3)Controller层调用，暴露给前端

/// <summary>
        /// 获取视频上传地址和凭证
        /// </summary>
        /// <param name="title">视频标题</param>
        /// <param name="fileName">FileName视频源文件名</param>
        /// <returns>返回视频上传地址和凭证</returns>
        [AcceptVerbs("GET", "POST")]
        public Task<ResponseMessage> GetAuth(string title,string fileName)
        {
            var response = new MessageModel<UploadVideoResponseModel>();
            try
            {
                //IUser user = (IUser)this.Request.GetRouteData().Values["User"];
                OSS_Helper oss = new OSS_Helper();
                var videoModel = oss.GetAuth(title, fileName);
                response.Data = videoModel;
                return Task.FromResult(response.SetError(GlobalErrorCode.OK));
            }
            catch (Exception ex)
            {
                NLogger.Exception(ex);
                return Task.FromResult(response.SetError(GlobalErrorCode.SystemError));
            }
        }

3.2STS上传

（1）工具类方法封装

备注：assumeRole方法是之前上传OSS时封装的方法，通用，无需单独设置

public StsTokenModel GetVideoToken()
        {
            // 只有 RAM用户（子账号）才能调用 AssumeRole 接口
            // 阿里云主账号的AccessKeys不能用于发起AssumeRole请求
            // 请首先在RAM控制台创建一个RAM用户，并为这个用户创建AccessKeys

            // RoleArn 需要在 RAM 控制台上获取
            // RoleSessionName 是临时Token的会话名称，自己指定用于标识你的用户，主要用于审计，或者用于区分Token颁发给谁
            // 但是注意RoleSessionName的长度和规则，不要有空格，只能有'-' '_' 字母和数字等字符
            // 具体规则请参考API文档中的格式要求
            //string roleSessionName = "alice-001";
            string roleSessionName = "001";
            // 必须为 HTTPS
            try
            {
                AssumeRoleResponse stsResponse = assumeRole(accessKeyId, accessKeySecret, videoRoleArn, roleSessionName,
                        videoPolicyFile, ProtocolType.HTTPS, TokenExpireTime);

                return new StsTokenModel()
                {
                    status = 200,
                    Region = "cn-shanghai",
                    AccessKeyId = stsResponse.Credentials.AccessKeyId,
                    AccessKeySecret = stsResponse.Credentials.AccessKeySecret,
                    Expiration = stsResponse.Credentials.Expiration,
                    SecurityToken = stsResponse.Credentials.SecurityToken,
                    BucketName = bucketName
                };

            }
            catch (ClientException e)
            {
                return new StsTokenModel() { status = 500 };
            }
        }

（2）Controller层调用，暴露给前端

[HttpGet]
        public Task<ResponseMessage> GetSTSsecurityToken()
        {
            var response = new MessageModel<StsTokenModel>();
            try
            {
                IUser user = (IUser)this.Request.GetRouteData().Values["User"];
                OSS_Helper oss = new OSS_Helper();
                var stsmodel = oss.GetVideoToken();
                response.Data = stsmodel;
                return Task.FromResult(response.SetError(GlobalErrorCode.OK));
            }
            catch (Exception ex)
            {
                NLogger.Exception(ex);
                return Task.FromResult(response.SetError(GlobalErrorCode.SystemError));
            }
        }

四、前端调用

（1）安装web前端接口框架：

npm install ali-oss

（2）前端完整示例代码

<template>
  <div class="upload_video_temp">
        <el-upload
              class="upload-demo"
              ref="upload"
              drag
              :before-upload="beforeUpload"
              :on-change="videoChange"
              :on-success="handleSuccess"
              :http-request="handleHttpRequest"
              :headers="uploadHeaders"
              :limit="files"
              :disabled="disabled"
              multiple
              action
              :file-list="fileList"
            >
              <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
        </el-upload>
    <div class="prism-player" id="J_prismPlayer"></div> 
  </div>
</template>

<script>
    const OSS = require('ali-oss');
export default {
    name: 'upload_video_temp',
    data () {
        return {
            fileList: [],
            files: 10,
            uploadHeaders: {
                authorization: "*"
            },
            disabled: false,
            timeout: '',
            partSize: '',
            parallel: '',
            retryCount: '',
            retryDuration: '',
            region: 'oss-cn-beijing',
            userId: '30058535',        
            file: null,
            stsProgress: 0,
            uploadDisabled: true,
            resumeDisabled: true,
            pauseDisabled: true,
            statusText: '',
            pauseDisabled: true,
            uploader: null
        }
    },
    methods:{
        
        videoChange(){
            
        },
        
        handleHttpRequest(option) {
            // console.log(option)
            this.file = option.file;
            if (!this.file) {
              alert("请先选择需要上传的文件!")
              return
            }
            var userData = '{"Vod":{"StorageLocation":"","Title":"' + option.file.name + '","Description":"默认描述信息暂无","CateId":"19","Tags":"测试视频"}}'
            if (this.uploader) {
              this.uploader.stopUpload()
              this.authProgress = 0
              this.statusText = ""
            }
            this.uploader = this.createUploader(option)
            // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
            this.uploader.addFile(option.file, null, null, null, userData)
            this.uploadDisabled = false
            this.pauseDisabled = true
            this.resumeDisabled = false
            this.stsUpload();
        },
        
        createUploader(option){
            console.log(this.userId)
            let that = this
            var uploader = new AliyunUpload.Vod({
              partSize: 1048576,
              parallel: 5,
              retryCount: 3,
              retryDuration: 2,
              userId: that.userId,
              // region: that.region,
              // 添加文件成功
              addFileSuccess: function (uploadInfo) {
                  console.log(JSON.parse(JSON.stringify(uploadInfo)))
                that.uploadDisabled = false
                that.resumeDisabled = false
                that.statusText = '添加文件成功, 等待上传...'
                console.log("addFileSuccess: " + uploadInfo.file.name)
              },
              
              // 开始上传
              onUploadstarted: function (uploadInfo) {
                  console.log(uploadInfo)
                  console.log(235)
                // 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
                // 用户需要自己获取 accessKeyId, accessKeySecret,secretToken
                // 方式一：STSToken ===================================================
                //  let stsUrl = that.$axios.defaults.baseURL + 'api/Video/GetSTSsecurityToken';
                //  that.$axios.get(stsUrl).then(({data}) => {
                //    let info = data.Data
                // console.log(info)
                //    let accessKeyId = info.AccessKeyId
                //    let accessKeySecret = info.AccessKeySecret
                //    let secretToken = info.SecurityToken
                //    uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
               //  })
                 
                 // 方式二：凭证/签名 ===================================================
                  let stsUrl = that.$axios.defaults.baseURL + 'api/Video/GetAuth';
                    var data = {
                        title:option.file.name,
                        fileName:option.file.name,
                    }
                  that.$axios.get(stsUrl,{params:data}).then(({data}) => {
                    let info = data.Data
                        // console.log(info)
                    let uploadAuth = info.UploadAuth
                    let uploadAddress = info.UploadAddress
                    let videoId = info.VideoId
                  
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
                  })
                 
                 
                that.statusText = '文件开始上传...'
                // console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
              },
              // 文件上传成功
              onUploadSucceed: function (uploadInfo) {
                // console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                that.statusText = '文件上传成功!'
              },
              // 文件上传失败
              onUploadFailed: function (uploadInfo, code, message) {
                console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
                that.statusText = '文件上传失败!'
              },
              // 取消文件上传
              onUploadCanceled: function (uploadInfo, code, message) {
                console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
                that.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)
                that.stsProgress = progressPercent
                that.statusText = '文件上传中...'
              },
              // 上传凭证超时
              onUploadTokenExpired: function (uploadInfo) {
                // 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
                // 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
                // 这里是测试接口, 所以我直接获取了 STSToken
                    let stsUrl = that.$axios.defaults.baseURL + 'api/File/GetSTSsecurityToken';
                    that.$axios.get(stsUrl).then(({data}) => {
                      let info = data.Data
                      let accessKeyId = info.AccessKeyId
                      let accessKeySecret = info.AccessKeySecret
                      let secretToken = info.SecurityToken
                    
                    let expiration = info.Expiration
                    uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expiration)
                })
                that.statusText = '文件超时...'
              },
              // 全部文件上传结束
              onUploadEnd: function (uploadInfo) {
                console.log("onUploadEnd: uploaded all the files")
                that.statusText = '文件上传完毕'
              }
            })
                     
            return uploader
        },
        
        beforeUpload(file) {
         console.log(111)
        },
        handleSuccess(response, file, fileList) {
          console.log(response);
          console.log(file);
          console.log(fileList);
        },
            
        // 开始上传
        stsUpload () {
          // 然后调用 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
          }
        },
    },
    mounted:function() {
        
         var player = new Aliplayer({
                    id: 'J_prismPlayer',
                    width: '100%',
                    autoplay: true,
                    //支持播放地址播放,此播放优先级最高
                    source : '播放url',
                    //播放方式二：点播用户推荐
                    // vid : '1e067a2831b641db90d570b6480fbc40',
                    // playauth : 'ddd',
                    // cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
                    // encryptType:1, //当播放私有加密流时需要设置。
                    //播放方式三：仅MPS用户使用
                    // vid : '1e067a2831b641db90d570b6480fbc40',
                    // accId: 'dd',
                    // accSecret: 'dd',
                    // stsToken: 'dd',
                    // domainRegion: 'dd',
                    // authInfo: 'dd',
                    //播放方式四：使用STS方式播放
                    // vid : '1e067a2831b641db90d570b6480fbc40',
                    // accessKeyId: 'dd',
                    // securityToken: 'dd',
                    // accessKeySecret: 'dd',
                    //  region:'cn-shanghai',//eu-central-1,ap-southeast-1
                    },function(player){
                        console.log('播放器创建好了。')
                   });
        
    }

}
</script>

<style scoped>
    .upload_video_temp{width:80%;margin:auto;height: auto;background-color: #F4F4F4;padding: 23px 0 30px 0;}
    
    /* 上传 */
    .upload_video_temp .avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
    .upload_video_temp .avatar-uploader .el-upload:hover { border-color: #409EFF;}
    .upload_video_temp .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 90px;height: 90px;line-height: 90px;text-align: center;border: 1px solid #ddd;}
</style>

五、参考资料

阿里云 oss 视频上传 sts+前端js分片上传
https://blog.csdn.net/bianenhui91/article/details/83105679

【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传
https://blog.csdn.net/fifteen718/article/details/82764187

JAVA实现文件上传oss以及阿里云视频点播
https://blog.csdn.net/weixin_45498245/article/details/109338093

【视频点播最佳实践】使用OSS SDK上传视频到点播
https://blog.csdn.net/yunqiinsight/article/details/80134266

阿里云视频点播上传与url播放
https://blog.csdn.net/qq_33865313/article/details/80271323

阿里云视频上传
https://blog.csdn.net/chihang6/article/details/83241142

视频点播——JS测试阿里云视频上传功能
https://blog.csdn.net/qq_36808823/article/details/85065525

VUE 2.0 对接阿里云视频以及视屏站开发
https://blog.csdn.net/qq_34837006/article/details/85006931

前端js上传阿里云视频
https://blog.csdn.net/qq_36500865/article/details/92793826

阿里云JavaScript上传视频
https://blog.csdn.net/qq_41664100/article/details/99550997

https://blog.csdn.net/chihang6/article/details/83241142

前端上传视频至阿里云
https://blog.csdn.net/guanguan0_0/article/details/86612159

阿里云VOD 视频点播(三)，后台java接口代码
https://blog.csdn.net/qq_37880968/article/details/90375782

阿里云VOD 视频点播(二)、VUE视频上传，视频播放
https://blog.csdn.net/qq_37880968/article/details/90374634

阿里视频上传工具类
https://blog.csdn.net/lq18894033018/article/details/97163812

阿里云oss视频上传后,如何获取视频封面
https://blog.csdn.net/qq_27295403/article/details/89176708