CN106210451A - 一种基于html5的多轨道视频编辑的方法及系统 - Google Patents
一种基于html5的多轨道视频编辑的方法及系统 Download PDFInfo
- Publication number
- CN106210451A CN106210451A CN201610622888.1A CN201610622888A CN106210451A CN 106210451 A CN106210451 A CN 106210451A CN 201610622888 A CN201610622888 A CN 201610622888A CN 106210451 A CN106210451 A CN 106210451A
- Authority
- CN
- China
- Prior art keywords
- video
- editing
- html5
- editor
- good effect
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N5/00—Details of television systems
- H04N5/222—Studio circuitry; Studio devices; Studio equipment
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N5/00—Details of television systems
- H04N5/222—Studio circuitry; Studio devices; Studio equipment
- H04N5/262—Studio circuits, e.g. for mixing, switching-over, change of character of image, other special effects ; Cameras specially adapted for the electronic generation of special effects
Abstract
本发明公开了一种基于html5的多轨道视频编辑的方法及系统，该方法包括如下步骤：用户在资源管理库中编辑素材或存储已经编辑完成的视频文件，并从资源管理库中提取视频原始素材或编辑之后存档的视频素材，通过特效模板添加特效功能，同时利用B/S网络结构模式，使节目制作人员使用浏览器便能通过网络编辑视频文件，并实时同步播放视频。本发明将一些必要的视频编辑功能与Html5技术相结合，包括资源管理库、特效模板、视频播放器和可视化编辑模块，适用于快速编辑和配置较低的电脑，具有使用轻便高效、跨平台、跨浏览器的特点。
Description
技术领域
本发明涉及视频编辑技术领域，具体是一种基于html5的多轨道视频编辑的方法及系统。
背景技术
在广电领域，非编是电视节目编辑人员必不可少的编辑工具，非编由于其数字化的记录方式，强大的兼容性，方便的视频剪辑、特效编辑方式，相对较少的投资等特点，已被业内广泛认可。然而，目前的非编软件还存在着以下的不足：
1、对电脑配置要求较高
多数非编软件要求电脑需要64位操作系统，内存至少8G或更大内存；1G或更大的显存，相对便宜的电脑很难以达到这样高的要求，运行软件将会非常缓慢，尤其是在编辑高码文件时，时常出现卡死的现象。
2、软件出问题时非常不便
由于非编软件较庞大，一旦是软件出现问题须重装时，既需要重新下载庞大的软件安装包，又需要重新配置环境，这样需要耗费大量的人力和时间，对软件的使用带来不必要的麻烦。
3、冗余功能影响效率
对于一些实时性较强的新闻类节目，或一些不需要过度加工的节目而言，很多功能并不需要，然而软件本身自带的功能较多，较为庞大以至于偶尔会出现死机的情况，影响使用。
为了解决上述问题，提高节目制作的效率，我们研究了一种基于Html5的多轨道视频编辑的方法。
发明内容
本发明的目的在于克服现有技术的不足，提供一种基于html5的多轨道视频编辑的方法及系统。具有使用轻便高效、跨平台、跨浏览器、对环境配置要求相对较低的特点，最终达到编低码出高码的效果。
本发明的目的是通过以下技术方案来实现的：一种基于html5的多轨道视频编辑的方法，包括以下步骤：
步骤S1：在本地支持html5的浏览器中利用http协议，将文件从服务器中下载到本地web浏览器中；
步骤S2：在时间线上裁剪和截取视频段，利用图像处理的算法进行进一步加工；
步骤S3：当视频播放的时候，实时捕获每一帧的画面，在编辑窗口做相应的特效编辑，同时，将加入的图片挂件及艺术字进行修改编辑；
步骤S4：将制作之后的低码文件传入后台处理服务器进行进一步后台制作；
步骤S5：后台处理服务器将制作好的视频重新回传至数据库服务器中。
所述步骤S1中所述将文件下载方式为拖曳，直接在网页上进行视频编辑。
所述步骤S2中所述视频裁剪和截取，在时间线上实现实时定位采用手动操作进行粗略定位或使用时码精确到定位帧编辑点；各段素材的相互位置能够随意调整，在编辑过程中，能够在任何时候删除节目中的某一轨或多轨镜头，或者向节目中的任一位置插入一段素材，能够实现磁带编辑中常用的插入和组合编辑，在剪辑多机拍摄的多轨素材或同一场景多次拍摄的素材时，在编辑系统中采用软切换的方法将多段视频整合到一条视频中，以此模拟切换台的功能，切点可根据节目要求任意设定。
所述步骤S3中所述特效编辑，利用canvas技术模块进行特效编辑，利用CSS3技术对图片挂件、艺术字字体、字号进行修改编辑。
所述步骤S4中所述低码文件传入后台服务器处理，先利用像素较低的素材进行初步编辑，生成json文件，然后后台服务器用高质量的素材替换对应的低质量素材，再对节目进行正式合成。
一种基于html5的多轨道视频编辑系统，包括如下模块：资源管理库、特效模板、视频播放器和可视化编辑模块，资源管理库提供视频原始素材或编辑之后存档的视频素材，特效模板添加特效功能，通过视频播放器和可视化编辑模块实时播放正在编辑的视频。
本发明的有益效果是：使节目制作人员只要有浏览器便能通过网络编辑视频文件，具有使用轻便高效、跨平台、跨浏览器、对环境配置要求相对较低的特点，并且达到了编低码出高码的效果。
附图说明
图1为本发明一种基于html5的多轨道视频编辑的方法流程图；
图2为本发明一种基于html5的多轨道视频编辑的系统框图；
图3为本发明数据流程图。
具体实施方式
下面结合附图进一步详细描述本发明的技术方案，但本发明的保护范围不局限于以下所述。
如图1所示，一种基于html5的多轨道视频编辑的方法，包括如下步骤：
步骤S1：在本地支持html5的浏览器中利用http协议，将文件从服务器中下载到本地web浏览器中；
步骤S2：在时间线上裁剪和截取视频段，利用图像处理的算法进行进一步加工；
步骤S3：当视频播放的时候，实时捕获每一帧的画面，在编辑窗口做相应的特效编辑，同时，将加入的图片挂件及艺术字进行修改编辑；
步骤S4：将制作之后的低码文件传入后台处理服务器进行进一步后台制作；
步骤S5：后台处理服务器将制作好的视频重新回传至数据库服务器中。
所述步骤S1中所述将文件下载方式为拖曳，直接在网页上进行视频编辑。
所述步骤S2中所述视频裁剪和截取，在时间线上实现实时定位采用手动操作进行粗略定位或使用时码精确到定位帧编辑点，不需要像磁带编辑系统那样花费大量时间卷带搜索，大大地提高了编辑效率；各段素材的相互位置能够随意调整，在编辑过程中，能够在任何时候删除节目中的某一轨或多轨镜头，或者向节目中的任一位置插入一段素材，能够实现磁带编辑中常用的插入和组合编辑，在剪辑多机拍摄的多轨素材或同一场景多次拍摄的素材时，在编辑系统中采用剪切拼接等软切换的方法将多段视频整合到一条视频中，以此模拟切换台的功能，切点可根据节目要求任意设定。
所述步骤S3中所述特效编辑，利用canvas技术模块进行特效编辑，利用CSS3技术对图片挂件、艺术字字体、字号进行修改编辑。
所述步骤S4中先在本机利用像素较低的素材进行草编，生成json文件，然后在后台服务器用高质量的素材替换对应的低质量素材，再对节目进行正式合成。这样既保证了处理速度也保证了输出视频文件的清晰度。
如图2所示，一种基于html5的多轨道视频编辑系统，包括资源管理库、特效模板、视频播放器和可视化编辑模块，用户在资源管理库中编辑素材或存储已经编辑完成的视频文件，并从资源管理库中提取视频原始素材或编辑之后存档的视频素材，通过特效模板添加特效功能，同时利用B/S网络结构模式，将视频传入到Web服务器、后台处理服务器和数据库服务器进行进一步处理，使节目制作人员使用浏览器便能通过网络编辑视频文件，实时同步播放视频，将编辑完成的视频在后台服务器利用图像处理算法进一步处理，再回传到数据库服务器。
如图3所示，用户利用Web浏览器向Web服务器发出Http请求，Web服务器向数据库服务器发送SQL请求，同时数据库服务器回传数据到Web服务器，Web服务器再通过Http协议回传到Web浏览器，实现在线视频编辑，将初步编辑完成视频采用Http协议传入后台处理服务器进一步处理。
Claims (6)
1.一种基于html5的多轨道视频编辑的方法，其特征在于，包括步骤：
S1：在本地支持html5的浏览器中利用http协议，将文件从服务器中下载到本地web浏览器中；
S2：在时间线上裁剪和截取视频段，利用图像处理的算法进行进一步加工；
S3：当视频播放的时候，实时捕获每一帧的画面，在编辑窗口做相应的特效编辑，同时，将加入的图片挂件及艺术字进行修改编辑；
S4：将制作之后的低码文件传入后台处理服务器进行进一步后台制作；
S5：后台处理服务器将制作好的视频重新回传至数据库服务器中。
2.如权利要求1所述的一种基于html5的多轨道视频编辑的方法，其特征在于，步骤S1中所述文件下载方式为拖曳，直接在网页上进行视频编辑。
3.如权利要求1所述的一种基于html5的多轨道视频编辑的方法，其特征在于，步骤S2中所述视频裁剪和截取，在时间线上实现实时定位采用手动操作进行粗略定位或使用时码精确到定位帧编辑点；各段素材的相互位置能够随意调整,在编辑过程中，能够在任何时候删除节目中的某一轨或多轨镜头，或者向节目中的任一位置插入一段素材，能够实现磁带编辑中常用的插入和组合编辑,在剪辑多机拍摄的多轨素材或同一场景多次拍摄的素材时，在编辑系统中采用软切换的方法将多段视频整合到一条视频中，以此模拟切换台的功能，切点可根据节目要求任意设定。
4.如权利要求1所述的一种基于html5的多轨道视频编辑的方法，其特征在于，步骤S3中所述特效编辑，利用canvas技术模块进行特效编辑，利用CSS3技术对图片挂件、艺术字字体、字号进行修改编辑。
5.如权利要求1所述的一种基于html5的多轨道视频编辑的方法，其特征在于，步骤S4中所述低码文件传入后台服务器处理，先利用像素较低的素材进行初步编辑，生成json文件，然后后台服务器用高质量的素材替换对应的低质量素材，再对节目进行正式合成。
6.一种基于html5的多轨道视频编辑系统，其特征在于，包括如下模块：资源管理库、特效模板、视频播放器和可视化编辑模块，资源管理库提供视频原始素材或编辑之后存档的视频素材，特效模板添加特效功能，通过视频播放器和可视化编辑模块实时播放正在编辑的视频。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610622888.1A CN106210451A (zh) | 2016-08-02 | 2016-08-02 | 一种基于html5的多轨道视频编辑的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610622888.1A CN106210451A (zh) | 2016-08-02 | 2016-08-02 | 一种基于html5的多轨道视频编辑的方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106210451A true CN106210451A (zh) | 2016-12-07 |
Family
ID=57497510
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610622888.1A Pending CN106210451A (zh) | 2016-08-02 | 2016-08-02 | 一种基于html5的多轨道视频编辑的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106210451A (zh) |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106534973A (zh) * | 2016-12-15 | 2017-03-22 | 有米科技股份有限公司 | 一种基于移动web平台上自动播放视频图像的方法 |
| CN106713881A (zh) * | 2016-12-23 | 2017-05-24 | 维沃移动通信有限公司 | 一种投影方法和移动终端 |
| CN107895394A (zh) * | 2017-11-17 | 2018-04-10 | 中国平安财产保险股份有限公司 | 动画特效实现方法、装置、终端设备及存储介质 |
| CN110691276A (zh) * | 2019-11-06 | 2020-01-14 | 北京字节跳动网络技术有限公司 | 多媒体片段拼接的方法、装置、移动终端及存储介质 |
| US10631047B1 (en) | 2019-03-29 | 2020-04-21 | Pond5 Inc. | Online video editor |
| CN112381907A (zh) * | 2020-11-12 | 2021-02-19 | 上海哔哩哔哩科技有限公司 | 多媒体轨道绘制方法和系统 |
| CN112995536A (zh) * | 2021-02-04 | 2021-06-18 | 上海哔哩哔哩科技有限公司 | 视频合成方法及系统 |
| CN112995760A (zh) * | 2019-12-18 | 2021-06-18 | 腾讯科技（深圳）有限公司 | 视频处理方法、装置、设备及计算机存储介质 |
| CN112995134A (zh) * | 2021-02-03 | 2021-06-18 | 中南大学 | 一种三维视频流媒体传输方法与可视化方法 |
| CN113099287A (zh) * | 2021-03-31 | 2021-07-09 | 上海哔哩哔哩科技有限公司 | 视频制作方法及装置 |
| CN113343146A (zh) * | 2021-06-02 | 2021-09-03 | 杭州思斐迩科技有限公司 | 一种基于h5的素材编辑方法和系统 |
| CN113556610A (zh) * | 2021-07-06 | 2021-10-26 | 广州方硅信息技术有限公司 | 视频合成控制方法及其装置、设备与介质 |
| CN114040250A (zh) * | 2022-01-10 | 2022-02-11 | 深圳市麦谷科技有限公司 | 一种视频截帧方法、装置、电子设备及介质 |
| CN114697710A (zh) * | 2022-04-22 | 2022-07-01 | 卡莱特云科技股份有限公司 | 基于服务器的素材预览方法、装置、系统、设备及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102881308A (zh) * | 2011-06-27 | 2013-01-16 | 索尼公司 | 编辑设备、编辑方法和程序 |
| CN103517158A (zh) * | 2012-06-25 | 2014-01-15 | 华为技术有限公司 | 一种生成可展示视频批注的视频的方法、装置及系统 |
| CN103745736A (zh) * | 2013-12-27 | 2014-04-23 | 宇龙计算机通信科技(深圳)有限公司 | 视频编辑的方法及其移动终端 |
| CN104394477A (zh) * | 2014-12-08 | 2015-03-04 | 段然 | 一种实现视频在线视频编辑的方法 |
| CN105376502A (zh) * | 2015-11-23 | 2016-03-02 | 华中师范大学 | 一种全媒体在线编辑工具 |
-
2016
- 2016-08-02 CN CN201610622888.1A patent/CN106210451A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102881308A (zh) * | 2011-06-27 | 2013-01-16 | 索尼公司 | 编辑设备、编辑方法和程序 |
| CN103517158A (zh) * | 2012-06-25 | 2014-01-15 | 华为技术有限公司 | 一种生成可展示视频批注的视频的方法、装置及系统 |
| CN103745736A (zh) * | 2013-12-27 | 2014-04-23 | 宇龙计算机通信科技(深圳)有限公司 | 视频编辑的方法及其移动终端 |
| CN104394477A (zh) * | 2014-12-08 | 2015-03-04 | 段然 | 一种实现视频在线视频编辑的方法 |
| CN105376502A (zh) * | 2015-11-23 | 2016-03-02 | 华中师范大学 | 一种全媒体在线编辑工具 |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106534973A (zh) * | 2016-12-15 | 2017-03-22 | 有米科技股份有限公司 | 一种基于移动web平台上自动播放视频图像的方法 |
| CN106713881A (zh) * | 2016-12-23 | 2017-05-24 | 维沃移动通信有限公司 | 一种投影方法和移动终端 |
| CN107895394A (zh) * | 2017-11-17 | 2018-04-10 | 中国平安财产保险股份有限公司 | 动画特效实现方法、装置、终端设备及存储介质 |
| CN107895394B (zh) * | 2017-11-17 | 2021-03-30 | 中国平安财产保险股份有限公司 | 动画特效实现方法、装置、终端设备及存储介质 |
| US10631047B1 (en) | 2019-03-29 | 2020-04-21 | Pond5 Inc. | Online video editor |
| US11095938B2 (en) | 2019-03-29 | 2021-08-17 | Pond5 Inc. | Online video editor |
| CN110691276A (zh) * | 2019-11-06 | 2020-01-14 | 北京字节跳动网络技术有限公司 | 多媒体片段拼接的方法、装置、移动终端及存储介质 |
| CN110691276B (zh) * | 2019-11-06 | 2022-03-18 | 北京字节跳动网络技术有限公司 | 多媒体片段拼接的方法、装置、移动终端及存储介质 |
| CN112995760A (zh) * | 2019-12-18 | 2021-06-18 | 腾讯科技（深圳）有限公司 | 视频处理方法、装置、设备及计算机存储介质 |
| CN112995760B (zh) * | 2019-12-18 | 2022-06-28 | 腾讯科技（深圳）有限公司 | 视频处理方法、装置、设备及计算机存储介质 |
| CN112381907A (zh) * | 2020-11-12 | 2021-02-19 | 上海哔哩哔哩科技有限公司 | 多媒体轨道绘制方法和系统 |
| CN112995134A (zh) * | 2021-02-03 | 2021-06-18 | 中南大学 | 一种三维视频流媒体传输方法与可视化方法 |
| CN112995536A (zh) * | 2021-02-04 | 2021-06-18 | 上海哔哩哔哩科技有限公司 | 视频合成方法及系统 |
| CN113099287A (zh) * | 2021-03-31 | 2021-07-09 | 上海哔哩哔哩科技有限公司 | 视频制作方法及装置 |
| CN113343146A (zh) * | 2021-06-02 | 2021-09-03 | 杭州思斐迩科技有限公司 | 一种基于h5的素材编辑方法和系统 |
| CN113556610A (zh) * | 2021-07-06 | 2021-10-26 | 广州方硅信息技术有限公司 | 视频合成控制方法及其装置、设备与介质 |
| CN114040250A (zh) * | 2022-01-10 | 2022-02-11 | 深圳市麦谷科技有限公司 | 一种视频截帧方法、装置、电子设备及介质 |
| CN114697710A (zh) * | 2022-04-22 | 2022-07-01 | 卡莱特云科技股份有限公司 | 基于服务器的素材预览方法、装置、系统、设备及介质 |
| CN114697710B (zh) * | 2022-04-22 | 2023-08-18 | 卡莱特云科技股份有限公司 | 基于服务器的素材预览方法、装置、系统、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106210451A (zh) | 一种基于html5的多轨道视频编辑的方法及系统 | |
| CN109889882B (zh) | 一种视频剪辑合成方法和系统 | |
| US11741328B2 (en) | Dynamic embedding of machine-readable codes within video and digital media | |
| CN1997153B (zh) | 一种计算机的多视频播放方法及装置 | |
| CN107770626A (zh) | 视频素材的处理方法、视频合成方法、装置及存储介质 | |
| CN104090979A (zh) | 一种网页编辑方法及装置 | |
| CN104394324A (zh) | 特效视频生成方法及装置 | |
| WO2021114708A1 (zh) | 多人视频直播业务实现方法、装置、计算机设备 | |
| CN105163156B (zh) | 视频续播方法、播放设备及系统 | |
| CN116647628A (zh) | 存在网络延迟的环境中的远程基于云的视频制作系统 | |
| CN106331645A (zh) | 利用虚拟镜头实现vr全景视频后期编辑的方法和系统 | |
| CN105069827A (zh) | 一种采用三维模型处理视频转场的方法 | |
| CN110996150A (zh) | 视频融合方法、电子设备及存储介质 | |
| CN113473207A (zh) | 直播方法、装置、存储介质及电子设备 | |
| CA3001480A1 (en) | Video-production system with dve feature | |
| CN106327548A (zh) | 在图像上进行标记的方法及系统 | |
| CN101472085A (zh) | 一种竖向编辑轨道布局的新闻制作方法 | |
| CN102510445B (zh) | 节目源智能信息制作系统及制作方法 | |
| CN114222149A (zh) | 一种推流方法、装置、介质及计算机设备 | |
| CN107888890A (zh) | 一种基于在线合成的场景包装装置及方法 | |
| Pal et al. | Interactive montages of sprites for indexing and summarizing security video | |
| CN106060518A (zh) | 具备视角切换功能的720度全景播放器的实现方法及系统 | |
| CN101188682A (zh) | 一种文稿撰写系统 | |
| CN102547480A (zh) | 交互式视频广告平台的实现方法 | |
| CN102572302B (zh) | 关键帧曲线在修改素材出入点后的多种处理方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20161207 |
|
| RJ01 | Rejection of invention patent application after publication |