简单视频上传
引入 SDK
script 引入方式
未使用 webpack 的情况下,可通过 script 标签方式引入,该方式会暴露全局的
TcVod
变量。script 引入有下面两种方式:下载到本地
下载 SDK 源码 到本地,然后按以下方式引入:
<script src="./vod-js-sdk-v6.js"></script>
说明:
引入路径请自行调整为您本地保存的路径。
使用 CDN 资源
使用 CDN 资源,可直接按以下方式引入:
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
npm 引入方式
使用 webpack 的情况下(如使用 Vue 或者 React),可通过 npm 引入:
// 安装稳定版本// npm install vod-js-sdk-v6import TcVod from 'vod-js-sdk-v6'
注意:
SDK 依赖 Promise,请在低版本浏览器中自行引入。
定义获取上传签名的函数
function getSignature() {return axios.post(url).then(function (response) {return response.data.signature;})};
说明:
url
是您派发签名服务的 URL,更多相关信息请参见 客户端上传指引。signature
计算规则请参见 客户端上传签名。应用、视频文件分类、任务流等信息都包含在上传签名中,更多相关信息请参见 签名参数说明。
上传视频示例
// 通过 import 引入的话,new TcVod(opts) 即可// new TcVod.default(opts) 是 script 引入 的用法const tcVod = new TcVod.default({getSignature: getSignature // 前文中所述的获取上传签名的函数})const uploader = tcVod.upload({mediaFile: mediaFile, // 媒体文件(视频或音频或图片),类型为 File})uploader.on('media_progress', function(info) {console.log(info.percent) // 进度})// 回调结果说明// type doneResult = {// fileId: string,// video: {// url: string// },// cover: {// url: string// }// }uploader.done().then(function (doneResult) {// deal with doneResult}).catch(function (err) {// deal with error})
说明:
new TcVod(opts)
中的 opts 指该接口的相关参数,详细请参见 TcVod 接口描述。上传方法根据用户文件的长度,自动选择普通上传以及分片上传,用户不用关心分片上传的每个步骤,即可实现分片上传。
如需上传至指定应用下,请参见 应用体系 - 客户端上传。
高级功能
同时上传视频和封面
const uploader = tcVod.upload({mediaFile: mediaFile,coverFile: coverFile,})uploader.done().then(function (doneResult) {// deal with doneResult})
获取上传进度
SDK 支持以回调的形式展示当前的上传进度:
const uploader = tcVod.upload({mediaFile: mediaFile,coverFile: coverFile,})// 视频上传完成时uploader.on('media_upload', function(info) {uploaderInfo.isVideoUploadSuccess = true;})// 视频上传进度uploader.on('media_progress', function(info) {uploaderInfo.progress = info.percent;})// 封面上传完成时uploader.on('cover_upload', function(info) {uploaderInfo.isCoverUploadSuccess = true;})// 封面上传进度uploader.on('cover_progress', function(info) {uploaderInfo.coverProgress = info.percent;})uploader.done().then(function (doneResult) {// deal with doneResult})
取消上传
SDK 支持取消正在上传的视频或封面:
const uploader = tcVod.upload({mediaFile: mediaFile,coverFile: coverFile,})uploader.cancel()
断点续传
SDK 支持自动断点续传功能,无需做额外操作。当上传意外终止时(如浏览器关闭、网络中断等),您再次上传该文件,可以从中断处继续上传,减少重复上传时间。
动态上传加速
// 安装 beta 版本// npm install vod-js-sdk-v6@1.7.0-beta.4import TcVod from 'vod-js-sdk-v6'const tcVod = new TcVod.default({getSignature: getSignature // 前文中所述的获取上传签名的函数})const uploader = tcVod.upload({mediaFile: mediaFile, // 媒体文件(视频或音频或图片),类型为 FiledynamicAccelerate: true, // 开启动态加速})
接口描述
TcVod
参数名称 | 必填 | 类型 | 参数描述 |
getSignature | 是 | Function | 获取上传签名的函数。 |
appId | 否 | number | 填入后,内置的统计上报会自动带上。 |
reportId | 否 | number | 填入后,内置的统计上报会自动带上。 |
TcVod.upload
参数名称 | 必填 | 类型 | 参数描述 |
mediaFile | 否 | File | 媒体文件(视频或音频或图片)。 |
coverFile | 否 | File | 封面文件。 |
mediaName | 否 | string | 覆盖媒体文件元信息中的文件名。 |
fileId | 否 | string | 当修改封面时传入。 |
enableResume | 否 | boolean | 是否断点续传 |
enableRaceRegion | 否 | boolean | 是否开启园区竞速,选择响应最快的园区发起上传,默认开启。 注:开启后会发起 HEAD 请求,这类请求会返回403状态码,不影响正式上传。 |
reportId | 否 | number | 填入后,内置的统计上报会自动带上。会覆盖构造函数中的设置。 |
fileParallelLimit | 否 | number | 同一个实例下上传的文件并发数,默认值3。 |
chunkParallelLimit | 否 | number | 同一个上传文件的分块并发数,默认值6。 |
chunkRetryTimes | 否 | number | 分块上传时,出错重试次数,默认值2(加第一次,请求共3次)。 |
chunkSize | 否 | number | 分块上传时,每片的字节数大小,默认值8388608(8MB)。 |
progressInterval | 否 | number | 上传进度的回调方法 onProgress 的回调频率,单位 ms ,默认值1000。 |
dynamicAccelerate | 否 | boolean | 动态加速开关(1.7.0-beta.4版本新增)。 |
事件
事件名称 | 必填 | 事件描述 |
media_upload | 否 | 媒体文件上传成功时。 |
cover_upload | 否 | 封面上传成功时。 |
media_progress | 否 | 媒体文件上传进度。 |
cover_progress | 否 | 封面文件上传进度。 |
常见问题
1. File 对象怎么获取?
使用
input
标签,type
为file
类型,即可拿到File
对象。2. 上传的文件是否有大小限制?
最大支持60GB。
3. SDK 支持的浏览器版本有哪些?
Chrome、Firefox 等支持 HTML5 的主流浏览器,IE 方面支持的最低版本是 IE10。
4. 如何实现类似暂停上传或恢复上传的功能?
SDK 底层已经自动实现了断点续传的功能,因此暂停的本质即是调用
uploader.cancel()
这个方法。同理,暂停后的恢复上传也是调用初始的tcVod.upload
方法,区别在于恢复上传时调用该方法的参数,应该是之前缓存起来的参数(例如可以在启动上传时全局变量存储一份参数,上传完成后再清掉)。5. Web 端上传 SDK 是否支持使用 https: 域名上传?
可以支持。Web 端默认判断当前页面的域名是 http: 时,使用 http: 域名上传。若判断域名非 http: 时,则使用 https: 域名上传。