写点什么

《趣学音视频》这段“朋友圈模版视频”的扛鼎之作是如何诞生的

用户头像
ucsheep
关注
发布于: 2021 年 04 月 28 日
《趣学音视频》这段“朋友圈模版视频”的扛鼎之作是如何诞生的

大家好,这里是《趣学音视频》频道,我是 ucsheep

欢迎大家点赞、评论、关注、分享


以上是一个“朋友圈视频模版”的扛鼎之作,整个视频散发着浓厚的朋友圈气息。熟悉的界面内,字里行间,抖着视频创作者的激灵。而中间大海波涛汹涌的动态画面,和耳畔的海浪声将观看者从颓靡的遐想中拉回现实,让观看者意识到“自己已经不是从前的自己”的残酷现实。


“长大”意味着什么?上面的视频给出了一个内涵且搞笑的答案。你看懂视频,摇摇头,会心一笑之时,是不是也有一丝伤怀——你已经和纯真、稚嫩彻底 Bye-Bye。既然已经看到这篇文章,不妨让我告诉你:一个长大的工程师,也是时候学点音视频知识了。


在抖音上经常会刷到类似上面的“朋友圈”模版视频,搞笑的文案、搞笑的视频,辅之以神评,往往播放量惊人。经我稍加思索,认为此类视频可以使用软件进行傻瓜式、批量化地生成,将其发扬光大。如你所见,上面的视频,并不是录屏,也不是剪辑软件剪辑,而是我用程序合成的。只需提供文案和视频素材,这个程序就会生产出类似上面的视频。


今天我将会帮你学会:如何用程序自动地合成出这样的视频。本文的结尾,我也会分享完整的源码及相关程序。

1.功能分析

效果图

观察上面的视频截图,我们对此次开发的软件功能进行提炼。即,用户输入自定义文案和视频素材;程序将用户输入的文案渲染到视频背景中对应的区域,并且为背景内角色随机抽取头像,渲染到视频背景中各个角色的头像对应位置,最终将背景和视频素材合成,生产出目标视频。

1.1 用户输入

  1. 发布者昵称

  2. 视频上方对应文案

  3. 评论者昵称

  4. 评论者对应文案

  5. 发布者回复评论者的文案

  6. 画面中心视频素材

1.2 程序流程及输出

  1. 随机角色(1 个发布者+1 个评论者+7 个点赞者)分配头像图片

  2. 渲染角色头像文案生成背景图片

  3. 背景图片视频素材合成最终视频

2.技术选择

根据需求,我们的技术重心分为背景图片合成背景图与视频素材合成两部分


其中背景图片合成部分,涉及图片与图片和合成、图片与文字的合成两种。我们采用 Python 的 Pillow 模块来实现。


背景图与视频素材合并,我们采用 FFmpeg 的 滤镜 实现。

3.实现步骤

3.1 基础底图制作

基础底图,我们直接从朋友圈找一条视频,然后截图,使用 PS 进行处理即可。处理之后,我们得到下面的效果 :

背景底图

这张图将我们截取的图片尺寸根据竖版视频 16/9 的比例重制为 720*1280。黑色部分为需要替换的视频素材和头像。文字部分进行了擦除。

合成区域

我们将需要动态合成的区域分为 3 类:

  • 图片类区域图片中用阿拉伯数字标注的 1-10 黑色区域


  • 文本类区域图片中使用红框框起并使字母 A-G 的区域


  • 视频区域


3.2 背景图合成

上面我成功制作了基础底图,并获取了所有合成所需参数。接下来就进行背景图制作。

3.2.1 头像渲染

我准备了 1695 个方形的头像图片,用于合成时随机调取。存放在 res/avatar 目录下。在这里,我们每个合成任务需要用到 9 个头像图片。所以我们实现了一个一次随机获取 9 个视频的函数,如下:

def getAvatarRandom():    totalList = os.listdir("res/avatar")    if len(totalList) == 9:        return totalList    randIndex  = random.randint(0,len(totalList)-9)    return totalList[randIndex:randIndex+9]
复制代码

在获取头像资源后,就需要在基础底图上渲染头像图片了。使用 Pillow 进行图像的合并,只需要像下面这样:

# 载入基础底图bg_image = Image.open('res/bg.jpg')# 载入头像图片1avatar1 = Image.open('res/avatar/1.jpg')# 缩放头像图片至指定尺寸avatar1.thumbnail((72, 72))# 在基础底图上的指定区域渲染头像图片1bg_image.paste(avatar1, (19, 16))# 预览合成效果bg_image.show(bg_image)# 将合成效果保存为图片bg_image.save(fileName)
复制代码

