文档首页> > 上传SDK> 客户端上传SDK> JavaScript上传SDK

JavaScript上传SDK

分享
更新时间: 2019/04/26 15:59

前提条件

兼容性

支持的浏览器版本:

  1. 主流版本的Chrome/Firefox/IE10及以上。
  2. 其他完全支持HTML5的浏览器。

安装SDK

在界面上引入如下脚本:

<script src="./dist/jquery-3.3.1.min.js"></script>
<script src="./dist/js-vod-sdk.js"></script>
<script src="./js-obs/esdk-obs-browserjs-2.1.4.min.js"></script>

代码示例

//通过构造函数创建vodClient实例
var vodClient = new VodClient({
    "access_key_id": '*** Provide your Access Key ***',
    "secret_access_key": '*** Provide your Secret Key ***',
    "security_token": '*** your securityToken ***'
});
//调用分段上传方法
vodClient.uploadVideoFile({
    "bucketName": "*** Provide your BucketName ***",
    "uploadPath": "*** Provide your full file path ***",
    //localfile为待上传文件流
    "videoFile": 'localfile'
}, function (err,data) {
  if(err){
    console.error('上传出错,具体信息为:',err);    
  }
  if(data){
    console.log("当前文件上传进度为:",data);
  } 
});
/**
 *取消上传
 * */
function cancelUpload() {
    vodClient.cancelUpload(function (data) {
        console.log(data);
    });
}
/**
 *续传
 * */
function restartUpload() {
    vodClient.restartUpload(function(data){
        console.log(data);
    });
}

代码说明

VOD客户端(VodClient)是访问VOD服务的JavaScript客户端,它为调用者提供与VOD服务进行交互的接口,用于上传对象、查看对象上传进度等VOD服务上的资源。使用VOD JavaScript SDK发起VOD请求,您需要初始化一个VodClient实例,并根据需求修改客户端初始化配置参数。

  1. 分段上传

    VOD客户端采用分段上传方法,对文件进行分段处理,而后分段上传,具体流程逻辑分为:

    1. 初始化分段上传任务。
    2. 逐个或并行上传段。
    3. 合并段。

    使用者只需将待上传文件流传入uploadVideoFile方法所需参数中,VOD客户端会自动将文件进行分段而后上传至租户的OBS桶中。

  2. 断点续传

    VOD客户端支持断点续传,大文件上传持续时间长,当上传过程中出现网络异常程序崩溃导致上传中断情况时,可以调用断点续传方法继续上传,文件上传时VOD客户端将会自动记录当前上传进度信息,当发生异常中断时,用户只需调用VOD客户端暴露出的restartUpload方法(详情请参考API参考),再次上传时会从上次中断记录点继续上传,节省时间和流量成本,同时VOD客户端也支持用户手动取消上传,当用户想取消上传文件时只需调用VOD客户端暴露出的cancelUpload方法即可(详情请参考API参考)。

说明:

使用JavaScript客户端上传视频后,视频只是存储在用户的OBS桶,若要生成点播媒资,获取媒资属性,请调用OBS转存API,将视频转存到点播系统中。

API参考

表1 JavaScript上传SDK API参考

方法

请求参数说明

返回参数说明

接口说明

uploadVideoFile

param:上传文件所需参数。

callback:回调函数。

callback(err,data):err为上传过程中出现的错误信息,data为当前文件上传进度。

两者均为必填。

cancelUpload

callback:回调函数。

callback(data):

data为执行取消上传后返回的结果。

回调函数返回值data取值为:

  1. “success: Succeeded in canceling the file upload.”(取消上传成功)。
  2. “ success: Succeeded in canceling the file upload.”(取消上传成功)。

restartUpload

callback:回调函数。

callback(data):

data为执行续传后返回的结果。

回调函数返回值data取值为:

  1. “success: Start to restore the upload.”(执行续传成功)。
  2. “warn: The file is being uploaded.”(执行续传失败,文件正在上传)。

常用属性

表2 JavaScript上传SDK 常用属性

属性

类型

取值

说明

upFlag

Boolean

true/false

表示是否处于上传中状态。

completedFlag

Boolean

true/false

表示文件是否已经完成上传。

Demo使用

  1. 打开VOD-Browers-SDK包的index.html文件,进入Demo界面。

  2. 将获取的ak和sk和securityToken,填入界面,bucketName和ObjectKey根据创建的桶的实际情况填写。

    参数

    说明

    ak

    访问密匙,用来初始化VodClient

    sk

    访问密匙,用来初始化VodClient

    security token

    安全令牌,用来初始化VodClient

    桶名

    租户在OBS服务中创建的桶名

    路径名

    需要上传存放的OBS桶的完整文件路径名

  3. 点击“选择文件”选择需要上传的本地文件。
  4. 点击“开始上传”。
  5. 通过下方进度条实时获取上传进度。
如果您喜欢这篇文档,您还可以:

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区