评论

小程序端视频剪辑的春天来了?

小程序端视频剪辑插件,微剪介绍及使用心得

前言-吐槽篇

在这个短视频遍地的时代,小程序端视频剪辑功能似乎一直是缺失状态,前段时间发布了一个视频编辑器的接口,试了下感觉也很鸡肋。也有在社区看到前辈们试水小程序音视频合成初探,研究了一番,其中涉及到几个重要的api:1-视频解码器,将视频解码,获得帧数据绘制到canvas上;2-音视频合成器,负责向原视频中添加音频;3-画面录制器,最后通过画面录制器导出成视频。这里必须要吐槽下小程序的文档,简约派代表,能省略的绝不多写一句,翻一下上述api文档便可石锤,几乎全靠猜,这么复杂的接口也不提供个demo。曾尝试按照上述思路做一些复杂的视频剪辑功能,比如图片视频合成一个,单单解决音频错位的问题就搞得头秃,可以说是步履维艰……

正文开始

最近发现小程序发布了一款视频剪辑插件 - 微剪,看了下官方提供的Demo还挺有趣的,相比于上述API功能更完善,感觉小程序一直在探索新姿势,真香啊。

小程序:是的,我啥都能做[手动狗头]

本文前半部分旨在结合上述插件,输出一个简单的视频剪辑小程序,感兴趣(不想动手只想白嫖)的同学也可以直接在小程序中搜索「微剪插件演示」,感受一下插件的功能;后半部分着重介绍下插件的一些核心思想和高级用法。

插件接入

微剪以插件的形式提供给开发者,不能单独使用,所以我们必须要先有个小程序主体(不会吧阿sir,这都想白嫖我?如何注册小程序请自行百度好伐)。插件的接入流程也比较简单,官方文档 写的比较清楚,这里就不啰嗦了。目前好像处于公测阶段,可以免费申请使用。

代码开发

上述准备工作做完后,我们就可以在代码中使用微剪插件了,插件暴露了两个组件clip和export,clip是入口组件,export为出口组件,其间的流程完全被插件接管,开发者无需关心也无法干涉(有点霸道总裁的味道了啊),通过一系列简单的配置后就可以看到插件的全貌了。【2020/09/23日 删除】

【2020/09/23日 新增】最新版插件提供两种开发模式,暂称为自动模式(仅通过少许配置即可)和手动模式(利用插件暴露的组件自定义开发,1.3.0版本新增)。先介绍第一种方式,按照下述步骤走一遍,应该就能看到插件的全貌了,问题不大。

step1:app.json 引入插件配置

参考这里:小程序插件配置

{
  "plugins": {
    "myPlugin": { // 自定义插件名,后面会用到
      "version": "1.3.0",  // 最新版本号即可
      "provider": "wx76f1d77827f78beb"  // 插件ID,固定值
    }
  }
}

step2:页面中添加插件

新建一个页面,在页面的json文件中引入插件暴露的clip组件

{
  "usingComponents": {
    "my-clip": "plugin://myPlugin/clip"
  }
}
  • my-clip: 自定义组件名字,在wxml中使用;

  • myPlugin: 引入插件的时候,在app.json中声明的插件名;

  • clip: 固定值,官方暴露的组件名称。

wxml文件:

<view>
    <my-clip settings="{{settings}}"></my-clip>
</view>

js文件:

Page({
  data: {
    settings: {
      common: {
        videoMaxDuration: 30, // 小程序限制最多拍摄30秒
        chooseMaxDuration: 1000, // 选择视频的默认时长限制
        clipMaxDuration: 60, // 裁切时长的默认限制
      }
    }
  },
})

settings有众多配置项,具体可参考官方文档;不设置也可以,插件提供了一套默认的配置项。

PS:这里得吐槽下插件的主题机制,感觉很繁琐。跟平时写vue组件等通过样式覆盖的方案不同,而是通过一系列配置项进行配置,这也意味着只能修改配置项涉及的UI,其他的一律无法修改。这里有个疑问,为什么不采用外部样式类的方案呢?感觉更灵活啊。

到这里,应该就可以在手机上看到插件的全貌了,截取了几张图如下:

step3:导出视频

点击上图的「下一步」按钮,就可以导出视频到相册中了。插件本身也支持自定义导出,下面简单介绍下用法:

step3-1:新增导出页

创建一个自定义的导出页,在导出页中引入插件提供的导出组件即可。

json文件:

{
    "usingComponents": {
      "my-export": "plugin://myPlugin/export"
    }
}

wxml文件:

