[发明专利]在HTML5页面实现视频文件的剪辑拆条方法

说明书

本发明公开了一种在HTML5页面实现视频文件的剪辑拆条方法，包括以下步骤：设置在Web端的剪辑模块通过http接口请求部署在Centos的快速内容生产模块的视频素材；快速内容生产模块上传用户需要剪辑的素材；Web端的剪辑模块请求快速内容生产模块得到视频的地址对应的视频流，使用html的video标签在Web端播放，采用基于HTML5的canvas元素进行剪辑拼接；剪辑完再将剪辑信息传给快速内容生产模块；由快速内容生产模块调用http接口请求转码模块进行转码；转码模块根据在Web端剪辑模块的操作结果，提交视频进行转码，输出用户在Web端剪辑过后的成品文件。本发明用于提供一种快速剪辑视频，随地随拆，不局限于自己主机的快速内容生产系统。

技术领域

本发明属于视频剪辑技术领域，具体涉及一种在HTML5页面实现视频文件的剪辑拆条方法。

背景技术

随着短视频应用的发展，大众对视频剪辑的需求越来越多。现有技术中，用户剪辑视频通常都需要下载安装专用的客户端才能对视频进行裁剪，安装麻烦并且占用空间。更换终端之后又得重新下载安装，无法进行快速剪辑。

发明内容

鉴于以上存在的问题，本发明提供一种在HTML5页面实现视频文件的剪辑拆条方法，用于提供一种快速剪辑视频，随地随拆，不局限于自己主机的快速内容生产系统。

为解决上述技术问题，本发明采用如下的技术方案：

一种在HTML5页面实现视频文件的剪辑拆条方法，包括以下步骤：

设置在Web端的剪辑模块通过http接口请求部署在Centos的快速内容生产模块的视频素材；快速内容生产模块上传用户需要剪辑的素材；

Web端的剪辑模块请求快速内容生产模块得到视频的地址对应的视频流，使用html的video标签在Web端播放，采用基于HTML5的canvas元素进行剪辑拼接；剪辑完再将剪辑信息传给快速内容生产模块；

由快速内容生产模块调用http接口请求转码模块进行转码；转码模块根据在Web端剪辑模块的操作结果，提交视频进行转码，输出用户在Web端剪辑过后的成品文件。

一种可能的实施方式中，所述基于HTML5的canvas元素进行剪辑拼接包括：

剪辑基于canvas实现视频的拼接，将每个视频对应的文件流地址存到video标签中，在canvas中加载；

Web端向快速内容生产模块请求接口得到文件列表，列表中记录每个文件对应的文件地址，在Web剪辑页面中将地址作为参数填入到文件下载的接口；

用户拖动文件到时间轨上，将对应的文件信息封装在一个信息类中，同时将对应的下载接口封装在公共类库的media对象中，再将media对应存入全局的video数组中；

与此同时，页面设置两个canvas和两个实时刷新的定时器，定时器的间隔时间为0.0001s-0.0003s，其中一个canvas用于绘制时间轨，另一个canvas用于绘制视频的播放窗口；

记录鼠标在时间轨上点击的位置，全局的记录光标所在的位置；

通过事先定义的长度与时间的比例计算，实时更新时间轨的光标，将video数组中的视频对象以绘制的方式在时间轨上绘制切片，起始点为拖曳下来的光标点，终点为起始点加时长对应的点；

根据光标所在的位置，得到对应的视频对象，将对应的路径作为参数，生成HTML5的video标签，用canvas绘制，在播放窗口展示对应的视频，公共类库的media类还提供了设置当前时间的方法，通过全局的光标与切片的开始点计算出当前的播放时间，media类设置该播放时间后即可跳转到时间对应的画面；

点击播放按钮时，平移时间轨上的光标，全局记录对应的时间；