POLYV Web上传插件(V2.0)

说明:
1. 本文档从用户角度简单概述了polyv web上传插件的使用方法。
2. V2.0 版本的使用与 V1.0 版本完全一致,因此无需更改原有的接口调用及逻辑,只要更换polyv-upload.js的调用地址即可。(推荐使用 V2.0 版本

一、功能:

  1. 上传文件
    1). 上传前可以进行选择分类、添加标签、选择视频优化处理、修改文件名及文件说明等操作
    2). 可选择默认的上传目录
    3). 可设置是否对源文件进行编码
    4). 支持断点续传。中途断网或浏览器因故障等原因重启后同个文件可以实现从断点续传。(仅在浏览器版本>=IE11及主流浏览器下支持实现该功能)
    5). 同时选择多个文件、上传过程显示进度
  2. 查看视频
    1). 查看视频列表
    2). 根据标题关键字搜索视频
    3). 获取具体的视频信息
    4). 更换封面
      a.上传新图片作为封面
      b.选择视频截图作为封面
      c.选择最近上传的图片作为封面
  3. 可选择只显示“上传列表”或“视频列表”或显示全部
  4. 可调用接口(response、uploadSuccess、uploadFail)返回视频信息
  5. 提供打开、关闭插件的方法

二、浏览器支持

  • 支持大部分主流浏览器,IE浏览器兼容IE9及IE9以上。
  • 在支持HTML5新特性的浏览器中,支持断点续传,最大可上传30GB的文件。
  • 反之,在不支持HTML5新特性的浏览器中(如IE9),不支持断点续传功能,最大可上传2GB的文件。

三、入门教程:

1、首先在调用该插件的页面上添加一个按钮:

<input type="button" id="upload" value="上传"></input>

2、引入POLYV上传插件的js文件

<script src="//v.polyv.net/file/plug-in-v2/polyv-upload.js"></script>

3、添加脚本,初始化上传参数并新建一个上传实例。

var obj = {
    uploadButtton: 'upload',
    userid: data.userid,
    ts: data.ts,
    hash: data.hash,
    sign: data.sign,
    component: 'all', 
    cataid: 1499657507273, 
    luping: 1,
    extra: {
        keepsource: 1,
    }
};
upload = new PolyvUpload(obj);

4、上传参数解释:

  • uploadButtton:打开上传控件按钮的id
  • userid:可以在“云点播”后台->“设置”->“API接口”页面中找到您的userid
  • ts:13位的毫秒级时间戳
  • hash:是根据将ts和writeToken按照顺序拼凑起来的字符串进行MD5计算得到的值
  • sign:是根据将secretkey和ts按照顺序拼凑起来的字符串进行MD5计算得到的值
  • component(可选):可以设置为videoList(只显示视频列表)、 uploadList(只显示上传列表)、all(默认值,显示上传列表和视频列表)
  • cataid(可选):上传目录id,默认值为1
  • luping(可选):开启视频课件优化处理,对于上传录屏类视频清晰度有所优化。可设置为01,默认值为0,表示不开启课件优化
  • keepsource(可选):源文件播放(不对源文件进行编码)。可设置为0(对源文件进行编码)或1(源文件播放)

5、获取用户信息的代码示例(PHP):

/* 
说明:以下的userid、secretkey、writeToken、readToken可以在“云点播”后台->“设置”->“API接口”页面中找到。
*/
$userid = "your userid";
$secretkey = "your sercrety";
$writeToken = "your writeToken";
$readToken = "your readToken";

$ts = time() * 1000;
$hash = md5($ts . $writeToken);
$sign = md5($secretkey . $ts);

四、使用文档

1.上传参数options

  • uploadButtton:打开上传控件按钮的id
  • userid
  • ts:13位的毫秒级时间戳
  • hash:是根据将ts和writeToken按照顺序拼凑起来的字符串进行MD5计算得到的值
  • sign:是根据将secretkey和ts按照顺序拼凑起来的字符串进行MD5计算得到的值
  • component(可选):可以设置为videoList(只显示视频列表)、 uploadList(只显示上传列表)、all(默认值,显示上传列表和视频列表)
  • cataid(可选):上传目录id,默认值为1
  • luping(可选):开启视频课件优化处理,对于上传录屏类视频清晰度有所优化。可设置为01,默认值为0,表示不开启课件优化
  • defaultTagPlaceholder(可选):自定义标签输入框占位符
  • defaultDescPlaceholder(可选):自定义视频描述输入框占位符
  • extra(可选): object
    可添加的属性为keepsource:源文件播放(不对源文件进行编码)。可设置为0(对源文件进行编码)或1(源文件播放)
    javascript
    {
    keepsource: 1, // 源文件播放(不对源文件进行编码)
    }
  • response(可选): function,返回指定视频的信息时的回调函数
  • uploadSuccess(fileData)(可选):function,当前文件上传完毕时触发的回调函数
  • uploadFail(err)(可选):function,当前文件上传失败时触发的回调函数

