云点播
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 云点播 > 开发指南 > 媒体上传 > 客户端上传 > Web 端上传 SDK

Web 端上传 SDK

最近更新时间：2023-08-24 10:05:53

我的收藏

本页目录：

对于浏览器上传音视频的场景，云点播提供了 Web 上传 SDK。如果您需要 SDK 源码，可访问 SDK 源码。

简单视频上传

引入 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>
请 单击此处 查看 script 方式引入的 Demo，请 单击此处 查看 Demo 源码。

npm 引入方式

使用 webpack 的情况下（如使用 Vue 或者 React），可通过 npm 引入：
// 安装稳定版本
// npm install vod-js-sdk-v6

import 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
})
xxx_upload与xxx_progress的回调值请参见 分块上传/复制任务操作。

取消上传

SDK 支持取消正在上传的视频或封面：
const uploader = tcVod.upload({
  mediaFile: mediaFile,
  coverFile: coverFile,
})

uploader.cancel()

断点续传

SDK 支持自动断点续传功能，无需做额外操作。当上传意外终止时（如浏览器关闭、网络中断等），您再次上传该文件，可以从中断处继续上传，减少重复上传时间。

动态上传加速

1.7.0-beta.4 版本开始新增支持了通过 http2 协议上传，并根据网络状况动态调整上传并发的能力，有效提高上传速度，如需体验动态上传加速，需在控制台开启 全球链路加速。
// 安装 beta 版本
// npm install vod-js-sdk-v6@1.7.0-beta.4

import TcVod from 'vod-js-sdk-v6'

const tcVod = new TcVod.default({
  getSignature: getSignature // 前文中所述的获取上传签名的函数
})

const uploader = tcVod.upload({
  mediaFile: mediaFile, // 媒体文件（视频或音频或图片），类型为 File
  dynamicAccelerate: 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: 域名上传。
中国站