You need to enable JavaScript to run this app.
导航
上传视频
最近更新时间:2024.03.19 14:39:41首次发布时间:2024.03.19 14:39:41

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

初始化上传配置

在初始化 TTUploader 实例时,您可以通过 initConfig 进行初始化配置。详见具体参数配置

const uploader = new TTUploader(initConfig);

代码示例如下:

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

设置转码工作流

若需要在上传后执行特定的转码工作流,调用 addFile 方法需要在 processAction 数组设置 NameStartWorkflowInput 结构体中传入工作流模板 TemplateId。具体参数说明请参见接口说明

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

添加上传文件

调用 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)
});