本文为您介绍如何通过 Web SDK 上传视频文件。

初始化上传配置

初始化 TTUploader 实例时，通过 initConfig 进行初始化配置。详细参数说明请见 initConfig。

const uploader = new TTUploader(initConfig);

代码示例如下：

const uploader = new TTUploader({
    // 必填，在视频点播控制台创建应用并获取 AppID
    appId: '',
    // 必填，建议设置能识别用户的唯一标识 ID，用于上传出错时排查问题，不要传入非 ASCII 编码  
    userId: '',
    // 必填，上传相关配置
    videoConfig: {
        // 必填，上传到的点播空间名
        spaceName: '',
        // 非必填，视频/文件上传后的处理 action 对象，类型是一个数组，有多个处理请求时可以配置多个动作对象。对象中的 input 会被透传到对应的处理服务中
    }
});

添加上传文件

调用 addFile 方法，设置 stsToken 签名，同时添加视频上传文件。代码示例如下：

const fileKey = ttUploader.addFile({
    file: fileList[0],
    stsToken: {   // 从服务端拿到的 ststoken，token 为一个包含多个属性的对象
        CurrentTime: 'xxx',
        ExpiredTime: 'xxx',
        SessionToken: 'xxx',
        AccessKeyID: 'xxx',
        SecretAccessKey: 'xxx'
    }, 
    type : 'video', // 视频须为 video
  });

开始上传

调用 start 方法开始上传文件您需传入添加上传文件返回的 filekey 值。代码示例如下：

uploader.start(fileKey);

设置监听事件

设置监听事件示例代码如下，具体说明请参见生命周期。

uploader.on('complete', (infor) => {
    console.log('complete');
    console.log(infor.uploadResult);
});

uploader.on('error', (infor) => {
    console.log(infor.extra);
});

uploader.on('progress', (infor) => {
    console.log(infor.percent)
});

触发工作流

若您需要在上传后自动执行特定的工作流，调用 addFile 方法时可在 processAction 数组设置 Name 为StartWorkflow ，同时在 Input 结构体中传入工作流 ID。具体参数说明请参见接口说明。

const filekey = uploader.addFile({
    file: Blob, // 上传文件的 Blob 对象
    stsToken: {},
    type: 'video',
    processAction: [
        {
            Name: 'StartWorkflow', // 触发工作流配置
            Input: {
                TemplateId: '25524a2dae4541db93b2e891d******' // 工作流 ID
            }
        }
    ]
});
console.log(filekey);  // 示例：file_1495442273603_999031

设置封面图抽帧时间

若您需要设置固定时间点截取视频帧，作为视频的封面图，调用 addFile 方法时可在 processAction 数组设置 Name 为 Snapshot，同时在 Input 结构体中设置 SnapshotTime。具体参数说明请参见接口说明。

const key = uploader.addFile({
    file: Blob, // 上传文件的 Blob 对象
    stsToken: {},
    type: 'video',
    processAction: [
        {
            Name: 'Snapshot',      // 截图配置。默认抽第一帧，可以指定视频时间点抽帧做封面图
            Input: {
                SnapshotTime: 2  // 截图时间，单位为秒
            }
        }
    ]
});
console.log(key);   // 示例：file_1495442273603_999031

设置媒资信息

若您需要在上传时设置视频名称、标签、描述或者对视频进行分类，调用 addFile 方法时可在 processAction 数组设置 Name 为AddOptionInfo ，同时在 Input 结构体中传入相关信息以及分类 ID。音视频的分类是由您自行创建并管理的。您可在视频点播控制台分类管理页面创建，或通过 CreateVideoClassification 接口创建。

const key = uploader.addFile({
    file: Blob, // 上传文件的 Blob 对象
    stsToken: {},
    type: 'video',
    processAction: [
        {
            Name: 'AddOptionInfo',   // 媒资信息
            Input: {
                ClassificationId: '********' // 视频的分类 ID
                Description: '********'   // 视频描述
                Tags: '********'     // 视频标签
                Title: '********'    // 视频名称
        }
    ]
});
console.log(key);   // 示例：file_1495442273603_999031