在使用JavaScript上传SDK上传媒体之前,需要先集成相关SDK。本文提供集成及文件上传指引。
前提条件
-
您已经开通了视频点播服务。开通步骤请参见开通视频点播服务。
- 您已经完成上传相关的系统配置,包括启用目标存储地域的存储地址和配置回调。操作指引请参见存储管理及回调设置。
- 您已准备好用于调用点播服务的账号。为避免阿里云账号AccessKey泄露带来的安全风险,推荐您创建RAM用户并授予其VOD相关权限。然后使用RAM用户的AK对(AccessKey ID和AccessKey Secret)访问点播服务。操作指引请参见创建RAM用户并授权。
- (可选)如需使用STS临时授权方式(阿里云Security Token Service)访问点播服务,请为RAM用户创建角色并授予角色VOD相关权限。操作指引请参见创建角色并进行STS临时授权。
说明 STS临时授权方式的适用场景请参见凭证方式与STS方式对比。
- 上传文件时,使用标准的input方式选择文件,文件大小不大于10 GB。如果文件大小超过10 GB,您可以使用断点续传。具体操作,请参见高级功能。
- JavaScript上传SDK目前兼容的浏览器是:
- IE(≥10)
- Edge
- 主流版本的Chrome/Firefox/Safari
- 主流版本的Android/iOS/WindowsPhone系统默认浏览器
上传文件
JavaScript上传SDK上传文件的基本操作步骤如下:
队列管理
对于上传中或者上传完成的文件,可以通过对应的API进行管理。支持的API如下:
- 获取上传文件列表
返回值为通过addFile添加的文件信息列表。其中的file属性为对应的File类型的文件,可以通过遍历获取到需要操作的文件的index。
var list = uploader.listFiles(); for (var i=0; i<list.length; i++) { log("file:" + list[i].file.name); }
- 删除上传文件
uploader.deleteFile(index);//需要删除的文件index,对应listFiles接口返回列表中元素的索引
- 取消单个文件上传
说明
cancelFile
成功后会在控制台打印oss is cancel as error
。这是SDK为了避免已上传的部分分片文件占用存储空间(如果占用就会产生存储费用)做的处理。uploader.cancelFile(index);
- 恢复单个文件上传
uploader.resumeFile(index);
- 清理上传文件列表
uploader.cleanList();
上传凭证
- 设置上传地址和上传凭证
设置上传地址和上传凭证方法在
onUploadstarted
回调里调用,此回调的参数包含uploadInfo
的值。var info = data.SecurityTokenInfo uploader.setSTSToken(uploadInfo,info.AccessKeyId,info.AccessKeySecret,info.SecretToken);
参数名称 参数描述 uploadInfo 将onUploadstarted回调中的第一个参数进行透传 uploadAuth CreateUploadVideo接口返回 uploadAddress CreateUploadVideo接口返回 videoId CreateUploadVideo接口返回 - 上传凭证失效后恢复上传
一般在onUploadTokenExpired回调中调用,用于上传凭证过期后更新上传凭证。uploadAuth为RefreshUploadVideo接口中返回的上传凭证。
const {VideoId,UploadAuth,UploadAddress} = data; uploader.resumeUploadWithAuth(UploadAuth);
- 设置STS Token
用于通过STS方式进行上传时,设置上传地址和上传凭证方法。一般在
onUploadstarted
回调里调用,此回调的参数包含uploadInfo
的值。const {VideoId,UploadAuth,UploadAddress} = data; uploader.setUploadAuthAndAddress(uploadInfo,UploadAuth,UploadAddress,VideoId);
参数名称 参数描述 uploadInfo 将onUploadstarted回调中的第一个参数进行透传 accessKeyId CreateSecurityToken接口返回 accessKeySecret CreateSecurityToken接口返回 secretToken CreateSecurityToken接口返回 - 上传STS Token失效后恢复上传
一般在onUploadTokenExpired回调中调用,用于通过STS方式进行上传时上传凭证过期后更新上传凭证。
var info = data.SecurityTokenInfo uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
上传控制
停止上传
说明
stopUpload
要确保文件正在上传,有文件上传进度时才能工作。
uploader.stopUpload();
高级功能
断点续传在上传过程中,由于某种原因(例如:页面被关闭、浏览器崩溃等)没有上传完成,下次选择同一个文件上传时, SDK会从上次完成的位置继续上传,并在onUploadstarted
回调中获取上传凭证。使用上传地址和凭证方式上传时,用户可以根据回调返回的videoId的值,调用视频点播的接口获取断点信息。示例如下:
onUploadstarted': function (uploadInfo) {
if (上传方式1) {
if(!uploadInfo.videoId)//这个文件没有上传异常
{
//实际环境中调用视频点播的获取上传凭证接口
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
}
else//如果videoId有值,根据videoId刷新上传凭证
{
//实际环境中调用视频点播的刷新上传凭证接口,获取凭证
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
}
}
else(上传方式2)
{
//实际环境中调用获取STS接口,获取STS的值
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
}
}
获取断点信息:
uploader.getCheckpoint(file);