在HTML5页面实现视频文件的剪辑拆条方法与流程

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

背景技术：

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、一种可能的实施方式中，时间轨上存在视频轨，音频轨，图片轨和文字轨。

18、一种可能的实施方式中，最终的成品文件内容依据客户的操作如下：

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

20、一种可能的实施方式中，最终的成品文件内容依据客户的操作如下：

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

22、一种可能的实施方式中，最终的成品文件内容依据客户的操作如下：

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

24、一种可能的实施方式中，选中切片提交时，文件信息包括视频地址，对应的下载接口，切片的开始时间和结束时间。

25、采用本发明具有如下的有益效果：实现对用户上传的文件，通过web端的剪辑系统，直接打开网页，进行快速的剪辑，操作简单，兼容性强。实现了随时随地剪辑，快速转码发布，方便操作人员的使用，提高生产效率。

技术特征：

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

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

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

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

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

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

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

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

技术研发人员：梁一佳,纪亭,吴奕刚,孙伟涛,孙彦龙
受保护的技术使用者：杭州当虹科技股份有限公司
技术研发日：
技术公布日：2024/1/12