本发明涉及计算机技术领域，尤其涉及一种H5页面效果生成视频文件的方法及系统。

背景技术：

现有的视频合成方法均是将视频需要合成的各个元素拆分出来，针对每个元素进行合成视频，复杂度高，一旦需要添加新的动画元素，必须符合原来定义的规范，否则不易扩展。

技术实现要素：

本发明的目的在于针对上述现有技术中的视频合成方法复杂度高，不易扩展的缺点，提出一种H5页面效果生成视频文件的方法及系统，能够有效简化合成视频的步骤，且扩展性更强。

一种H5页面效果生成视频文件的方法，包括：

客户端向服务器发送动画数据请求；

浏览器前端接收服务器返回的动画数据；

浏览器前端对所述动画数据进行预渲染视频帧，并在预渲染视频帧完成后发送预渲染完成信号至客户端；

所述客户端接收到所述预渲染完成信号后，获取预设时间内的视频帧进行渲染，并编码视频帧，编码完成后生成视频文件。

进一步地，客户端向服务器发送动画数据请求之前，还包括：

客户端接收用户发送的动画数据并发送至服务器进行存储。

进一步地，浏览器前端对所述动画数据进行预渲染视频帧，包括：

浏览器前端将每个元素的动画效果分解生成H5页面，并将每一帧绘制到浏览器。

进一步地，获取预设时间内的视频帧并进行渲染，并编码视频帧，编码完成后生成视频文件，包括：

步骤A，客户端向浏览器前端获取预设时间内的视频帧，之后执行步骤B；

步骤B，浏览器前端渲染所述预设时间内的每一帧，并在渲染完成后通知客户端，之后执行步骤C；

步骤C，客户端再从所述浏览器前端依次截取每一帧进行编码，之后执行步骤D；

步骤D，所述预设时间内的视频帧编码完成后，判断整个视频是否编码完成，如果编码完成，则执行步骤E；如果整个视频编码未完成，则执行步骤A获取下一个预设时间内的视频帧；

步骤E，将视频写入文件进行保存。

进一步地，生成视频文件之后，还包括：

将所述视频文件存储至本地相册。

一种H5页面效果生成视频文件的系统，包括客户端、服务器以及浏览器前端；

所述客户端用于向服务器发送动画数据请求；

所述浏览器前端用于收服务器返回的动画数据，并对所述动画数据进行预渲染视频帧，在预渲染视频帧完成后发送预渲染完成信号至客户端；

所述客户端还用于接收到所述预渲染完成信号后，获取预设时间内的视频帧并进行渲染，并编码视频帧，编码完成后生成视频文件。

进一步地，所述客户端还用于接收用户发送的动画数据并发送至服务器进行存储。

进一步地，所述浏览器前端还用于将每个元素的动画效果分解生成H5页面，并将每一帧绘制到浏览器。

进一步地，所述客户端还用于向浏览器前端获取预设时间内的视频帧；

所述浏览器前端还用于渲染所述预设时间内的每一帧，并在渲染完成后通知客户端；

所述客户端还用于在渲染完成后再从所述浏览器前端依次截取每一帧进行编码，所述预设时间内的视频帧编码完成后，判断整个视频是否编码完成，如果编码完成，则将视频写入文件进行保存；如果整个视频编码未完成，则再向浏览器前端获取下一个预设时间内的视频帧。

进一步地，所述客户端还用于将所述视频文件存储至本地相册。

本发明提供的H5页面效果生成视频文件的方法及系统，至少包括如下有益效果：

通过H5页面得到每一帧的内容再进行编码，在保证最终视频内容和质量和H5页面一致的情况下，极大地简化了生成视频的步骤，并且需要添加其他动画效果，在合成视频这部分不需要其他额外的工作量，扩展性更强。

附图说明

图1为本发明提供的H5页面效果生成视频文件的方法一种实施例的步骤图。

图2为本发明提供的H5页面效果生成视频文件的方法一种实施例的流程图。

图3为本发明提供的H5页面效果生成视频文件的系统一种实施例的结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

实施例一

参考图1和图2，本实施例提供一种H5页面效果生成视频文件的方法，包括：

步骤S101，客户端向服务器发送动画数据请求；

步骤S102，浏览器前端接收服务器返回的动画数据；