<view>
    <view>自定义导出界面部分</view>
    <my-export bindexportsuccess="handleExportSuccess">
        <button>自定义导出按钮</button>
    </my-export>
</view>

然后在js文件中处理导出成功回调即可,导出组件提供了一系列属性,包括水印,导出进度等,具体导出数据结构及属性,可参考官方文档。

step3-2:配置导出页路径

新增上述导出页后,还需要通知插件导出页路径。还记得上文提到的 my-clip 组件中的settings属性吗,此为插件的配置项入口,在里面配置下即可。

  data: {
    settings: {
      common: {
        videoMaxDuration: 30, // 小程序限制最多拍摄30秒
        chooseMaxDuration: 1000, // 选择视频的默认时长限制
        clipMaxDuration: 60, // 裁切时长的默认限制
        exportPagePath: '/pages/export/export' // 自定义导出页面地址
      }
    }
  }

事已至此,通过开发工具的预览功能便可以在手机中看到自定义的导出页了。


【2020/09/23日 新增】

高级模式(1.3.0版本新增)

还记得上文提到的简单(自动)模式,我们只用到了插件暴露的两个组件,clip和export,难道插件只暴露了两个组件吗?就这?就这???

插件从1.3.0版本开始,开放了更多的组件出来,也提供了一种称为【高级接入】的方式,接下来让我们一探究竟:

高级模式需要先了解插件的数据机制,即下文提到的Track驱动模式,在此基础上可以结合插件暴露的组件进行自定义创作。

标准的数据驱动模式

高级模式,即文章开头提到的手动模式,遵循一套标准的Track数据结构,此处引用官方文档的一张图和介绍

什么是Track?

track顾名思义为轨道,播放器支持多种轨道,如:媒体(视频 或者 图片), 音乐, 特效, 滤镜, 文字 等。
每一种类型的轨道对应不同类型的track,可以简单的理解track就是轨道。

什么是Clip?

clip是轨道中的素材片段。举个例子: 你需要编辑三段视频,那么你需要将三个视频片段加入媒体轨道中,那么这里的每个视频片段就对应不同的clip,每个clip的属性会不相同,如: 视频时长,开始结束时间等。

上述官方定义看得有点懵?大白话简单理解,画面播放的时候,我们在某一时刻可以看到(听到)很多元素,比如原始画面的一帧,特效的一部分(几个小心心),滤镜,文字以及音乐等,Track就是这些元素的数据载体,不同的元素由不同类型的Track管理,所以Track是个数组。

随着时间轴的推移,我们又可以看到不同的视频、图片、特效切换效果等等,比如由图片A切换到图片B,再切换到C、由特效A切换到特效B等,这个时候就涉及到clip的概念,clip可以简单理解为上述Track的一个属性,里面存放着原始素材的信息(基本信息,展示时长等),比如上述🌰,负责媒体的Track的clips就得包含图片A、图片B以及图片C的信息,负责特效的Track的clips就得包含特效A和特效B的信息。

官方提供了详细的Track以及Clip的数据接口定义,具体请参考官方文档 数据结构文档 部分,这里只做核心思想解释。

积木已有,创作在你

最新版本(1.3.0)暴露的几个核心组件:

  1. wj-player:插件的核心播放器组件,对应的上述简单模式截图里的播放视频的容器;
  2. wj-camera:相机组件,可以拍摄视频,也可以从相册选择视频、图片,截图里的图片、视频就是从这来的;
  3. wj-clipper:裁切器组件,上述截图中可以看到视频一帧一帧画面的那部分,就是用这个组件实现的。

上述组件即插件实现的核心部分,还有个文字组件(wj-textEditor、向视频中添加文字)和导出组件(wj-export、与自动模式的导出组件基本相同)使用比较简单,每个组件都有各自的属性和方法,具体请参考高级组件API文档。结合标准的Track数据驱动,理论上可以搭配出与插件功能完全一致的视频剪辑体验,当然如果自动模式可以满足业务需求,那白嫖它,做条闲鱼不好吗?如果业务需求需要个性化,可以考虑使用上述手动模式,自力更生,丰衣足食。

光说不练假把式

下面通过一个简单的 相册集小demo 演示一下上述组件的用法,可以下载小程序片段到本地运行(注:由于插件的使用需要先申请资格,所以请填写一个有使用权限的小程序AppID)。主要使用了三个组件,wj-camera(收集素材)、wj-player(展示素材和特效)、wj-export(导出视频),通过camera页面从相册选择图片,然后搭配插件内置的一些特效输出到player页面中预览效果,最后通过export页面导出。

核心代码如下:

  • camera 页面

camera.wxml

