基于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这个播放器开发出很多的功能，比如视频打点，视频索引，视频缩列图预览等等。这些功能都已经开发出来，知识就是不断地积累和创新。
直接上几张大图。
剪切图
合并图
视频打点和索引
转自http://blog.csdn.net/u012979009/article/details/50585858
扫一扫
4803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
