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

基于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)，具体的技术自己了解。

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

[html]  view plain  copy  print ?

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

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

[html]  view plain  copy  print ?

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

[html]  view plain  copy  print ?

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

[html]  view plain  copy  print ?

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

[html]  view plain  copy  print ?

1. 例如 "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，占用一行

[html]  view plain  copy  print ?

1. file "videoPath"  
2. file "videPath"  
3.   
4. 例如 file “/home/usr/local/video/test1.mp4”  
5.      file ”/home/usr/local/video/test2.mp4“  
6.      file ”/home/usr/local/video/test2.mp4“  

ffmpeg的命令

[html]  view plain  copy  print ?

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

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

拓展

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

直接上几张大图。

                                                                                                                                         剪切图

                                                                                                                            合并图

视频打点和索引

转自http://blog.csdn.net/u012979009/article/details/50585858