扩展功能

目录

扩展功能示例

以下提供常用扩展功能的示例：

动态获取视频剪辑Web SDK的版本号

如果代码中需要使用视频剪辑Web SDK的版本号，建议动态获取。

window.AliyunVideoEditor.version

自定义字幕默认文字

添加字幕时，默认字幕内容为“阿里云剪辑”，可以通过传入参数defaultSubtitleText自定义默认字幕内容（字幕长度不超过20）。

window.AliyunVideoEditor.init({
  // 其他选项省略
  defaultSubtitleText: '自定义字幕默认文字'
})

自定义按钮文案

视频剪辑界面的导入素材、保存和导出视频按钮支持自定义文案，可以通过传入参数customTexts实现。

window.AliyunVideoEditor.init({
  // 其他选项省略
  customTexts: {
    importButton: '自定义导入',
    updateButton: '自定义保存',
    produceButton: '自定义生成'
  }
})

修改默认预览画布比例

默认预览画布比例为16∶9，可以通过传入参数defaultAspectRatio自定义默认预览画布比例。支持的画布比例请参见PlayerAspectRatio。

window.AliyunVideoEditor.init({
  // 其他选项省略
  defaultAspectRatio: '9:16'
})

主动获取Timeline数据

主动获取Timeline数据后，如果对其数据进行修改，必须保证Timeline正确性，避免调用服务端接口出错。

window.AliyunVideoEditor.getProjectTimeline()

自定义返回按钮

默认视频剪辑界面左上角没有返回按钮，可以通过实现响应函数onBackButtonClick自定义单击返回按钮之后的逻辑。

window.AliyunVideoEditor.init({
  // 其他选项省略
  onBackButtonClick: () => {
    window.location.href = '/mediaEdit/list'; // 点击后跳转到其他页面，如工程列表页
  }
})

自定义Logo

默认视频剪辑界面左上角没有Logo图标，可以通过传入参数customTexts自定义Logo图标。

window.AliyunVideoEditor.init({
  // 其他选项省略
  customTexts: {
    logoUrl: 'https://www.example.com/assets/example-logo-url.png'
  }
})

自定义媒资导入界面

单击导入素材按钮后，可以通过实现函数searchMedia添加媒资导入界面。实现逻辑：搜索媒资信息后将媒资库媒资导入到素材，再调用AddEditingProjectMaterials接口将选中的素材与工程关联起来，返回的Promise对象需要resolve新增素材的数组。

自定义合成导出界面

单击导出视频按钮后，可以通过实现函数produceEditingProjectVideo添加合成导出界面。实现逻辑：调出配置合成参数页面后，该页面上的提交按钮的消息响应为提交剪辑合成作业接口ProduceEditingProjectVideo - 视频合成，返回的Promise对象需要resolve。

除了实现上述功能外，函数produceEditingProjectVideo也可以固定合成参数（例如：存储的Bucket、视频格式等），阻止他人随意修改，或在导出视频前对Timeline进行业务层面的校验。示例如下所示：

window.AliyunVideoEditor.init({
  // 省略其他选项
  produceEditingProjectVideo: ({ timeline }) => { // 用户点击“导出视频”按钮时该方法会被调用
    // 找出类型为字幕且轨道内片段数大于 0 的所有轨道
    const subtitleTracks = timeline.VideoTracks.filter((t) => t.Type === 'Subtitle' && t.VideoTrackClips.length > 0);
    if (subtitleTracks.length < 2) {
      // 满足要求的轨道数量小于 2，报错提示并直接 return
      console.error('非空字幕轨道数量小于 2');
      return;
    } else {
      // 满足要求，省略后续对服务端发起合成请求的步骤
    }
  },
});