UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合

本篇作为技术分享系列的第三篇,详细讲一下手绘视频中结合视频的处理方式。

随着近几年短视频和直播行业的兴起,视频成为了人们表达情绪和交流的一种重要方式,人们对于视频的创作、编辑和分享有了更多的需求。而视频的编辑、剪辑方式,也由过去需要借助专业的视频剪辑软件,专业的视频剪辑操作者操作,变为现在的普通用户可以使用视频类 App 很方便的创作出视频。

短视频和直播类 App 对于视频的处理,主要集中在:滤镜、美颜、贴纸、视频剪切和拼接、视频变速、音轨合成,这些实现基本都是基于 OpenCV、OpenGL 和 FFMpeg 的实现,这里我们不多做介绍,本篇主要介绍的是手绘视频中插入视频文件的处理和视频中加入手绘视频元素的处理。

这两种形式的应用场景很多,例如手绘视频中有一个电视机框,视频在框内播放;再比如视频为天气预报,周围加上手绘视频的人物元素,形成人物解说的形式;再比如最常见的在视频中加入一些手绘视频元素,做成动态特效或字幕/表情等,下面是几个例子:

上面例子的结合方式分别是:

1) 黑板部分为插入的视频,周围是手绘人物和手势,字幕等;

2) 电视机框内是插入的视频,周围手绘视频元素营造一个观看电视的场景;

3) 电视框内是插入的视频,手绘视频元素营造播报新闻的场景;

4) 这个是我临时做的,在视频中插入手绘视频元素,主体还是视频,做出一些特效等。

下面先介绍手绘视频中插入视频文件的处理:

以上面前三张图为例,这种结合方式中插入的视频,都是把视频以固定大小放在了固定的位置,在设定的开始时间开始出现,播放完成后消失。而声音处理方面,在视频出现后,手绘视频的背景音乐需要和视频的声音做音轨合成。结合前面几篇说的 SVG 的绘制和文字的绘制,整体流程:

接下来是视频中插入手绘视频元素的处理:

这种情况以第四张图为例,这种方式,我们认为视频会维持原本的尺寸和帧率,而手绘视频元素,在指定时间,以指定的速度角度和指定的起始终止位置出现,动画播放完成后,或维持在原位置,或消失。整体流程:

上面两种方式的整体流程中,大部分流程是共通的,或者说第二种情况是第一种情况的一个特例,它指定的视频宽高就是视频的宽高,视频之外不存在手绘元素。而且视频固定出现在层级的最底层。

流程中大部分操作都是比较常规的音视频操作,如解析视频文件、合成音轨、视频帧序列生成视频文件等。其中关键的一个步骤是视频每一帧的获取,因为涉及到各种元素的动画,所以这个获取过程的原理是:在后台运行一张画布,把每个需要渲染的元素动画,按照实际动画属性去渲染,包括位置、速度、角度、层级覆盖关系等,然后按照导出视频指定的帧率去截取画布生成视频帧。

到这就把手绘视频与视频的结合介绍完了,实现过程相对简单,但是应用场景很广泛,如果有更有趣的场景,欢迎交流!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

十本学习前端必看书籍,让你效率提升10倍

自学最苦的莫过于自己一个人摸索没有人带路,本人现在推荐几套适合自学的书籍,希望能帮到大家。 第一本,入门 《Head first HTML&CSS》 最好的入门...

24600
来自专栏IT派

React 走红前端,最强技能树快速 Get!

2018 年 6 月 Hacker News 招聘趋势已经发布,数据显示,JavaScript 库 React 在连续12次占据榜首之后,并没有减缓趋势,又一次...

8720
来自专栏PPT素材

收藏这些网站,做设计和PPT不再为找素材发愁

平时逛的比较多的网站,国内大牌平面设计师社区,海量优秀平面设计作品可以观摩欣赏。做好PPT从培养自己审美开始吧。

17300
来自专栏灯塔大数据

塔荐 | 2018 年最值得关注的 JavaScript 趋势

前言 JavaScript 渗透的范围越来越广,它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript ...

36780
来自专栏较真的前端

前端学习——这十本书一定要看

29460
来自专栏deepcc

Web前端开发工程师的具备条件

31560
来自专栏竹清助手

2016年WEB前端学习误区详解之WEB前端学习路线

2016年WEB前端学习误区详解之WEB前端学习路线。首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的...

12730
来自专栏互联网杂技

超实用的设计师个人品牌打造指南

动画早就不是早期人们印象中的低龄向玩物了,从早年的卢卡斯影业到今天的工业光魔,动画技术证明了它可以实现无限的可能性;从70年代的高达、EVA到之后的宫崎骏、皮克...

36970
来自专栏编程微刊

一份来自前端开发工程师的规范简历

40240
来自专栏全栈工程师成长之路

2018计算机系书单推荐(持续更新)

430120

扫码关注云+社区

领取腾讯云代金券