前言

在这里，先吐槽一下，最近一直很忙，就要过年了，公司项目赶得要命，吃不好，睡不好，周末都没得休息（写到这里就憋着一肚火了）。不过，付出还是有回报的，在团队的合作努力下，项目还是在过年前完成了，最近也一直在优化和测试，总体上是轻松了很多。我在这里纯碎吐槽，其实也从侧面反映出了作为程序员，工程师的工作的加班，不确定的情况，真的，有时觉得自己这样子整天为了项目，加班加的厉害，好像是自己的生活除了工作，就没有其他的吗？牺牲陪家人的时间，牺牲了很多很多，回报却不一定成正比。越说越伤心，还是别说算了吧，体验过才懂！说回正题

基于web的在线视频编辑的设计

我在这里首先说明一下，本设计只涉及到逻辑设计和关键的技术，具体的实现方法，语言就得运用自己的特长去解决了。

场景：

（1）比如我用手机录播一段很长的MP4格式的视频，我想剪切其中的几段，然后在合并成一个新的视频。如果按照传统的方法，我们肯定的要用专业的视频编辑软件，但很遗憾，专业的视频编辑软件只针对专业的人员，怎么做到傻瓜式操作，就可以完成，这才是很重要的。

（2）再比如我现在流行的教育视频云平台，随着互联网+,和云存储技术的日益成熟，现在很多的学校都会讲都开始建立自己的教学视频资源云平台，将老师上课的资源通过自动录播的嵌入式系统录播并存储在服务器上，教师可以根据自己上课的优秀的视频进行裁剪，或者将几段很精彩的视频进行合并成一个新的视频，整个过程，教师不需要任何下载视频，再通过专业的视频软件编辑，然后再上传，这种操作是越来越不符合体验了。如果能够再到，教师登录视频云存储视频平台，选择需要剪切或者合并的视频，直接合并，在这个过程，几分钟的过程就可以完成了。这是一个很好的应用场景，当然整个视频云平台这也是一个很庞大的系统，也是我们正在开发的项目，视频编辑只是其中的一部分。其实，应用的场景还有很多很多。。。。

架构：

（1）首先要实现web式，那肯定的基于B/S端式的架构。要对视频进行编辑，首先的可以播放，看这个视频，所以前端的架构，我们就得有一个web播放器。其实像优酷，爱奇艺这种web在线播放，是基于flash的，大过因为html5的标准已定稿，很多的浏览器厂商的浏览器都已经是支持html5的video标签的，但是如果我们自己来基于video重新开发一个有着强大功能的播放器的话，那肯定是很有难度的，所以我会选择一些开源的甚至是兼容flash和html5的播放器。这种播放器很多，在这里我选择一款我比较熟悉，大家公认比较好的播放器，叫flowplayer。大家可以在百度上查找资料，到官网上查看指导手册（这个是必须的）。

（2）播放视频，用什么协议播放呢？传统的视频播放还是基于http协议，就是讲视频先下载完，在播放。这种体验肯定不行的。目前比较流行的都是基于流式播放的，一般用的协议rtmp，和hls。其中rtmp是实时流播放，也就是我们所说的一边看，一般下载或者缓存，这个协议的流媒体服务器也有很多（这里可以查看http://www.oschina.net/project/tag/111/streaming）。hls是苹果公司提出来的，就是将一段长的视频，剪切成一小段一小段播放，最终播放呢，还是基于http协议，只不过视频只是很小的一段一段，可以做到实时播放，服务器端也是需要一个Hls的流媒体服务器支持，其实一般会选择开源的，比如nginx自带的模块，或者是国内开源的srs(

全称：Simple-RTMP-Serve,github地址：https://github.com/ossrs/srs)，具体的技术自己了解。

（3）服务端用什么技术对视频进行剪切或者合并处理？其实很多的在多媒体处理方面，应该用的更多的都是用ffmpeg实现对视频的处理，FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多codec都是从头开发的。

开发语言

WEB的开发有很多的语言可以，javaweb,php,jsp,.net，甚至node.js等都可以实现，目前来说比较流行的是php，项目开发中选择php。

关键技术

首先有以下几个问题

（1）视频怎么才可以用rtmp协议播放？

（2）在剪切视频时，如何获取视频的拖曳的任意时间，将要剪切的这一段视频开始时间和结束时间获取？

（3）后台的ffmpeg如何用命令行剪切？

（4）后台的ffmpeg如何将视频合并.？

第一个问题：

首先，用flowplayer作为播放器，具体的用法和配置，开发手册在官网上有具体的说明（官网https://www.flowplayer.org，这是必须的）。其次要用到rtmp协议，肯定得要在服务端安装流媒体服务器，我们可以用nginx的rtmp模块，具体的安装，配置也只能自己查询资料。在这里几句话，肯定说不清楚，这里现在只能只注重方法。这两个方面，肯定的花点时间去了解学习的。

第二个问题

flowplayer有一个视频的对象video，包含很多关于这一个视频的信息。下面是我在官网截得一张图

这些都是在播放一个视频时，视频自身的属性。所以可以在javascript里直接获取到视频的总时长

