今天,我将展示如何生成一个演示谷歌搜索网站的视频。

showman.png

视频将由我们的 OpenResty Showman 产品根据一个剧本文件制作。

showman-arch.png

打开 Google Chrome 浏览器,然后打开 OpenResty Showman 插件。假设这个插件已经安装。

屏幕截图

现在我们来到了 Showman 的登录页面。假设你已经在我们的 OpenResty.com 网站上注册了账户,并激活了 Showman 服务。

使用 OpenResty.com 账户进行登录。

屏幕截图

我们使用谷歌账户登录。具体使用哪一种类型的账户取决于您的注册方式。

屏幕截图

登录…

进入 OpenResty Showman 的剧本列表页面。

屏幕截图

我们所有的视频都是由这些剧本文件自动生成的。机器会自导、自演、自拍、自配音。我们人类就是电影编剧。

点击这个按钮来创建一个新的剧本文件。

屏幕截图

屏幕截图

输入文件名,“google”。

屏幕截图

点击“保存”按钮,保存文件。

屏幕截图

现在我们来到了剧本文件的编辑界面。剧本文件是用 Nav 语言(或 navlang)编写的。不要担心,Nav 语言是一种非常简单的类似文档的语言。它不是一种编程语言。

首先输入字母“d”和一个冒号。这意味着创建一个异步的叙述性文本。字母“d”是指“描述”。

屏幕截图

在下一行,我们输入叙述性文本:“让我们到谷歌主页去”。

屏幕截图

注意该行开头的缩进。这里编辑器自动为我们插入了缩进。

现在使用 goto 命令来访问 Google 的网址。不过这一行不能有任何缩进。

屏幕截图

d 叙述部分和 goto 命令是同时操作的。也就是说,在叙述的同时,URI 也被输入到网络浏览器的地址栏中。所以这样的d 叙述被称作是“异步”的。现在让我们在本地运行和调试这个剧本。

点击最左边的绿色按钮,从剧本的开头开始运行。记住要观察右边的浏览器窗口是如何变化的。

屏幕截图

我们看到,右边的窗口确实自动打开了谷歌主页。

让我们继续编写剧本。

现在输入字母“e”和一个冒号。这表示用模式匹配目标网页上的一个区域。字母“e”代表“元素”,意味着一组网页元素。

屏幕截图

在下一行,输入我们关注的页面元素的描述。

首先输入元素模式 Textbox,代表页面上的一个文本框。

屏幕截图

我们希望能与右侧窗口的大搜索框相匹配。

搜索框本身没有文本标签,所以我们用两个连续的双引号来表示它的标签是空的。

屏幕截图

现在,大的搜索框已经描述好了。

我们给这个搜索框一个名字,“query”。这样我们之后就可以引用它。

屏幕截图

然后,我们描述一下搜索框下面的左侧按钮,“谷歌搜索”。

屏幕截图

注意,我们使用元素类型,Button,来匹配页面上的一个按钮。

同样,我们为右边的按钮“I’m Feeling Lucky”指定模式。

屏幕截图

注意我们是如何定位元素以模仿网页上元素的视觉布局的。

接下来我们添加一个异步叙述,“让我们输入 openresty 作为搜索查询”。

屏幕截图

然后在名为 query 的搜索框中输入字符串“openresty”。query 的名字刚刚在上面定义过。

屏幕截图

注意箭头运算符。它意味着将文本输入到指定的页面元素中。

然后输入一个异步叙述,“现在搜索”。

屏幕截图

然后发送回车键到搜索框。

屏幕截图

注意,我们在这里使用的是函数 press,意思是发送特殊的键盘键。Enter 键在某些键盘上也被称为 Return 键。

然后使用左边第二个按钮(也是绿色的)来做增量运行。也就是说,从我们之前停止执行的最后一行继续。

屏幕截图

我们可以看到 OpenResty Showman 根据剧本描述对网页进行了智能匹配。

匹配引擎使用网页的视觉信息和机器学习算法来寻找最佳匹配。

屏幕截图

屏幕截图

它根据剧本自动输入搜索查询。

屏幕截图

然后自动按下回车键。

屏幕截图

现在,成功执行到了当前剧本的终点。

让我们继续编写更多剧本内容。

为当前页面输入一组新的页面元素模式。

屏幕截图

我们希望能匹配一个超链接。

屏幕截图

这个超链接的标签应该匹配这个正则表达式。

屏幕截图

点、星号、问号(.*?)部分匹配任意的子字符串。 因此,任何带有“OpenResty”前缀和“Official Site”后缀的字符串标签都将匹配到此模式。

另外,我们也给这个链接起一个名字,比如,“title”。这也是为了后面引用。

屏幕截图

然后输入一个新的叙述段落,“我们可以看到我们的官方网站在顶部附近”。

屏幕截图

接着使用 callout 动作,只是为了突显我们之前定义的名为“title”的链接。请注意,我们并没有点击它。

屏幕截图

我们可以再添加一个叙述。

屏幕截图

然后添加 scroll down 命令,自动向下滚动 500 像素。

屏幕截图

睡眠 500 毫秒。

屏幕截图

然后再次向下滚动,这次是 700 像素。

屏幕截图

再来新一轮的增量执行。

屏幕截图

我们可以看到链接上的高亮或“callout”效果。

然后右边的窗口向下滚动了一下。

屏幕截图

静止了一会儿,然后继续往下滚动了。

屏幕截图

执行完成。

屏幕截图

继续添加更多的剧本内容。

匹配第 10 页的链接“10”。

