解决方案 | 如何在小程序端打造自己的专属短视频模板
在短视频风靡的时代，各种视频创作平台层出不穷，配套的剪辑工具也如雨后春笋般涌出，腾讯视频云团队独家首发小程序视频制作解决方案 -「腾讯微剪」，填补了小程序端相关功能的空缺，使得用户通过小程序快速进行实时视频编辑成为可能。
微剪小程序插件经过持续的功能迭代，最新版本除了支持拍摄、滤镜、特效、贴纸、音乐、文字、设置封面等视频剪辑场景基础能力外，还支持了视频模版、转场、动效、花字等高级能力，并且支持素材自定义。这篇文章就带领大家从0到1打造属于自己的专属视频模板，挖掘一下自定义模板背后的实现方案。
效果拆分
我们以下述心情类模板为例，先拆分其效果，再逐个实现，最终组装成一个完整的模板，注入到微剪插件中预览效果，最后再尝试一些新的改造。
拆分模板效果
- 一个基础视频/图片素材
- 一个拉幕效果
- 多个字幕信息
- 一段背景音乐
- 7s左右开始至最后的一段金粉特效
基础素材
其中基础素材以主轨道的形式撑起了整个时间轴，需要用户自行选择，所以无需关心；
拉幕&字幕素材
拉幕效果可以使用微剪内置的入场动画实现，但是内置的效果是黑底的，与视频中白色拉幕效果有出入，对于插件内没有的效果，我们可以通过alpha-video的方式实现。
alpha-video是什么？
实际应用中，通常会遇到类似的在基础素材上添加一些复杂特效的场景
实现类似的动画，常见方案可以使用序列帧，但图片尺寸过大、数量过多，会对性能造成很大的影响，小程序上容易出现内存不足。做成视频是比较好的方式，但由于小程序暂不支持任何透明视频格式，如何在保证性能、效果的基础上，实现透明就成了特效实现的关键，最终alpha-video方案应运而生。
如上图所示，alpha-video分为左右两部分，视频文件的每一帧都做相同的事情，左侧部分记录需要展示的特效（rgb数据），右侧部分的r通道记录对应坐标像素的alpha值。渲染的时候读取像素数据，再通过shader将这些数据合成为ARGB（vec4(左侧像素.rgb,右侧像素.r)）图像（带透明通道的图像）渲染到页面上，就实现了透明的效果。
vec4 getAuxiliaryColor(vec2 pos) { vec4 colorrgb = texture2D(auxiliaryTexture, pos); //获取右侧的rgb数据 vec2 pos2=vec2(pos.x+.5,pos.y); vec4 colora=texture2D(auxiliaryTexture,pos2); //获取左侧的r数据 vec4 finalcolor=vec4(colorrgb.r, colorrgb.g, colorrgb.b, colora.r); // 组合成rgba数据返回 return finalcolor;}微剪提供了配套的生成alpha-video工具，只需要准备好对应的具有透明通道的png文件即可快速合成。
我们获取上述拉幕动画中的某一帧，包含通明通道的图片如下，其中透明的部分最终会展示主轨道素材的像素数据：
借助上述alpha-video生成工具，最终合成的视频素材如下所示：
同理也可以将文字的信息合并到alpha-video中，最终输出一个包含拉幕效果、且承载字幕信息的视频素材。
背景音乐素材
获取背景音乐的方式有多种，使用上述alpha-video工具的时候安装了FFmpeg，所以此处可以利用其快速从原始视频中分离出背景音乐：
ffmpeg -i xxx.mp4 -f mp3 -ar 16000 xxx.mp3// xxx.mp4 原始视频文件// -f mp3 mp3编码// -ar 16000 音频采样率// xxx.mp3 输出音频文件特效素材
特效素材也可以使用上述alpha-video的思路获取特效视频数据，这里微剪内部也提供了类似的特效，我们直接使用即可。
组装素材
有了上述基础素材，我们就可以安装官方视频教程说明来组装模板数据了，如下所示：
其中 yiqiedouhuihaode.mp4 文件就是生成的拉幕&字幕素材、music.mp3 文件为背景音乐，完整的模板配置数据如下，几处关键部分已备注说明：
{ "key": "yiqiedouhuihaode", "name": "一切都会好的", "placeholders": { // 用户选择素材数据 "image1": { "name": "基础素材", "type": ["image", "video"], "value": "", "duration": 15.1 } }, "assets": { "music": "/assets/music/music.mp3", "yiqiedouhuihaode": "/assets/effects/yiqiedouhuihaode.mp4" }, "tracks": [ // 包含三个轨道，依次为主轨道、特效轨、音乐轨 { "type": "media", "id": "main-track", "clips": [ { "id": 1, "type": ["image", "video"], "startAt": 0, "section": { "start": 0, "end": 15.1 }, "info": { "tempFilePath": "%image1%" // 需与上述 placeholder 中的 key 值一致 } } ] }, { "type": "effect", "id": "effect-track", "clips": [ { "startAt": 0, "type": "effect", "id": "effect-1", "videoType": "alpha", "section": { "start": 0, "end": 6.23 }, "info": { "assetId": "yiqiedouhuihaode" // 拉幕&字幕特效视频名称，同上述assets对象中的key } }, { "startAt": 6, "type": "effect", "id": "effect-2", "videoType": "black", "key": "jinfen1", "section": { "start": 0, "end": 10 } } ] }, { "type": "music", "id": "main-music", "clips": [ { "startAt": 0, "type": "music", "id": "main-music-clip", "section": { "start": 0, "end": 15.1 }, "info": { "assetId": "music" // 背景音乐文件名称，同上述assets对象中的key } } ] } ]}最后我们将素材及json文件打包上传到文件服务器（自行准备）上，再按照官方教程提供的自定义模板教程（https://cloud.tencent.com/document/product/1156/48620#6.-.E5.AE.9A.E5.88.B6.E6.A8.A1.E6.9D.BF）配置即可在小程序中体验了。
注入插件
小程序接入微剪插件的流程请移步：准备工作（https://cloud.tencent.com/document/product/1156/45645）
在小程序app.js中初始化插件，并注入自定义模板配置，详情参考：自定义资源（https://cloud.tencent.com/document/product/1156/48620）
var myPluginInterface = requirePlugin('myPlugin');
App({ onLaunch: function () { if (myPluginInterface.initPlugin) { const settings = { theme: { primaryColor: "rgb(60,179,113)", // 主题色 button: { // 按钮配置 default: { // 默认状态 backgroundColor: "rgb(60,179,113)", textColor: "#fff" }, disable: { // 禁用状态 backgroundColor: "#ddd", textColor: "#fff" } } }, source: { templates: { tabs: [{ key: 'test', name: '自定义模板', list: [ { "name": "一切都会好", "key": "yiqiedouhuihaode", "thumbUrl": "https://cdn-weijian-1258344699.file.myqcloud.com/docs/zhihu/yiqiedouhuihaode.png", // 封面图 "previewUrl": "https://cdn-weijian-1258344699.file.myqcloud.com/docs/zhihu/yiqiedouhuihaode.mp4", // 预览视频 "resourceUrl": "https://cdn-weijian-1258344699.file.myqcloud.com/docs/zhihu/yiqiedouhuihaode.zip", // 上述oss地址 "count": 1, "isTrack": true } ] }] } } } myPluginInterface.initPlugin(settings) // 手动初始化插件 } }})预览效果
经过上述配置后，便可以在小程序中看到我们自定义的模板啦，试下效果吧：
新的尝试
目前为止，模板只支持一个素材，如果想要支持多个素材呢？再或者希望在现有的基础上增加一个离场落幕的效果该如何实现呢？很简单，只要修改下模板配置相关的json文件即可，接下来我们动手改造下，关键点已注释说明：
{ …… "placeholders": { // 背景音乐限制，总时长不能变，所以添加素材需要对应调整各个素材的时长 "image1": { "name": "图片1", "type": ["image", "video"], "value": "", "duration": 6.1 // 调整素材时长 }, "image2": { // 新增素材 "name": "图片1", "type": ["image", "video"], "value": "", "duration": 9 } }, …… "tracks": [ { "type": "media", "id": "main-track", "clips": [ { "id": 1, "type": ["image", "video"], "startAt": 0, "section": { "start": 0, "end": 6.1 }, "info": { "tempFilePath": "%image1%" } }, { // 新增素材clip "id": 2, "type": ["image", "video"], "startAt": 6.1, "section": { "start": 0, "end": 9 }, "info": { "tempFilePath": "%image2%" }, "operations": [ // 新增离场效果 { "id": "ZoomFadeOut", "key": "ZoomFadeOut", "params": { "startTime": 8, "transferDuration": 1 } } ] } ] } …… ]}下载体验用代码片段，最终效果请在手机端自行预览。（https://developers.weixin.qq.com/s/KpwSH7mK7nqF）
总结
本文通过从0到1还原一个短视频模板，探究了微剪自定义模板背后的实现原理，并利用内置的动效资源，尝试了一些新的改造，用户可以根据各自的业务需求，灵活地自定义实现自己独有的能力，在短视频日益兴盛的时代，探索新的业务形式。
获取更多插件详情，请移步官方网站：https://cloud.tencent.com/document/product/1156/45643
腾讯云开发者
