Web 端上传 SDK

最近更新时间:2019-07-15 14:31:52

简介

对于浏览器上传音视频的场景,云点播提供了 Web 上传 SDK。上传流程请参见 客户端上传指引

单击访问 源码地址。

Demo

简单视频上传

引入 SDK 到页面中

<script src="//unpkg.com/vod-js-sdk-v6"></script>
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
})

高级功能

同时上传视频和封面

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 填入后,内置的统计上报会自动带上。会覆盖构造函数中的设置。

事件

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

常见问题

  1. File对象怎么获取?
    使用input标签,typefile类型,即可拿到File对象。

  2. 上传的文件是否有大小限制?
    最大支持60GB。

  3. SDK 支持的浏览器版本有哪些?
    Chrome、Firefox 等支持HTML5的主流浏览器,IE 方面支持的最低版本是 IE10。