POLYV 视频上传 SDK
Polyv JavaScript 上传 SDK 为您提供上传媒体文件到保利威云点播平台的开发工具包。
功能
- 快捷上传多种格式的媒体文件。
- 支持上传时的各种设置，如文件标题、描述、标签、上传目录、是否开启课件优化处理等。
- 默认采用分片并发上传的方式，支持断点续传。
使用方法
$3
1. 使用本 SDK 前，要先开通保利威云点播服务。如果您还不了解该服务，请登录产品主页查看，详见：云点播。
2. 获取 secretKey 等相关信息用于用户身份校验，您可以在「云点播管理后台 -> 设置 -> API接口」页面中找到相关信息，点击这里登录后台。
$3
- IE(>=10)和Edge。
- 主流版本的 Chrome、Firefox、Safari。
- 以主流版本 Chrome 为核心的浏览器，如最新版本的 QQ 浏览器、360 浏览器等。
$3
您可以选择以下任意一种方法调用本 SDK：
#### 方法一：引入在线资源
``html
`
#### 方法二：通过 npm 安装
第一步，在项目目录下运行安装命令：
`bash
npm install @polyv/vod-upload-js-sdk
`
第二步， 在页面中引入（需要构建工具支持）：
`js
import PlvVideoUpload from '@polyv/vod-upload-js-sdk'
`
或者
`js
const PlvVideoUpload = require('@polyv/vod-upload-js-sdk');
`
快速开始
$3
首先，创建 PlvVideoUpload 实例。
`js
const videoUpload = new PlvVideoUpload({
region: 'line1', // auto：自动选择。根据IP的地区自动选择，当IP解析不出时使用默认值。
// line1（默认值）：华南OSS bucket，对应ab-upload.polyv.net。
// line2：华北OSS bucket，对应ab-upload2.polyv.net。
events: {
Error: (err) => { // 错误事件回调
console.log(err);
},
UploadComplete: () => {} // 全部上传任务完成回调
}
});
`
调用 updateUserData() 设置账号授权验证信息，并每隔 3 分钟更新一次
`js
// 授权验证信息3分钟内有效，当 sign 过期时需要调用该方法更新
videoUpload.updateUserData({
userid: , // Polyv云点播账号的ID
ptime: , // 时间戳
sign: , // 是根据将secretkey和ts按照顺序拼凑起来的字符串进行MD5计算得到的值
hash: , // 是根据将ts和writeToken按照顺序拼凑起来的字符串进行MD5计算得到的值
});
`
其中 ptime、sign 和 hash 都要从服务端获取，服务端的代码示例（PHP）如下：
`php
/*
* userid、secretkey、writeToken 都可以在「云点播管理后台 -> 设置 -> API接口」页面中找到。
*/
$userid = "your userid";
$secretkey = "your sercrety";
$writeToken = "your writeToken";
$ptime = time() * 1000;
$sign = md5($secretkey . $ptime);
$hash = md5($ptime . $writeToken);
`
$3
`js
fileSetting = { // 文件上传相关信息设置
title: , // 标题<br /> desc: <desc>, // 描述<br /> cataid: <cataid>, // 上传分类目录ID<br /> tag: <tag>, // 标签<br /> luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启<br /> keepsource: 0, // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码<br /> state:<customMessage> //用户自定义信息，如果提交了该字段，会在服务端上传完成回调时透传返回。<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">调用 PlvVideoUpload 实例的 </code>addFile(file, events, fileSetting)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 方法，添加文件到文件列表，该方法返回一个 </code>UploadManager<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 对象：</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var uploadManager = videoUpload.addFile(<br /> file, // file 为待上传的文件对象<br /> { <br /> FileStarted: function(uploadInfo) { // 文件开始上传回调<br /> console.log("文件上传开始: " + uploadInfo.fileData.title);<br /> },<br /> FileProgress: function(uploadInfo) { // 文件上传过程返回上传进度信息回调<br /> console.log("文件上传中: " + (uploadInfo.progress * 100).toFixed(2) + '%');<br /> },<br /> FileStopped: function(uploadInfo) { // 文件暂停上传回调<br /> console.log("文件上传停止: " + uploadInfo.fileData.title);<br /> },<br /> FileSucceed: function(uploadInfo) { // 文件上传成功回调<br /> console.log("文件上传成功: " + uploadInfo.fileData.title);<br /> },<br /> FileFailed: function(uploadInfo) { // 文件上传失败回调<br /> console.log("文件上传失败: " + uploadInfo.fileData.title);<br /> }<br /> },<br /> fileSetting<br />);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API 文档</h2></p><p class="my-3">注： 由于业务需求，开源版本的代码和文档目前已经不再更新，仅供参考。<br />见<a href="https://github.com/polyv/vod-upload-js-sdk" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">源代码</a>中的 docs 文件夹或 <a href="https://polyv.github.io/vod-upload-js-sdk/api/1.x/index.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">点击此处打开</a>。</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">示例代码</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><a href="https://github.com/polyv/vod-upload-js-sdk" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">源代码</a>中的 demo 文件夹包含两个示例：</p><p class="my-3">- dev.html & dev.js：以模块化方式引入 SDK 的示例。需要修改 build 文件夹下的 webpack.dev.config.js 文件中的账号信息，然后在本项目根目录下运行 </code>npm run dev<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> ，打开浏览器访问 </code>http://127.0.0.1:14002/index.html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 即可。<br />- index.html & index.js：以 script 标签引入 SDK 的示例。需要修改 JS 文件中的 getPolyvAuthorization 变量为有效的请求地址，才能正常使用。</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1、补充示例中的userid、secretkey、writeToken即可，在保利威点播后台 设置->API接口 获取。</p><p class="my-3">2、需要安装element-ui 和 md5 依赖。</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><template><br /> <div class="hello"><br /> <div><br /> <input type="file" class="upload" @change="doUpload" ref="inputer" multiple /><br /> <el-button type="primary" size="small" @click="startAll">全部开始</el-button><br /> <el-button type="warning" size="small" @click="pauseAll">全部暂停</el-button><br /> <el-button type="danger" size="small" @click="clearAll">全部删除</el-button><br /> </div></p><p class="my-3"> <div><br /> <el-table :data="tableData" border style="width: 100%"><br /> <el-table-column prop="id" label="ID" width="180"><br /> </el-table-column><br /> <el-table-column prop="fileName" label="文件名" width="180"><br /> </el-table-column><br /> <el-table-column prop="size" label="文件大小" width="180"><br /> <template slot-scope="scope">{{ transformSize(scope.row.size)}}</template><br /> </el-table-column><br /> <el-table-column prop="progress" label="进度" width="180"><br /> <template slot-scope="scope"><br /> <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.progress"></el-progress><br /> </template></p><p class="my-3"> </el-table-column><br /> <el-table-column prop="progress" label="操作" width="180"><br /> <template slot-scope="scope"><br /> <el-button type="text" size="small" @click="start(scope.row.id)">开始</el-button><br /> <el-button type="text" size="small" @click="stop(scope.row.id)">暂停</el-button><br /> <el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button><br /> </template><br /> </el-table-column><br /> </el-table><br /> </div><br /> </div><br /></template></p><p class="my-3"><script><br /> import md5 from 'js-md5'<br /> import PlvVideoUpload from '@polyv/vod-upload-js-sdk';</p><p class="my-3"> export default {<br /> name: 'demo',<br /> data() {<br /> return {<br /> videoUpload: null, // 视频上传实例<br /> userid: '',//从点播后台查看获取<br /> secretkey: '',//从点播后台查看获取<br /> writeToken: '',//从点播后台查看获取<br /> ptime: '', // 当前时间戳<br /> tableData: [] //表格数据<br /> }<br /> },<br /> created() {<br /> this.videoUpload = new PlvVideoUpload({<br /> region: 'line1', // (可选)上传线路, 默认line1<br /> events: {<br /> Error: (err) => { // 错误事件回调<br /> console.log(err);<br /> let errMag = </code>（错误代码：${err.code}）${err.message}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">;<br /> this.$alert(errMag, '标题名称', {<br /> confirmButtonText: '确定',<br /> type: 'error',<br /> });<br /> },<br /> UploadComplete: () => { // 全部上传任务完成回调<br /> console.info('上传结束：', this.videoUpload);<br /> console.log(this.tableData)<br /> this.$message({<br /> message: '全部上传任务完成',<br /> type: 'success'<br /> });<br /> }<br /> }<br /> });<br /> },<br /> mounted() {<br /> this.autoUpdateUserData(null, this.videoUpload);<br /> },<br /> methods: {<br /> start(uploaderid) {// 单个上传<br /> console.log(uploaderid)<br /> this.videoUpload.resumeFile(uploaderid);<br /> },<br /> stop(uploaderid) {// 单个暂停<br /> console.log(uploaderid)<br /> this.videoUpload.stopFile(uploaderid);<br /> },<br /> remove(uploaderid) {// 单个删除<br /> console.log(uploaderid)<br /> this.videoUpload.removeFile(uploaderid);<br /> this.tableData = this.tableData.filter((item) => item.id !== uploaderid)<br /> },<br /> startAll() {// 全部上传<br /> if (this.videoUpload) {<br /> this.videoUpload.startAll();<br /> }<br /> },<br /> pauseAll() {// 全部暂停<br /> if (this.videoUpload) {<br /> this.videoUpload.stopAll();<br /> }<br /> },<br /> clearAll() {// 全部删除<br /> if (this.videoUpload) {<br /> this.videoUpload.clearAll();<br /> this.tableData = []<br /> this.$refs.inputer.value =''<br /> }<br /> },<br /> doUpload() {// 选择文件<br /> let inputDOM = this.$refs.inputer; // 通过DOM取文件数据<br /> console.log(inputDOM.files)<br /> if (inputDOM.files.length > 0) {<br /> inputDOM.files.forEach((file, index, arr) => {<br /> let fileSetting = { // 文件上传相关信息设置<br /> title: file.name, // 标题<br /> desc: 'jssdk插件上传', // 描述<br /> cataid: '', // 上传分类目录ID<br /> tag: '', // 标签<br /> luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启<br /> keepsource: 0, // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码<br /> state: '' //用户自定义信息，如果提交了该字段，会在服务端上传完成回调时透传返回。<br /> }<br /> let uploadManager = this.videoUpload.addFile(<br /> file, // file 为待上传的文件对象<br /> {<br /> FileStarted: this.onFileStarted,// 文件开始上传回调<br /> FileProgress: this.onFileProgress,// 文件上传中回调<br /> FileSucceed: this.onFileSucceed,// 文件上传成功回调<br /> FileFailed: this.onFileFailed,// 文件上传失败回调<br /> FileStopped: this.onFileStopped,// 文件上传停止回调<br /> },<br /> fileSetting<br /> );</p><p class="my-3"> this.addTableData(uploadManager)<br /> })<br /> }<br /> },<br /> onFileStarted(data) {<br /> console.log("文件上传开始: ", data);<br /> this.tableData.filter((item) => item.id === data.uploaderid)[0].progress = 0<br /> },<br /> onFileProgress(data) {<br /> let p = parseInt(data.progress * 100);// 上传的进度条<br /> console.log("文件上传中: ", data);<br /> this.tableData.filter((item) => item.id === data.uploaderid)[0].progress = p</p><p class="my-3"> },<br /> onFileSucceed(data) {<br /> console.log("文件上传成功: ", data);<br /> },<br /> onFileFailed(data) {<br /> console.log("文件上传失败: ", data);<br /> },<br /> onFileStopped(data) {<br /> console.log("文件上传停止: ", data);<br /> },<br /> addTableData(data) { // 增加表格数据<br /> let obj = {<br /> id: data.id,<br /> fileName: data.fileData.title,<br /> size: data.fileData.size,<br /> progress: 0<br /> }<br /> this.tableData.push(obj)<br /> },<br /> autoUpdateUserData(timer, videoUpload) { // 启动获取用户信息<br /> this.getUserData(videoUpload);<br /> if (timer) {<br /> clearTimeout(timer);<br /> timer = null;<br /> }<br /> timer = setTimeout(() => {<br /> this.autoUpdateUserData(timer, videoUpload);<br /> }, 3 <em> 50 </em> 1000);<br /> },<br /> getUserData() { // 获取用户详细信息<br /> this.ptime = new Date().getTime()<br /> let userData = {<br /> userid: this.userid,<br /> ptime: this.ptime,<br /> sign: this.getSignData().sign,<br /> hash: this.getSignData().hash<br /> };<br /> this.videoUpload.updateUserData(userData);<br /> },<br /> getSignData() { // 加密信息参数<br /> let hash = md5(this.ptime + this.writeToken)<br /> let sign = md5(this.secretkey + this.ptime)<br /> return {<br /> hash: hash,<br /> sign: sign,<br /> }<br /> },<br /> transformSize(bytes) {// 文件大小转换<br /> const bt = parseInt(bytes);<br /> let result;<br /> if (bt === 0) {<br /> result = '0B';<br /> } else {<br /> const k = 1024;<br /> const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];<br /> const i = Math.floor(Math.log(bt) / Math.log(k));<br /> if (typeof i !== 'number') {<br /> result = '-';<br /> } else {<br /> result = (bt / Math.pow(k, i)).toFixed(2) + sizes[i];<br /> }<br /> }<br /> return result;<br /> }<br /> },<br /> }<br /></script></p><p class="my-3"><style scoped><br /></style><br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">错误代码</h2></p><p class="my-3">Error 事件已知错误类型：</p><p class="my-3">| code | 描述 |<br />| -- | -- |<br />| 102 | 用户剩余空间不足 |<br />| 110 | 文件重复 |<br />| 111 | 拦截文件类型不在 acceptedMimeType 中的文件 |<br />| 112 | 文件已经开始上传或已上传完毕，禁止修改文件信息 |</p><p class="my-3">FileFailed 事件已知错误类型：</p><p class="my-3">| type | code | 描述 |<br />| -------------------- | ---- | ---------------------------- |<br />| InitUploadError | 3001 | 分类不存在 |<br />| InitUploadError | 405 | 上传视频初始化失败 |<br />| InitUploadError | 406 | 视频大小不能为0 |<br />| InitUploadError | 408 | 账户服务状态异常，请联系客服 |<br />| MultipartUploadError | | 断点续传时出错 |<br />| UpdateTokenError | | 更新上传token时获取token失败 |<br />| NoSuchUploadError | | Multipart Upload ID 不存在 |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">版本更新</h2></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.10.1</h2></p><p class="my-3">- 优化大文件上传token更新的机制</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.7.0</h2></p><p class="my-3">- 支持.m4a格式媒体文件上传</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.6.0</h2></p><p class="my-3">- 修复线路授权过期重试异常的问题</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.5.0</h2></p><p class="my-3">- 修复特定情况下断点续传异常的问题</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.4.1</h2></p><p class="my-3">- 内部优化<br />- 默认线路问题修复</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">v1.3.0</h2></p><p class="my-3">- 上传线路升级</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 增加region参数</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- cataid 不存在时返回提示。<br />- 规范FileFailed事件返回的数据格式与字段名称。</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 问题修复</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 支持使用子账号信息上传视频文件</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 优化文件上传失败时的回调message</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 增加支持文件名后缀大写的文件上传，如 file_example.MP3<br />- 修改示例代码</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 优化文件上传失败时的重试逻辑<br />- 文件上传失败时返回的错误信息中增加 errData 属性</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- 增加对自定义信息字段的支持</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>