<!--pages/camera/camare.wxml-->
<wj-camera bindmediachanged="onMediaChanged" >
    <view class="preview-button" catchtap="onClickDefaultBtn">
        <navigator data-source="jump" url="../player/player?type=default" hover-class="none">
            <text>随机特效</text>
        </navigator>
    </view>
    <view class="preview-button" style="right:230rpx;width:240rpx" catchtap="onClickPointBtn">
        <navigator data-source="jump" url="../player/player?type=wyyl" hover-class="none">
            <text>卡点视频(6图)</text>
        </navigator>
    </view>
</wj-camera>

camera.js

// pages/camera/camare.js
Page({
  data:{
    _media:[]
  },
  onMediaChanged(e){
    this.data._media = e.detail.track
  },
  onClickDefaultBtn(){
    global.testMedia = JSON.parse(JSON.stringify(this.data._media))
  },
  // 【万有引力】卡点设置
  onClickPointBtn(){
    let durationList = [2.6, 2.6, 2.6, 2.8, 2.8, 2.6], startAt = 0
    let copyMedia = JSON.parse(JSON.stringify(this.data._media))
    copyMedia.clips.forEach((item,index) => { // 更新卡点视频图片播放时长
      let duration = durationList[index]
      item.section.end = duration
      item.section.duration = duration
      item.startAt = startAt
      startAt += duration
    });
    copyMedia.duration = startAt
    global.testMedia = copyMedia
  }
})
  • player 页面

player.wxml

