腾讯云云点播Web 端上传 SDK

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

简单视频上传

引入 SDK

script 引入方式

未使用 webpack 的情况下，可通过 script 标签方式引入，该方式会暴露全局的 TcVod 变量。script 引入有下面两种方式：下载到本地
下载 SDK 源码 到本地，然后按以下方式引入：

<script src="./vod-js-sdk-v6.js"></script>

说明：引入路径请自行调整为您本地保存的路径。使用 CDN 资源
使用 CDN 资源，可直接按以下方式引入：

请 单击此处 查看 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

TcVod.upload

事件

常见问题

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: 域名上传。
云点播官网1折活动，限时活动，即将结束，速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利。同意关联立享优惠