云点播 Web 端上传 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-v6import TcVod from 'vod-js-sdk-v6'

注意：SDK 依赖 Promise，请在低版本浏览器中自行引入。

五、定义获取上传签名的函数

function getSignature() { return axios.post(url).then(function (response) { return response.data.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_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.4import 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: 域名上传。

十九、4XX 类型错误

20、5XX 类型错误

21、申请上传： ApplyUpload

22、确认上传：CommitUpload