// pages/player/player.js
Page({
  data: {
    styleConfig: { height: 1000, width: 750 },
    type: 'default'
  },
  onLoad: function (option) {
    this.setData({
      type: option.type
    })
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    this.bindPlayer()
  },
  // 绑定player
  bindPlayer() {
    this.player = this.selectComponent("#player");
  },
  // 设置player组件的数据
  async onPlayerReady() {
    let tracks = []
    if (this.data.type === 'default') {
      tracks = this.getDefaultTrack()
    } else {
      tracks = this.getWYYLTrack()
    }
    this.player.updateData(tracks) // 更新player的数据
    global.testExportTracks = tracks // 存储导出页数据
  },
  // 随机特效
  getDefaultTrack() {
    let startAt = -3, { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types']
    let mediaTrack = global.testMedia // 获取camera组件输出的media轨道
    let effectTrack = new Track({ // 新建一个effect轨道
      type: TRACK_TYPES.EFFECT,
      clips: []
    })
    let effectList = this.player.getEffects(); // 获取player内置的特效
    let randomEffects = new Array(mediaTrack.clips.length).fill(null).map((item, index) => {
      startAt += 3
      return new Clip({
        id: `effect-${index}`,
        type: CLIP_TYPES.EFFECT,
        key: this._getRandomEffect(effectList).key,
        section: new ClipSection({
          start: 0,
          end: 3
        }),
        startAt: startAt
      })
    })
    effectTrack.clips = randomEffects // 更新effect轨道的clips数据
    return [mediaTrack, effectTrack]
  },
  // 【万有引力】卡点特效
  getWYYLTrack() {
    let { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types']
    let mediaTrack = global.testMedia // 获取camera组件输出的media轨道
    let effectTrack = new Track({ // 新建一个effect轨道
      type: TRACK_TYPES.EFFECT,
      clips: []
    })
    // 定制卡点特效
    let effectList = [
      { key: 'Swing', duration: 2.6, startAt: 0 },

      { key: 'SoulOut', duration: 0.6, startAt: 2.6 },
      { key: 'Shining', duration: 2, startAt: 3.2 },

      { key: 'SoulOut', duration: 0.6, startAt: 5.2 },
      { key: 'Blink', duration: 2, startAt: 5.8 },

      { key: 'SoulOut', duration: 0.6, startAt: 7.8 },
      { key: 'LightCircle', duration: 2.2, startAt: 8.4 },

      { key: 'SoulOut', duration: 0.6, startAt: 10.6 },
      { key: 'FlowingLight', duration: 2.2, startAt: 11.2 },

      { key: 'SoulOut', duration: 0.6, startAt: 13.4 },
      { key: 'Heart', duration: 2, startAt: 14 },
    ]
    let randomEffects = new Array(mediaTrack.clips.length * 2 - 1).fill(null).map((item, index) => {
      return new Clip({
        id: `effect-${index}`,
        type: CLIP_TYPES.EFFECT,
        key: effectList[index].key,
        section: new ClipSection({
          start: 0,
          end: effectList[index].duration
        }),
        startAt: effectList[index].startAt
      })
    })
    effectTrack.clips = randomEffects // 更新effect轨道的clips数据
    let musicTrack = new Track({ // 新建一个music轨道
      type: TRACK_TYPES.MUSIC,
      clips: []
    })
    let bgMusic = new Clip({
      id: 'music',
      type: CLIP_TYPES.MUSIC,
      info: {
        tempFilePath: "https://imgcache.qq.com/operation/dianshi/other/wanyouyinli.c7f973d906d9b8a3e7db90a90a7874d01454614b.mp3",
      },
      section: new ClipSection({
        start: 0,
        end: 1000
      }),
      startAt: 0
    })
    musicTrack.clips = [bgMusic]
    return [mediaTrack, effectTrack, musicTrack]
  },
  // 跳转至导出页
  goExport() {
    wx.navigateTo({
      url: '../export2/export'
    })
  },
  // 获取随机特效
  _getRandomEffect(effectList = []) {
    let index = Math.floor(Math.random() * effectList.length)
    return effectList[index]
  }
})
  • export 页面

export.wxml

<wj-export tracks="{{exportTracks}}" 
    bindexportsuccess="onExportSuccess"
    bindready="onExportReady">
    <button>导出视频</button>
</wj-export>

export.js

// pages/export2/export.js
Page({
  data: {
    exportTracks: []
  },
  // 设置导出数据
  onExportReady() {
    this.setData({
      exportTracks: global.testExportTracks
    })
  },
  // 导出成功回调
  onExportSuccess(e){
    let res = e.detail;
    wx.saveVideoToPhotosAlbum({
      filePath: res.tempFilePath,
      success: res => {
        wx.showToast({
          title: "已保存至相册"
        });
      }
    });
  }
})

camera和export页面比较简单,这里就不啰嗦了。主要说下player页面的实现思路,player的Track数据暂时只涉及到了三种:media类型、effect类型以及music类型(卡点模式用),其他的暂未使用。

  1. 随机模式:针对每张图随机获得一个特效key(wj-player组件内置了一些特效,直接使用即可),然后设置其时长与media类型的clip时长一致即可(默认是3s)。
  2. 卡点模式:根据音乐节奏调整了下每张照片的展示时长。

这样一个简单的照片集应用就做出来啦,so easy,妈妈再也不用担心我的发际线了。

卡点模式最终的成果物 点此预览

PS:使用过程中发现 wj-player 组件和 wj-export 组件无法在同一个页面中使用,不知道是不是我的姿势不对,有待后续验证;还有就是素材切换的时候没有转场动画,显得有些僵硬;另外看了下,特效倒是挺多的,但是没办法一键输出卡点视频,缺少一些常见的视频模板,自己做卡点视频特别费劲,要微调好久……

自动挡虽然好开,但是真正的赛车手都用手动挡[手动狗头结束]

总结

作为小程序端的一款视频剪辑工具,麻雀虽小五脏俱全,基础的功能是齐全的。个人使用下来整体体验还不错,接入也比较简单,官方配套文档也很完善,也期待官方后续可以提供更丰富的功能、组件。

最后,对视频剪辑小程序感兴趣的同学不防申请插件尝试一下,在官方基础api让人如此头秃的情况下,使用插件或许是个不错的选择。

最后一次编辑于  09-28  
点赞 1
收藏
评论

2 个评论

  • .Rrr 🐵
    .Rrr 🐵
    09-28

    哇 🐂🍺 大佬请接受我的膜拜

    09-28
    赞同
    回复 1
    • L²⁰²⁰
      L²⁰²⁰
      09-29
      不是大佬……小程序摸索中,一起进步🤝
      09-29
      回复
  • 糊糊湖
    糊糊湖
    09-28

    我试了下,剪辑经常卡死,无反应。。。。。

    09-28
    赞同
    回复 4
    • L²⁰²⁰
      L²⁰²⁰
      09-28
      老哥秒回呀,你访问的【微剪插件演示】小程序?我这用的还可以呀
      09-28
      回复
    • L²⁰²⁰
      L²⁰²⁰
      09-28
      我是ios,挺流畅的,老哥是安卓机还是ios?
      09-28
      回复
    • 糊糊湖
      糊糊湖
      09-28回复L²⁰²⁰
      ios11,还是app弄好点
      09-28
      回复
    • L²⁰²⁰
      L²⁰²⁰
      09-28回复糊糊湖
      我是iPhone X,微信版本7.0.15很流畅呀。老哥是iPhone11还是ios11的系统?app是流畅些,市面类似app上太多了,小程序刚出来可以试水一波。
      09-28
      回复
登录 后发表内容