全部产品
弹性计算 会员服务 网络 安全 移动云 数加·大数据分析及展现 数加·大数据应用 管理与监控 云通信 阿里云办公 培训与认证 智能硬件
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 更多
视频点播

JavaScript上传SDK

更新时间:2018-03-30 11:58:44

  • 概念说明

uploadAuth:点播视频上传的唯一凭证,每个上传凭证都绑定了用户的身份标识,不同用户的上传凭证不能互换,否则无法正常上传视频。另外,上传凭证是有时效性的(默认3600秒)。具体参数获取方法,参见 获取上传凭证和地址

RAM和STS:RAM和STS是阿里云提供的权限管理系统。RAM主要的作用是控制账号系统的权限。通过使用RAM可以将在主账号的权限范围内创建子用户,给不同的子用户分配不同的权限从而达到授权管理的目的。STS是一个安全凭证(Token)的管理系统,用来授予临时的访问权限,这样就可以通过STS来完成对于临时用户的访问授权。详情参见 STS介绍

临时AccessKeyId、AccessKeySecret和SecurityToken:开启RAM授权,并通过STS授权系统提供的OpenAPI或SDK获取的AccessKeyId、AccessKeySecret和SecurityToken,用于上传(V1.3.0版起推荐使用STS的上传方式)。详情参见 STS SDK参考

  • 问题描述

    • 在上传过程中如果移动文件位置或修改文件,将会抛EntityTooSmall错误

    • 断点续传依赖于浏览器的LocalSession, 不支持LocalSession的浏览器, 断点续传功能无效

    • 推荐使用STS的上传方式,需要通过STS SDK参考接口获取STS的3个值

  • 安装

    在页面上引入下面三个JS脚本,见 视频上传SDK下载

    1. <!-- IE需要es6-promise -->
    2. <script src="../lib/es6-promise.min.js"></script>
    3. <script src="../lib/aliyun-oss-sdk4.13.2.min.js"></script>
    4. <script src="../aliyun-vod-upload-sdk1.3.1.min.js"></script>
  • 创建AliyunUpload.Vod实例

    在这里需要设置回调函数。

    1. var uploader = new AliyunUpload.Vod({
    2. //分片大小默认1M,不能小于100K
    3. partSize: 1048576,
    4. //并行上传分片个数,默认5
    5. parallel: 5,
    6. //网络原因失败时,重新上传次数,默认为3
    7. retryCount: 3,
    8. //网络原因失败时,重新上传间隔时间,默认为2秒
    9. retryDuration: 2,
    10. // 开始上传
    11. 'onUploadstarted': function (uploadInfo) {
    12. log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    13. //上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
    14. // uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
    15. //上传方式2
    16. // uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
    17. }
    18. // 文件上传成功
    19. 'onUploadSucceed': function (uploadInfo) {
    20. log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    21. },
    22. // 文件上传失败
    23. 'onUploadFailed': function (uploadInfo, code, message) {
    24. log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
    25. },
    26. // 文件上传进度,单位:字节
    27. 'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
    28. log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
    29. },
    30. // 上传凭证超时
    31. 'onUploadTokenExpired': function (uploadInfo) {
    32. console.log("onUploadTokenExpired");
    33. //上传方式1 实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
    34. // uploader.resumeUploadWithAuth(uploadAuth);
    35. // 上传方式2 实现时,从新获取STS临时账号用于恢复上传
    36. // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
    37. },
    38. //全部文件上传结束
    39. 'onUploadEnd':function(uploadInfo){
    40. log("onUploadEnd: uploaded all the files");
    41. }
    42. });
  • 列表管理

    • 添加上传文件

      注意:支持的文件大小<=5G。

      需要使用标准的input方式让用户选择文件。

      1. <form action="">
      2. <input type="file" name="file" id="files" multiple/>
      3. </form>
      4. userData = '';
      5. document.getElementById("files")
      6. .addEventListener('change', function (event) {
      7. for(var i=0; i<event.target.files.length; i++) {
      8. // 逻辑代码
      9. }
      10. });

      获取到用户选择的文件后,添加到上传列表中。

      1. uploader.addFile(event.target.files[i], null, null, null, userData);

      上传时,可以选择是否启用水印和优先级,userData是一个json对象。第一级的Vod是必须的,Vod下面有2个属性,示例如下:

      1. var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
    • 删除上传文件

      index,对应listFiles接口返回列表中元素的索引。

      1. uploader.deleteFile(index);
    • 取消单个文件上传

      1. uploader.cancelFile(index);
    • 恢复单个文件上传

      1. uploader.resumeFile(index);
    • 获取上传文件列表

      1. uploader.listFiles();
      2. var list = uploader.listFiles();
      3. for (var i=0; i<list.length; i++) {
      4. log("file:" + list[i].file.name + ", status:" + list[i].state + ", endpoint:" + list[i].endpoint + ", bucket:" + list[i].bucket + ", object:" + list[i].object);
      5. }
    • 清理上传文件列表

      1. uploader.cleanList();
  • 上传控制

    • 开始上传

      1. uploader.startUpload();
    • 停止上传

      1. uploader.stopUpload();
    • 上传凭证失效后恢复上传

      1. uploader.resumeUploadWithAuth(uploadAuth);
    • 设置上传地址和上传凭证

      设置上传地址和上传凭证方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。

      1. uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);

      注:获取上传凭证和上传地址,请查看相关文档

    • 设置STS Token

      设置STS Token方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。

      1. uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
    • 上传STS Token失效后恢复上传

      1. uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
    • 断点续传

      用户在上传过程中,由于某种原因没有上传完成,在下次选择同一个文件上传时, SDK会从上次完成的位置继续上传,并且在onUploadstarted回调中,获取上传凭证, 如果使用的时上传方式1(通过uploadAuth和uploadAddress)上传时,用户需要根据回调返回的videoId的值,调用点播的不同接口, 如下:

      获取上传凭证接口

      刷新上传凭证接口

      STS SDK参考

      1. 'onUploadstarted': function (uploadInfo) {
      2. if (上传方式1) {
      3. if(!uploadInfo.videoId)//这个文件没有上传异常
      4. {
      5. //实际环境中调用调用点播的获取上传凭证接口
      6. uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
      7. }
      8. else//如果videoId有值,根据videoId刷新上传凭证
      9. {
      10. //实际环境中调用点播的刷新上传凭证接口,获取凭证
      11. uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
      12. }
      13. }
      14. else(上传方式2)
      15. {
      16. //实际环境中调用获取STS接口,获取STS的值
      17. uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
      18. }
本文导读目录