举一反三,随机获取所有头像资源并在背景底图上完成渲染的代码如下:

    # 载入底图    bg_image = Image.open('res/bg.jpg')  	# 随机获取9个头像并载入    aList = getAvatarRandom()    avatar1 = Image.open('res/avatar/' + aList[0])    avatar2 = Image.open('res/avatar/' + aList[1])    avatar3 = Image.open('res/avatar/' + aList[2])    avatar4 = Image.open('res/avatar/' + aList[3])    avatar5 = Image.open('res/avatar/' + aList[4])    avatar6 = Image.open('res/avatar/' + aList[5])    avatar7 = Image.open('res/avatar/' + aList[6])    avatar8 = Image.open('res/avatar/' + aList[7])    avatar9 = Image.open('res/avatar/' + aList[8])    # 渲染9个头像    avatar1.thumbnail((72, 72))    bg_image.paste(avatar1, (19, 16))    avatar1.thumbnail((63, 63))    bg_image.paste(avatar1, (73, 686))    avatar2.thumbnail((63, 63))    bg_image.paste(avatar2, (77, 491))    avatar3.thumbnail((63, 63))    bg_image.paste(avatar3, (148, 491))    avatar4.thumbnail((63, 63))    bg_image.paste(avatar4, (216, 491))    avatar5.thumbnail((63, 63))    bg_image.paste(avatar5, (286, 491))    avatar6.thumbnail((63, 63))    bg_image.paste(avatar6, (355, 491))    avatar7.thumbnail((63, 63))    bg_image.paste(avatar7, (425, 491))    avatar8.thumbnail((63, 63))    bg_image.paste(avatar8, (497, 491))    avatar9.thumbnail((63, 63))    bg_image.paste(avatar9, (73, 593))
复制代码

最终效果如下

3.2.2 文本渲染

使用 Pillow 进行文本渲染也很简单:

# 生成一个画板draw = ImageDraw.Draw(bg_image)text1 = "长大就是当你听到波涛汹涌,想到的却不是大海!"# 载入样式font1 = ImageFont.truetype("res/simhei.ttf", size=25)# 使用draw在画板下面上指定区域,使用指定文字样式渲染文字draw.text(xy=(108, 75), text=text1, font=font1, fill=(0, 0, 0, 0))
复制代码

举一反三,所有文本的渲染源码如下:

    # 文本声明    text1 = "长大就是当你听到波涛汹涌,想到的却不是大海!"    text2 = "骚骚的小马"    text3 = "老铁铁"    text4 = "精辟啊!"    text5 = "低调低调!"    # 创建画板    draw = ImageDraw.Draw(bg_image)    # 渲染文本    font1 = ImageFont.truetype("res/simhei.ttf", size=25)    draw.text(xy=(108, 75), text=text1, font=font1, fill=(0, 0, 0, 0))    font2 = ImageFont.truetype("res/simhei.ttf", size=29)    draw.text(xy=(110, 20), text=text2, font=font2, fill=(84, 99, 142, 0))    font3 = ImageFont.truetype("res/simhei.ttf", size=27)    draw.text(xy=(144, 591), text=text3, font=font3, fill=(84, 99, 142, 0))    draw.text(xy=(199, 722), text=text3, font=font3, fill=(84, 99, 142, 0))    draw.text(xy=(144, 684), text=text2, font=font3, fill=(84, 99, 142, 0))    font4 = ImageFont.truetype("res/simhei.ttf", size=27)    draw.text(xy=(144, 628), text=text4, font=font4, fill=(0, 0, 0, 0))    font5 = ImageFont.truetype("res/simhei.ttf", size=27)    draw.text(xy=(294, 721), text=text5, font=font5, fill=(0, 0, 0, 0))    # 存储最终图片    bg_image.save("tmp/" + fileName)
复制代码

最终效果如下:

nao~,目前就只剩下画面正中的视频区域了。

3.3 背景图与视频合成

将视频素材渲染到背景图片的指定区域,其实就是 FFmpeg 的画中画效果,使用 FFmpeg 的滤镜功能实现。


关于 FFmpeg 的使用,本系列后续会特别推出新的文章进行解读,欢迎大家关注我,持续收看。


基于这个功能的需求,我们使用的命令如下:


ffmpeg.exe -i task_bg.png -vf "movie=demo.mp4,scale=514x332[test]; [in][test] overlay=x=107:y=112 [out]" output.mp4 
复制代码


  • task_bg.png 为之前合成的最终背景图

  • demo.mp4 为准备的视频素材

  • scale 对视频素材进行了缩放处理

  • overlayx、y 指定了视频素材渲染的位置


由于 movie 参数不支持斜杠“/”反斜杠“\”,所以当我们遇到背景图片与视频素材不在同一个目录下时会很尴尬——没有办法在命令中使用路径来指定视频素材。


对于上面的问题,一般直接切换到视频素材的目录下,调用 ffmpeg 命令即可。如下:

cd 【视频素材路径】&&【ffmpeg所在目录】\ffmpeg.exe ……
复制代码


看到这里,我们终于可以通过程序合成出“朋友圈模版视频”的扛鼎之作了!

4.结语

视频,往往倾注着创作者的灵感、传授知识的目的、分享讯息的愿望。我很反感类似做搬运这种毫无价值的腐食和偷窃行为。这类腐食的投机者往往钻营,【此处省略 300 字】,所以,程序和源码我还是不直接放这里了。


言而有信,结尾给出程序和完整源码:

print("想要源码和程序嘛?关注后私信我,我会酌情给予(仅限学习目的)~")
复制代码


发布于: 2021 年 04 月 28 日阅读数: 1282
用户头像

ucsheep

关注

譬如朝露 去日苦多 2021.03.22 加入

You see!Sheep!

评论

发布
暂无评论
《趣学音视频》这段“朋友圈模版视频”的扛鼎之作是如何诞生的