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

权利要求书

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

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

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

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

2.如权利要求1所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，所述基于HTML5的canvas元素进行剪辑拼接包括：

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

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

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

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

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

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

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

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

与此同时，实时更新视频播放窗口对应的视频页面，实现拼接视频。

3.如权利要求2所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，时间轨上存在视频轨，音频轨，图片轨和文字轨。

4.如权利要求2所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，最终的成品文件内容依据客户的操作如下：

如选中一个切片，则成品视频内容为当前切片。

5.如权利要求2所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，最终的成品文件内容依据客户的操作如下：

如选了两个连续的切片，则生成的一个成品视频，内容为两个切片的内容连续播放。

6.如权利要求2所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，最终的成品文件内容依据客户的操作如下：

如选了两个不连续的切片，则生成两个成品视频。

7.如权利要求4至6任一所述的在HTML5页面实现视频文件的剪辑拆条方法，其特征在于，

选中切片提交时，文件信息包括视频地址，对应的下载接口，切片的开始时间和结束时间。