视频剪辑Web端除了提供视频剪辑Web SDK最基本的功能,您可以根据实际需求在此基础上扩展。通过阅读本文,您可以了解Web SDK的扩展功能示例。

目录

动态获取视频剪辑Web SDK的版本号自定义字幕默认文字
自定义按钮文案修改默认预览画布比例
主动获取Timeline数据自定义返回按钮
自定义Logo自定义媒资导入界面
自定义合成导出界面-

扩展功能示例

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

动态获取视频剪辑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 {
      // 满足要求,省略后续对服务端发起合成请求的步骤
    }
  },
});