龙空技术网

URL2Video:把网页自动创建为短视频

LiveVideoStack 2670

前言:

当前咱们对“静态网页的制作过程有哪些”可能比较关怀,咱们都想要了解一些“静态网页的制作过程有哪些”的相关内容。那么小编同时在网上汇集了一些有关“静态网页的制作过程有哪些””的相关内容,希望兄弟们能喜欢,同学们快快来学习一下吧!

文 / Peggy Chi,高级研究员,Irfan Essa,高级工程师,Google研究院

译者 / Alpha

原文 /

在Google,我们正在积极探索在制作多媒体内容时,人们如何使用由机器学习和计算方法提供的创造性工具,从创作音乐、重新架构视频,到绘画等等都涉及到了这方面内容。尤其是视频制作这样一个颇具创意的过程,它可以很好地受益于这些工具,因为它需要做出一系列决策,确定哪些内容最适合目标受众,如何在视图中妥善排布现有资源,以及怎样进行时间安排能够带来最具吸引力的描述。但假如一个人能利用现有的资源,比如一个网站,来开启视频创作呢?大多数企业主办的网站都呈现了关于其产品或服务丰富的视图内容,所有这些内容都可以被重新应用到其他多媒体格式,比如视频,这可能使那些没有大量资源的人能够接触到更广泛的受众。

2020年UIST上发表的“网页端视频的自动化制作”里,我们介绍了一种基于内容所有者提供的时间和视图限制,将网页自动转换为短视频的研究原型——URL2Video。URL2Video从HTML源中提取资源(文本、图像或视频)及其设计风格(包括字体、颜色、图形布局和层次结构),并将这些可视资源组合成一系列的快照,同时保持与源页面相似的外观和感觉,然后根据用户指定的纵横比和持续时间,将这些材料重新利用,渲染成一个适合产品和服务广告的视频。

URL2Video概述

假设用户提供了一个阐述他们业务的网页URL,URL2Video会自动从页面中选择关键内容,并根据一组针对熟悉网页设计和视频广告制作的设计师的访谈研究得到的启发式算法,决定每个资源的时间和视图展示。这些如设计师般熟知的启发式算法捕获常见的视频编辑样式,包括内容层次结构,限制一个快照中的信息量及其持续时间,为品牌提供一致的颜色和样式等等。利用这些信息,URL2Video解析网页,分析内容,选择视觉突出的文本或图像,同时保留它们的设计风格,并根据用户提供的视频规范进行组合。

通过在输入的网页中提取结构内容和设计,URL2Video做出自动编辑决策,在视频中呈现关键信息。它考虑到用户定义的输出视频的时间限定(比如以秒为单位的持续时间)和空间限定(比如高宽比)。

网页分析

一个网页的URL,URL2Video会提取它的文档对象模型(DOM)信息和多媒体材料。出于研究模型的目的,我们将域限制在静态网上,这些页面包含HTML层次结构中保存的突出资源和标题,这些层次结构遵循最近的网页设计原则,鼓励使用重点的元素、更清晰的部分以及引导读者感知信息的视觉焦点顺序。URL2Video将这些视觉上可区分的元素标记到资源组的候选列表,每个元素可能包含一个标题、一个产品图象、详细描述和调用操作按钮,并捕获每个元素的原始素材(文本和多媒体文件)和详细的设计规范(HTML标签、CSS样式和呈现位置)。然后,通过根据每个资源组的视觉外观和注释,包括它们的HTML标签、呈现的尺寸还有显示在页面上的顺序对每个组进行排序。这样,在页面顶部占据较大区域的资源组将获得更高的分数。

限定型的资源选择

在制作视频时,我们考虑了两个目标:(1)每个镜头都应该提供简洁的视频信息;(2)视觉设计应该与源网页一致。基于这些目标和用户提供的视频限定条件,包括预期的视频持续时间(以秒为单位)和高宽比(通常为16:9、4:3、1:1等),URL2Video自动选择并命令资源组优化总体优先级分数。为了使内容简洁,它只显示页面中的主要元素,例如标题和一些多媒体资源。它限定了观众所感知内容的每个视觉元素的持续时间。这样,简短的视频强调了页面顶部最突出的信息,时间长一些的视频则包含了更多的商业活动或产品信息。

画面构图与视频渲染

根据基于DOM层次结构的有序资源列表,URL2Video并行依照从访谈研究中获得的设计启发,对时间和空间安排做出决策,将资源在单个镜头中展现出来。它将元素的图形布局转换为视频的纵横比,并应用了包括字体和颜色在内的样式选择。为了使视频更具动感和吸引力,它调整了资源的显示时间。最后,它将内容渲染为MPEG-4格式的视频。

用户控制

研究原型界面允许用户查看源网页提取的每个视频镜头中的设计属性,以及重新排版材料,更改细节设计,如颜色和字体,并更改限制条件来生成新的视频。

在URL2Video的创作界面(左)中,用户指定源页面输入的URL、目标页面视图的大小以及输出视频参数。URL2Video分析网页,并提取主要的视觉组件。由它组成了一系列的镜头,并将关键画面可视化为一个故事板。这些组件满足输入时间和空间限定后输出呈现为视频。用户可以播放视频,检查设计属性(右下角),并进行调整以做视频更改,例如重新排序镜头(右上)。

URL2Video用例

我们在现有的各种网页上演示了端到端的URL2Video的性能。下面我们特别展示一个实例结果,其中URL2Video将嵌入多个短视频剪接的页面转换为一个12秒的输出视频。请注意它如何在从源网页面捕获的视频中对字体和颜色选择、时间和内容排序作出自动编辑决定的。

URL2Video从我们的Google搜索介绍页面(顶部)识别关键内容,包括标题和视频资源。通过综合考虑显示流程、源设计和输出限定,URL2Video将它们转换为视频(12秒的横向视频;底部)

下面的视频作了进一步的演示:

为了评估自动生成的视频,我们与Google的设计师进行了一项用户研究。实验结果表明,URL2Video能够有效地从网页中提取设计元素,并通过引导视频创建的过程为设计师提供支持。

下一步

虽然目前的研究集中在视觉展示,但我们正在开发新的技术,以在视频编辑中支持音轨和画外音。总之,我们设想的未来是,创作者专注于做出高层决策,而机器学习模型配合其在多个平台上为最终视频的制作提供详细的时间和图形编辑建议。

致谢

我们非常感谢我们的论文合著者Zheng Sun(Research)和Katrina Panovich(YouTube)。我们还要感谢我们的同事,他们(按姓氏的字幕顺序)-JordanCanedy, Brian Curless, Nathan Frey, Madison Le, Alireza Mahdian, Justin Parra,Emily Ryan, Mogan Shieh, Sandor Szego和Weilong Yang-为URL2Video作出了贡献。我们感谢我们的领导人Tomas Izo, RahulSukthankar和Jay Yagnik的支持。

标签: #静态网页的制作过程有哪些