屏幕截图

然后是右边的“Next”超链接。

屏幕截图

给它命名为“next”,以便以后引用。

屏幕截图

添加一个新的异步叙述段落,“进入下一页”。

屏幕截图

然后点击上面刚刚定义的名为“next”的超链接。

屏幕截图

注意这里我们使用 click 动作。箭头运算符意味着将此事件发送到右边的元素上。

再次点击增量执行按钮。它将从我们最后离开的位置开始运行。注意右侧的窗口是如何变化的。

屏幕截图

继续写剧本。

屏幕截图

匹配页面底部的链接“1”。

屏幕截图

然后匹配当前页面的文本“2”。它在“1”页链接的右边。

屏幕截图

给它命名为“cur”。

屏幕截图

然后是右边的链接“3”。

屏幕截图

高亮元素,“cur”。

屏幕截图

最后需要添加结尾的叙述了。

屏幕截图

注意,我们这里使用的是“ds”,而不是单字母“d”。第一个字母“d”仍然意味着“描述”。 而后面的字母“s”意味着“同步”。它意味着将暂停在网页上的任何操作,只讲叙述的内容。 它通常用于暂停和描述网页的当前状态。

在这个结束语中,添加“我们现在在第二页”以及“这是我今天想讲的内容”。

屏幕截图

ds 部分不只是用于结束语。它也可以在剧本文件的开头或中间使用。 每当我们需要暂停操作并解释更多细节时,我们都可以使用 ds

再做一次增量运行。

屏幕截图

它仍然像预期的那样工作。

现在,剧本已经完成了。而且还通过了本地测试。

现在是时候使用这个剧本文件从我们云端的生成视频了。

showman-arch.png

点击这个相机按钮,进入视频生成器页面。

屏幕截图

注意右边的窗口已经加载了这个页面。

然后点击右侧窗口中的“录制视频”按钮。

屏幕截图

在这个对话框中,我们可以为视频配置很多参数。比如叙述的电脑语音,用户上传的背景音乐,或者用户自己的开场和结束的视频片段。

这里我们选择 Salli,一个美国女声。

屏幕截图

点击对话框中的“录音”按钮。

屏幕截图

它开始在 OpenResty Showman 的云端录制视频。

屏幕截图

我们可以通过这个小窗口实时观看云上的录制过程。这是云服务器上的远程桌面。它确实在谷歌搜索网站上自动运行着。

  1. 开始用时间信息合成音频和字幕。
  2. 开始分割和编辑原始录制的视频。
  3. 最后,合并音频、视频和字幕流。

屏幕截图

视频现在已经准备好了!360p 分辨率的版本已经被加载到右边的视频播放器窗口。

屏幕截图

点击播放按钮来预览视频。注意,生成的字幕也被显示出来了。

屏幕截图

等待生成的视频播放到最后。

我们可以点击视频播放器下面的这个绿色按钮,下载这个 360p 的视频。

屏幕截图

现在它被下载到了本地文件系统。

我们还可以点击这个按钮来生成 720p 的高清视频。生成更高的分辨率不需要再从头开始录制。但还是需要一点时间的。

屏幕截图

现在,720p 的视频版本已经生成。原来的“生成”按钮已经变成了“下载”按钮。

点击 720p 的下载按钮。

屏幕截图

屏幕截图

现在,720p 视频的 MP4 文件已经下载完毕。

我们还可以生成和下载更高的分辨率,如 1080p 和 1440p。

屏幕截图

最后,我们可以下载 SRT 格式的字幕文件。几乎所有的视频网站都接受这种字幕格式,比如 YouTube 、 Vimeo 和 Bilibili 。

屏幕截图

事实上,你现在观看的视频也是由 OpenResty Showman 生成的。你可以在这里观看生成视频的全过程(有字幕)。

这个谷歌 navlang 剧本文件的完整内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
d:
Let's go to the Google home page.

goto https://www.google.com/

e:
[Textbox ""]=query
[Button "Google Search"] [Button "I'm Feeling Lucky"]

d:
Let's enter openresty as the search query.

"openresty" -> query

d:
Search now.

press('Enter') -> query

e:
[Link /OpenResty.*?Official Site/]=title

d:
We can see our official website is near the top.

callout -> title

d:
We can scroll downward a bit to see more results.

scroll down 500px

sleep 500ms

scroll down 700px

e:
[Link "10"] [Link "Next"]=next

d:
goto the next page.

click -> next

e:
[Link "1"] [Text "2"]=cur [Link "3"]

callout -> cur

ds:
We are on the second page now. This is what I like to cover today.

这就是我今天想讲的内容。

如果你喜欢这个教程,请订阅这个博客网站和我们的 YouTube 频道B 站频道。谢谢!

关于本文和关联视频

本文和相关联的视频都是完全由我们的 OpenResty Demo 系统从一个极简单的剧本文件自动生成的。

关于作者

章亦春是开源项目 OpenResty® 的创始人,同时也是 OpenResty Inc. 公司的创始人和 CEO。他贡献了许多 Nginx 的第三方模块,相当多 Nginx 和 LuaJIT 核心补丁,并且设计了 OpenResty EdgeOpenResty XRay 等产品。

关注我们

如果您喜欢本文,欢迎关注我们 OpenResty Inc. 公司的博客网站 。也欢迎扫码关注我们的微信公众号:

我们的微信公众号

翻译

我们提供了英文版原文和中译版(本文) 。我们也欢迎读者提供其他语言的翻译版本,只要是全文翻译不带省略,我们都将会考虑采用,非常感谢!