<pre name="code" class="html"><script>// 总时长var duration=flowplayer().video.duration;
</script>

鼠标拖曳播放条，点击获取任意时间点，这个需要获取到当前的时间

<script>// 总时长var current=flowplayer().video.time;
</script>

当鼠标在播放器的播放条上移动时，可以显示当前的时间的话，这个可以利用比例来完成

 var ratio = flowplayer(0).video.height / flowplayer(0).video.width;var duration=flowplayer(0).video.duration;var timelineOffset = $(this).offset();var x = ev.pageX || ev.clientX;
var time = Math.round(duration * ((x - timelineOffset.left) / $('.fp-timeline').width()),10);

其实flowplayer还有很多的API,还是那句老话，一定的自己去认真了解学习。

第三个问题

ffmpeg的命令行实现剪切

ffmpeg -i input -y -ss starttime -t lasttime -s -y -vcodec copy -acodec copy output

例如 "ffmpeg -i "/home/usr/local/video/test.mp4" -ss 00:01:35 -t 00:10:00 -y -vcodec copy -acodec copy "/home/usr/local/video/cut.mp4"

ffmpeg的具体的参数也很多，这里也不多说了，可以认真看看ffmpeg的官网。

第四个问题

ffmpeg如何合并视频，注意一点。在这里合并视频的所有的视频片段的格式，分辨率，码率都得是一样的，否则视频很棒失败，因为中间我们省去一个转码的过程，如果要转码成统一的格式，对服务器的开销很大，但还是可以实现的，这涉及的知识就更多了，这里的合并之针对相同的格式，分辨率的视频的合并。

合并要用到文档流的方式

建立一个文档，比如bind.txt ,位置/home/usr/local/bind.txt, 里面内容，一个file，占用一行

file "videoPath"
file "videPath"例如 file “/home/usr/local/video/test1.mp4”file ”/home/usr/local/video/test2.mp4“file ”/home/usr/local/video/test2.mp4“

ffmpeg的命令

ffmpeg -f concat -i "/home/usr/local/bind.txt" -c copy "/home/usr/local/video/bind.mp4";

其实，这只是一个很简单的说明了解吧，真正开发起来，设计的逻辑业务设计很多，比如视频的名称或者其他的信息存在mysql里，JQUERY,css等。php后台调用ffmpeg命令等等。整一个视频编辑模块真的很大很复杂。

拓展

其实，在这基础上，还可以围绕flowplayer这个播放器开发出很多的功能，比如视频打点，视频索引，视频缩列图预览等等。这些功能都已经开发出来，知识就是不断地积累和创新。

直接上几张大图。

剪切图

合并图

视频打点和索引

基于web的在线视频编辑的设计相关推荐

基于web的在线考试系统的设计与开发
欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye2 在线考试系统的设计与开发目录 TOC 1-3 第一章绪论 1 1.1在线考试系统的研究背景 ...
基于SSM的在线视频网站的设计与实现
目录 1 绪论 1 1.1 项目背景 1 1.2 项目研究目的和意义 1 1.3 国内外研究现状 2 1.3.1国内研究现状 2 1.3.2国外研究现状 2 1.4 论文工作内容以及结构安排 3 1 ...
web视频剪辑在线视频编辑开发类似：VE视频引擎美摄sdk VESDK 蓝松短视频SDK 筷子saas剪辑系统源码
在线视频编辑剪辑系统源码可以批量视频制作包括ae特效制作**(支持所有AE底层能力)** web视频剪辑在线视频编辑 VE视频引擎美摄sdk VE SDK 蓝松短视频SDK 剪辑系统源码看 ...
web多媒体技术在视频编辑场景的应用
大家上午好,很高兴来到咱们腾讯LIVE开发者大会.我今天分享的web多媒体技术在视频编辑场景的应用是个非常有意思的主题,希望大家能有所收获. 首先介绍下自己,我是袁运辉,2010年就加入了腾讯,目前主 ...
基于SSM的在线教育系统的设计与实现【附源码】
基于SSM的在线教育系统的设计与实现需求规格说明书 Version: 1.0.0 目录项目承担部门: HELLOWORLD! 1 撰写人(签名): 陈徐锋 1 引言 1 1.1 目 ...
基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现发布时间:2019-11-18所属分类:科技论文浏览:1次摘要: 摘要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
springboot基于web的摩托车销售系统的设计与实现毕业设计源码031706
基于web的摩托车销售系统的设计与实现摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
计算机毕业设计springboot基于web的数码产品应用平台设计与实现
最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品 CSDN不经常在线,有时间看到机会给您发 [1] springboot基于web的数码产品应用平台设计与实现 [2] ssm漠河旅游官网 ...
springboot基于web的酒店预订系统的设计与实现源码
项目名称 springboot基于web的酒店预订系统的设计与实现源码视频效果 https://www.bilibili.com/video/BV1k34y1W7Lq/ 基于web的酒店预订系统的设 ...

基于web的在线视频编辑的设计

全称：Simple-RTMP-Serve,github地址：https://github.com/ossrs/srs)，具体的技术自己了解。

基于web的在线视频编辑的设计相关推荐

最新文章

热门文章