2.方法

  • update(data): 用于更新ts、hash、sign3个信息
  • closeWrap(): 关闭插件
  • openWrap(): 打开插件

五、demo演示和下载

demo演示:POLYV Web上传插件演示
demo下载:POLYV Web上传插件源码

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

POLYV Web上传插件(V1.0)

使用POLYV Web上传插件,首先在页面上做一个上传按钮。

<input type="button" id="upload" value="上传"></input>

接下来,引用POLYV Web上传插件的js,初始化上传参数并新建一个上传示例。
上传参数解释:
cataid:上传目录id;
luping:开启视频课件优化处理,对于上传录屏类视频清晰度有所优化;
state:自定义参数,可以通过回调通知接口抓取到该字段;
keepsource:源文件播放(不对源文件进行编码)。

var obj = {
    uploadButtton: "upload",   //打开上传控件按钮id
    userid : "sl8da4jjbx",
    ts : "1470708600000",
    hash : "66983f12660727d5767ca397f52e54ca",
    cataid:'1352947888026',
    sign: "fa36e05987b4b7c3b150003dd1122b30",
    luping: 1, //开启课件优化
    extra: {
        state: 'hellopolyv',//自定义参数,可以通过回调通知接口抓取到该字段
        keepsource: '1' //源文件播放(不对源文件进行编码)
            }
   }
    var upload = new PolyvUpload(obj);

hash的值,是根据将13位的毫秒级时间戳和writeToken按照顺序拼凑起来的字符串进行MD5计算得到的值,如:

<?php
$ts = time()*1000;
$writeToken = "Y07Q4yopIVXN83n-MPoIlirBKmrMPJu0";
$plain = $ts.$writeToken;
$hash = md5($plain);
?>

sign的值,是根据将secretkey和13位的毫秒级时间戳按照顺序拼凑起来的字符串进行MD5计算得到的值,如:

<?php
$ts = time()*1000;
$secretkey = "DFZhoOnkQf";
$sign = md5($secretkey.$ts);
?>

由于时间戳的有效期为3分钟,为了避免停留在同一个页面3分钟后,无法在同一个页面使用该上传插件的功能,需要客户端页面每隔3分钟刷新获取最新的ts、hash、sign的值,并调用插件的update方法更新数据。

//前端js每隔3分钟去调用reload.php去获取最新的ts、hash、sign
//并通过上传插件的update方法去更新数据
<script type="text/javascript">
    setInterval(function(){
       $.getJSON( "reload.php?callback=?", function( data ) {
        upload.update(data);

       });
     },3*60*1000);
</script>
//服务端reload.php的源码示例,用来输出ts、sign、hash的值
<?php
$callback = $_GET["callback"];
$userid = "sl8da4jjbx";
$ts = time()*1000;
$secretkey = "DFZhoOnkQf";
$sign = md5($secretkey.$ts);

$writeToken = "Y07Q4yopIVXN83n-MPoIlirBKmrMPJu0";
$plain = $ts.$writeToken;
$hash = md5($plain);
?>

<?php echo $callback;?>({
ts:'<?php echo $ts;?>',
sign:'<?php echo $sign;?>',
hash:'<?php echo $hash;?>'
});

如果需要在前端页面中显示服务器返回的响应信息,可以点击”上传”——“视频列表”——“返回视频信息”触发response事件,需要在初始化上传参数中加上response事件参数,并在页面中加上对应的文本框元素。如果还需要在点击“返回视频信息”按钮时自动关闭弹窗,可以加上upload.closeWrap()方法。

var obj = {
    response: function(json) {  
        var scriptdata = "<script>" +
        "var player = polyvObject('#plv_" + json.vid + "').videoPlayer({\n" +
                                    "'width':'690',\n"+
                                    "'height':'385',\n"+
                                    "'vid' : '" + json.vid + "'"+
                                "});<\/script>";
                                
        document.getElementById("textbody").value = document.getElementById("textbody").value + scriptdata;
        
        //如果需要关闭窗口
        upload.closeWrap();
        
    }
}

点击”上传”——“视频列表”——“返回视频信息”,可以在文本框看到POLYV云平台返回的response事件函数中的data数据。12

示例可点击参考:POLYV Web上传插件
示例源码:POLYV_uploadPlugin.zip

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...