Web上传SDK使用文档

Polyv JavaScript 上传 SDK 为您提供上传媒体文件到保利威云点播平台的开发工具包。

功能

  • 快捷上传多种格式的媒体文件。
  • 支持上传时的各种设置,如文件标题、描述、标签、上传目录、是否开启课件优化处理等。
  • 默认采用分片并发上传的方式,支持断点续传

使用方法

前提条件

  1. 使用本 SDK 前,要先开通保利威云点播服务。如果您还不了解该服务,请登录产品主页查看,详见:云点播
  2. 获取 secretKey 等相关信息用于用户身份校验,您可以在「云点播管理后台 -> 设置 -> API接口」页面中找到相关信息,点击这里登录后台

浏览器支持

  • IE(>=10)和Edge。
  • 主流版本的 Chrome、Firefox、Safari。
  • 以主流版本 Chrome 为核心的浏览器,如最新版本的 QQ 浏览器、360 浏览器等。

集成 SDK

您可以选择以下任意一种方法调用本 SDK:

方法一:引入在线资源

<!-- 指定版本 -->
<script src="//player.polyv.net/resp/vod-upload-js-sdk/1.2.0/vod-upload-js-sdk.min.js"></script>
<!-- 最新版本 -->
<script src="//player.polyv.net/resp/vod-upload-js-sdk/latest/vod-upload-js-sdk.min.js"></script>

方法二:通过 npm 安装

第一步,在项目目录下运行安装命令:

npm install @polyv/vod-upload-js-sdk

第二步, 在页面中引入(需要构建工具支持):

import PlvVideoUpload from '@polyv/vod-upload-js-sdk'

或者

const PlvVideoUpload = require('@polyv/vod-upload-js-sdk');

快速开始

初始化上传实例

首先,创建 PlvVideoUpload 实例。

const videoUpload = new PlvVideoUpload({
  events: {
      Error: (err) => {  // 错误事件回调
          console.log(err);
      },
      UploadComplete: () => {}  // 全部上传任务完成回调
  }
});

调用 updateUserData() 设置账号授权验证信息(主账号或子账号,只需要按权限设置其中一个),并每隔 3 分钟更新一次。

// 授权验证信息3分钟内有效,当 sign 过期时需要调用该方法更新。
// 1. 主账号信息更新
videoUpload.updateUserData({
  userid: <userid> , // Polyv云点播账号的ID
  ptime: <timestamp> , // 时间戳,注意:系统时间不正确会导致校验失败
  sign: <sign> , // 校验值其一,计算方式:md5(`${secretkey}${ptime}`)。secretkey需要在点播后台中获取。
  hash: <hash> , // 校验值其二,计算方式:md5(`${ptime}${writeToken}`)。writeToken需要在点播后台中获取。
});
// 2. 子账号信息更新
videoUpload.updateUserData({
  appId: <appId> , // Polyv云点播账号下子账号的appId
  timestamp: <timestamp> , // 时间戳,注意:系统时间不正确会导致校验失败
  sign: <sign> , // 校验值,计算方式:md5(`${secretkey}appId${appId}timestamp${timestamp}${secretkey}`).toUpperCase()。secretkey和appId需要在点播后台中获取。
});

以上账号信息要从服务端获取,服务端的代码示例(PHP)如下:

<?php
    /**
     * userid、secretkey、writeToken都可以在「云点播管理后台 -> 设置 -> API接口」页面中找到。
     */
    $isSubAccount=$_GET["isSubAccount"]=="Y"; // 是否为子账号
    $timestamp = time() * 1000; // 注意:服务器系统时间不正确会导致校验失败

    // 主账号信息
    $userid = "主账号的userid";
    $secretkey = "主账号的sercrety";
    $writeToken = "主账号的writeToken";
    $hash = md5($timestamp . $writeToken);
    $sign = md5($secretkey . $timestamp);

    // 子账号信息
    $subAccountAppId="子账号的appId";
    $subAccountSecretkey="子账号的sercrety";
    $subAccountSign=strtoupper(md5($subAccountSecretkey . "appId" . $subAccountAppId . "timestamp" . $timestamp . $subAccountSecretkey));

    $response = array();
    $response['timestamp'] = $timestamp;
    if ($isSubAccount) {
        $response['appId'] = $subAccountAppId;
        $response['sign'] = $subAccountSign;
    } else {
        $response['userid'] = $userid;
        $response['sign'] = $sign;
        $response['hash'] = $hash;
    }

    echo json_encode($response);
?>

添加上传文件进入上传列表

fileSetting = { // 文件上传相关信息设置
  title: <title>,  // 标题
  desc: <desc>,  // 描述
  cataid: <cataid>,  // 上传分类目录ID
  tag: <tag>,  // 标签
  luping: 0,  // 是否开启视频课件优化处理,对于上传录屏类视频清晰度有所优化:0为不开启,1为开启
  keepsource: 0,  // 是否源文件播放(不对视频进行编码):0为编码,1为不编码
  state:<用户自定义数据> //用户自定义数据,如果提交了该字段,会在视频上传完成事件回调时透传返回。
};

调用 PlvVideoUpload 实例的 addFile(file, events, fileSetting) 方法,添加文件到文件列表,该方法返回一个 UploadManager 对象:

var uploadManager = videoUpload.addFile(
  file, // file 为待上传的文件对象
  { 
    FileStarted: function(uploadInfo) { // 文件开始上传回调
        console.log("文件上传开始: " + uploadInfo.fileData.title);
    },
    FileProgress: function(uploadInfo) { // 文件上传过程返回上传进度信息回调
        console.log("文件上传中: " + (uploadInfo.progress * 100).toFixed(2) + '%');
    },
    FileStopped: function(uploadInfo) { // 文件暂停上传回调
        console.log("文件上传停止: " + uploadInfo.fileData.title);
    },
    FileSucceed: function(uploadInfo) { // 文件上传成功回调
        console.log("文件上传成功: " + uploadInfo.fileData.title);
    },
    FileFailed: function(uploadInfo) { // 文件上传失败回调
        console.log("文件上传失败: " + uploadInfo.fileData.title);
    }
  },
  fileSetting
);

上传控制

videoUpload.startAll()  //开始上传所有文件
videoUpload.stopAll()  //停止上传所有文件
videoUpload.clearAll()  //清空文件列表
videoUpload.stopFile(id)  //暂停上传指定文件;id为文件id,和对应的UploadManager实例的id一致。
videoUpload.resumeFile(id)  //开始/继续上传指定文件
videoUpload.removeFile(id)  //删除指定文件

API 文档

见源代码中的 docs 文件夹或 点击此处打开

示例代码

请前往GitHub查看。
源代码中的 demo 文件夹包含两个示例:

  • dev.html & dev.js:以模块化方式引入 SDK 的示例。需要修改 build 文件夹下的 webpack.dev.config.js 文件中的账号信息,然后在本项目根目录下运行 npm run dev ,打开浏览器访问 http://127.0.0.1:14002/index.html 即可。
  • index.html & index.js:以 script 标签引入 SDK 的示例。需要修改 JS 文件中的 getPolyvAuthorization 变量为有效的请求地址,才能正常使用。

错误代码

错误代码 描述
102 用户剩余空间不足
110 文件重复
111 拦截文件类型不在 acceptedMimeType 中的文件
112 文件已经开始上传或已上传完毕,禁止修改文件信息

Change log

日期 版本 更新内容
2019-03-08 v1.0.0 正式版发布
2019-10-09 v1.1.0 增加对自定义信息字段的支持
2020-09-07 v1.2.0 支持使用子账号信息上传视频文件
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...