步骤S103，浏览器前端对所述动画数据进行预渲染视频帧，并在预渲染视频帧完成后发送预渲染完成信号至客户端；

步骤S104，所述客户端接收到所述预渲染完成信号后，获取预设时间内的视频帧进行渲染，并编码视频帧，编码完成后生成视频文件。

具体地，动画数据是由远端的一份结构化json文件定义，该份json文件是在动画编辑器内进行添加或修改而生成的。文件定义了每一个元素的类型、位置、其动画效果、视频的版本信息、编辑时间、编辑环境等，用户通过客户端上传保存动画数据，客户端接收用户发送的动画数据并发送至服务器进行存储。

当需要合成视频文件时，客户端向服务器发送动画数据请求，服务器收到该动画数据请求后向浏览器前端返回动画数据，之后对动画数据进行预渲染视频帧。

进一步地，浏览器前端对所述动画数据进行预渲染视频帧，包括：

浏览器前端将每个元素的动画效果分解生成H5页面，并将每一帧绘制到浏览器。

浏览器前端获取动画数据后，拥有所有元素的原始状态跟动画效果，浏览器前端将每个元素的动画效果分解生成一系列的H5页面，每一个H5页面即为该元素的每一帧。

进一步地，浏览器前端预渲染视频帧完成后，发送预渲染完成信号至客户端，通知客户端预渲染已经完成，客户端进行渲染视频帧。

获取预设时间内的视频帧进行渲染，并编码视频帧，编码完成后生成视频文件，包括：

步骤A，客户端向浏览器前端获取预设时间内的视频帧，之后执行步骤B；

步骤B，浏览器前端渲染所述预设时间内的每一帧，并在渲染完成后通知客户端，之后执行步骤C；

步骤C，客户端再从所述浏览器前端依次截取每一帧进行编码，之后执行步骤D；

步骤D，所述预设时间内的视频帧编码完成后，判断整个视频是否编码完成，如果编码完成，则执行步骤E；如果整个视频编码未完成，则执行步骤A获取下一个预设时间内的视频帧；

步骤E，将视频写入文件进行保存。

客户端把每个元素的同一时刻的状态渲染出来就是该视频某一帧的画面。

进一步地，生成视频文件之后，还包括：

将所述视频文件存储至本地相册。

本实施例提供的H5页面效果生成视频文件的方法，通过H5页面得到每一帧的内容再进行编码，在保证最终视频内容和质量和H5页面一致的情况下，极大地简化了生成视频的步骤，并且需要添加其他动画效果，在合成视频这部分不需要其他额外的工作量，扩展性更强。

实施例二

参考图3，本实施例提供一种H5页面效果生成视频文件的系统，包括客户端201、服务器202以及浏览器前端203；

客户端201用于向服务器202发送动画数据请求；

浏览器前端203用于收服务器202返回的动画数据，并对所述动画数据进行预渲染视频帧，在预渲染视频帧完成后发送预渲染完成信号至客户端201；

客户端201还用于接收到预渲染完成信号后，获取预设时间内的视频帧进行渲染，并编码视频帧，编码完成后生成视频文件。

进一步地，客户端201还用于接收用户发送的动画数据并发送至服务器进行存储。

进一步地，浏览器前端203还用于将每个元素的动画效果分解生成H5页面，并将H5页面的每一帧绘制到浏览器。

进一步地，客户端201还用于向浏览器前端获取预设时间内的视频帧；

浏览器前端203还用于渲染所述预设时间内的每一帧，并在渲染完成后通知客户端；

客户端201还用于在渲染完成后再从所述浏览器前端依次截取每一帧进行编码，所述预设时间内的视频帧编码完成后，判断整个视频是否编码完成，如果编码完成，则将视频写入文件进行保存；如果整个视频编码未完成，则再向浏览器前端获取下一个预设时间内的视频帧。

进一步地，客户端201还用于将所述视频文件存储至本地相册。

具体工作原理请参考实施例一，在此不再赘述。

本实施例提供的H5页面效果生成视频文件的系统，通过H5页面得到每一帧的内容再进行编码，在保证最终视频内容和质量和H5页面一致的情况下，极大地简化了生成视频的步骤，并且需要添加其他动画效果，在合成视频这部分不需要其他额外的工作量，扩展性更强。

应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本发明所附权利要求的保护范围。