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