tencent cloud

云点播

动态与公告
产品动态
公告
产品简介
产品概述
产品特性
产品功能
产品优势
应用场景
解决方案
专业版
云点播专业版简介
快速入门
控制台指南
开发指南
购买指南
计费概述
计费方式
购买指引
账单查询
续费说明
欠费说明
退费说明
快速入门
控制台指南
控制台介绍
服务概览
应用管理
媒体管理
资源包管理
License 管理
实时日志分析
实践教程
媒体上传
如何将点播的媒体文件进行智能降冷
媒体处理
分发播放
如何接收事件通知
如何进行源站迁移
直播录制
如何进行自定义源站回源
直播精彩剪辑固化至云点播 VOD 指引
如何使用 EdgeOne 分发云点播内容
开发指南
媒体上传
媒体加工处理
媒体 AI
事件通知
媒体分发播放
媒体加密与版权保护
播放频道
访问管理
下载媒体文件
应用体系
错误码
播放器 SDK 文档
概述
基本概念
产品功能
Demo 体验
免费测试
购买指南
SDK 下载
License 指引
播放器教程
含 UI 集成方案
无 UI 集成方案
高级功能
API 文档
第三方播放器插件
Player SDK Policy
服务端 API 文档
History
Introduction
API Category
Other APIs
Media Processing APIs
Parameter Template APIs
Task Management APIs
Media Upload APIs
Media Management APIs
Event Notification Relevant API
Media Categorization APIs
Domain Name Management APIs
Distribution APIs
AI-based Sample Management APIs
Region Management APIs
Data Statistics APIs
Carousel-Related APIs
Just In Time Transcode APIs
No longer recommended APIs
Making API Requests
AI-based image processing APIs
Task Flow APIs
Data Types
Error Codes
Video on Demand API 2024-07-18
常见问题
移动端播放问题
费用相关问题
视频上传问题
视频发布问题
视频播放问题
Web 端播放问题
全屏播放问题
数据统计问题
访问管理相关问题
媒资降冷问题
相关协议
Service Level Agreement
VOD 政策
隐私政策
数据处理和安全协议
联系我们
词汇表

Web 端上传 SDK

PDF
聚焦模式
字号
最后更新时间: 2023-03-07 11:20:50
对于浏览器上传音视频的场景,云点播提供了 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 引入
import TcVod from 'vod-js-sdk-v6'
单击此处 查看 npm 方式引入的 Demo 源码。
注意:
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_uploadxxx_progress 的回调值请参见 分块上传/复制任务操作

取消上传

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

uploader.cancel()

断点续传

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

接口描述

TcVod

参数名称
必填
类型
参数描述
getSignature
Function
获取上传签名的函数。
appId
number
填入后,内置的统计上报会自动带上。
reportId
number
填入后,内置的统计上报会自动带上。

TcVod.upload

参数名称
必填
类型
参数描述
mediaFile
File
媒体文件(视频或音频或图片)。
coverFile
File
封面文件。
mediaName
string
覆盖媒体文件元信息中的文件名。
fileId
string
当修改封面时传入。
reportId
number
填入后,内置的统计上报会自动带上。会覆盖构造函数中的设置。
fileParallelLimit
number
同一个实例下上传的文件并发数,默认值3
chunkParallelLimit
number
同一个上传文件的分块并发数,默认值6
chunkRetryTimes
number
分块上传时,出错重试次数,默认值2(加第一次,请求共3次)
chunkSize
number
分块上传时,每片的字节数大小,默认值8388608(8MB)
progressInterval
number
上传进度的回调方法 onProgress 的回调频率,单位 ms ,默认值1000

事件

事件名称
必填
事件描述
media_upload
媒体文件上传成功时。
cover_upload
封面上传成功时。
media_progress
媒体文件上传进度。
cover_progress
封面文件上传进度。

常见问题

1. File 对象怎么获取? 使用 input 标签,typefile 类型,即可拿到 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: 域名上传。

帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