最简单的视频网站(JavaEE+FFmpeg)

本文记录一个最简单的视频网站系统。此前做过一些基于JavaEE中的 SSH (Strut2 + Spring + Hibernate)的网站系统,但是一直没有做过一个视频网站系统,所以就打算做一个“精简”的视频网站系统,以方便以后测试以及学习使用。本视频网站支持直播(通过RTMP实现)和点播(通过HTTP实现)。为了保持精简,这个视频网站系统仅制作了网络视频的管理功能(增删改查),以及相关的参数配置功能。由于自己在JavaEE方面没有深入学习过,所以这个系统有部分功能还没搞完,以后有时间再慢慢完善。

简介

架构

系统前台显示采用了Div + CSS+ Javascript技术。其中前台显示用了一些Javascript插件,例如说生成旋转灯笼式效果的CloudCarousel,生成导航菜单的 ddsmoothmenu,用于表单验证的jQuery Validation Engine等等。其中视频播放器用了FlowPlayer(包含了RTMP插件)来支持HTTP的点播和RTMP的直播。按理说视频文件上传的时候可以使用Ajax实现,但是考虑工作比较繁琐,所以暂时还是使用直接文件上传的方式。

系统的后台使用了JavaEE系统中最传统的三层架构:Action层,Service层以及DAO层。其中Action层使用了Struts2框架,用于处理前台页面传来的请求;DAO层使用了Hibernate框架,用于和数据库的交互。Spring框架则用于将Action层,Service层以及 DAO层整合起来。系统的前后台交互主要使用了JSTL标签和EL表达式。此外考虑到国际化方面的要求,采用了Struts2的i18n方式,将所有页面上的文字都抽取坐来保存到单独的文件中,这样就可以实现多种语言的显示。

系统开始运行后,会开启两个线程VideoThumbnailThread和VideoTranscoderThread。 VideoThumbnailThread用于截取视频的缩略图,VideoTranscoderThread则用于转码上传的视频。这两个线程都是通过调用ffmpeg.exe完成相应的功能。

此外,系统中还包含了查看媒体信息的功能。该功能通过调用MediaInfo.dll完成,不再详述。

整个系统的框架如下图所示,后文中再详细记录每部分的功能。

最简单的视频网站(JavaEE+FFmpeg)_第1张图片

效果
系统主要包含了以下几个页面:
主页(index.jsp):进入系统的第一个页面。 
视频列表(videolist.jsp):列表显示视频资源的页面。按照视频源的类型的不同可以分为点播(VOD)视频列表和直播(Live)视频列表。 
视频编辑(videoedit.jsp):编辑视频资源的页面。按照视频源的类型的不同可以分为点播(VOD)编辑和直播(Live)编辑。按照操作的不同可以分为添加(Add)和编辑(Edit)。 
视频内容(videocontent.jsp):查看视频的内容的页面。按照视频源的类型的不同可以分为点播(VOD)视频内容和直播(Live)视频内容。 
设置(configure.jsp):设置页面。用于配制系统的参数。 
关于(about.jsp):显示系统相关的一些信息的页面。
首页

网站首页的如下图所示。Logo位于左上角,菜单栏位于右上角。为了美观一些,页面上方做了一个灯箱效果的特效,随机显示一些视频的缩略图。页面下方则分别列出“点播列表”和“直播列表”中最近添加的几个视频。

最简单的视频网站(JavaEE+FFmpeg)_第2张图片

点播列表
点播列表页面如下图所示。在该页面中,可以对点播视频进行简单的管理:查看内容,添加,修改以及删除。

最简单的视频网站(JavaEE+FFmpeg)_第3张图片

直播列表
点播列表页面如下图所示。直播列表实质上使用了和点播列表相同的页面。在该页面中,可以对直播视频进行简单的管理:查看内容,添加,修改以及删除。

最简单的视频网站(JavaEE+FFmpeg)_第4张图片

视频内容页面
视频内容页面如下所示。该页面中包含了一个FlowPlayer播放器,该播放器用于播放视频内容。

点播视频内容页面如下所示。

最简单的视频网站(JavaEE+FFmpeg)_第5张图片

直播视频内容页面如下所示。尽管表面上看点播和直播页面完全相似,但是实际上点播和直播的机制是不一样的。点播依靠的是HTTP渐进式下载,而直播依靠的是FlowPlayer的RTMP组件。

最简单的视频网站(JavaEE+FFmpeg)_第6张图片

视频添加页面
点播视频添加页面如下所示。该页面用于上传一个点播视频。“名称”输入框用于指定视频的名称,“文件”用于指定上传的视频文件,“简介”可以指定针对该视频的一段简介。其中,“名称”和“文件”两个输入框为必填项,否则无法提交该页面的表单。

最简单的视频网站(JavaEE+FFmpeg)_第7张图片

直播视频添加页面如下所示。从图中可以看出直播和点播的添加页面很类似。它们的不同在于:点播是上传一个视频文件,而直播是指定一个URL(目前该URL只支持RTMP)。和点播类似,“名称”和“URL”两个输入框为必填项,否则无法提交该页面的表单。

最简单的视频网站(JavaEE+FFmpeg)_第8张图片

视频编辑页面

点播视频编辑页面如下所示。该页面用于编辑已经完成上传的点播视频的信息。

最简单的视频网站(JavaEE+FFmpeg)_第9张图片

直播视频编辑页面如下所示。该页面用于编辑直播视频的信息。

最简单的视频网站(JavaEE+FFmpeg)_第10张图片

配置
系统的配置页面如下图所示。该页面用于配置系统的各种设置(以转码设置为主)。每次配置完成后重启系统后设置生效。包含以下参数。
  • 视频编码器:转码使用的视频编码器,默认值为“libx264”。
  • 视频码率 (bps) :视频编码的码率(单位为bps),默认值为500000(500kbps)。
  • 视频帧率 (fps) :视频编码的帧率(单位为fps),默认值为25。
  • 音频编码器:转码时候使用的音频编码器,默认值为“libmp3lame”。
  • 音频采样率 (Hz) :音频编码的采样率(单位为Hz),默认值为22050(22.05kHz)。
  • 音频码率 (bps) :音频编码的码率(单位为bps),默认值为64000(64kbps)。
  • 视频宽 (pixel) :转码后视频的宽(单位为pixel),默认值为640。
  • 视频高 (pixel) :转码后视频的高(单位为pixel),默认值为360。
  • 使用水印:选择转码后的视频是否加水印。如果该选项选择“是”,则会在转码后的视频中添加水印。
  • 水印文件路径:水印文件的路径,此处为文件相对于网站根目录的路径,默认为“watermark/svw.png”。
  • 水印位置-x坐标 (pixel) :水印在视频中的位置——x坐标(单位为pixel),默认值为5。
  • 水印坐标-y坐标 (pixel) :水印在视频中的位置——y坐标(单位为pixel),默认值为5。
  • 保持宽高比并且填充黑边:选择转码后是否保持宽高比。如果该选项选择“是”,则转码后的视频会保持宽高比,并且当输入和输出视频宽高比不一样的时候,会在输出视频中添加黑边。如果该选项选择“否”,则转码后的视频会拉伸成输出分辨率。
  • 输出视频封装格式:输出视频的封装格式,默认为“flv”。
  • 视频截图位置 (sec) :获取视频缩略图的位置(单位为sec),默认为5sec。该默认值的含义是获取视频第5秒处的视频帧作为视频的缩略图。
  • 上传视频存放文件夹:用于存放上传的视频文件,默认值为“videoori”。
  • 转码视频存放文件夹:用于存放转码的视频文件,默认值为“video”。
  • 视频截图存放文件夹:用于存放视频的截图,默认值为“videothumbnail”。

最简单的视频网站(JavaEE+FFmpeg)_第11张图片

MediaInfo信息
MediaInfo信息位于视频内容页面中,在默认的情况下是不显示的。通过修改网页中代码可以显示视频的MediaInfo信息。

转码前文件信息如下图所示,从图中可以看出转码前的文件格式是MPEG-PS,视频编码为MPEG-1,音频编码为MP2。

最简单的视频网站(JavaEE+FFmpeg)_第12张图片

转码后文件信息如下图所示,从图中可以看出转码前的文件是FLV格式的,视频编码为H.264,音频编码MP3。

最简单的视频网站(JavaEE+FFmpeg)_第13张图片

多国语言
本系统支持多国语言。选择右上角菜单的“语言”->“English”可以将系统切换到英文。英文界面如下图所示。

最简单的视频网站(JavaEE+FFmpeg)_第14张图片

英文版的视频点播列表如下图所示。

最简单的视频网站(JavaEE+FFmpeg)_第15张图片

英文版的视频内容页面如下图所示。

最简单的视频网站(JavaEE+FFmpeg)_第16张图片

英文版的配置界面如下图所示。

最简单的视频网站(JavaEE+FFmpeg)_第17张图片

网站部分

下面简单记录一下网站部分的关键源代码。分成三个部分:数据库、前台和后台。

数据库

系统包含了4张表:video,videostate,category,configure。下面简单记录每个表的含义。

Video表

Video表用于存储视频记录。每一个视频对应Video表中的一条记录。该表中的字段如下表所示。

最简单的视频网站(JavaEE+FFmpeg)_第18张图片

备注

*其中点播视频的URL为视频文件的相对路径。

下面例举Video表中的几项和URL有关数据(受限于篇幅,省略其它字段)。

最简单的视频网站(JavaEE+FFmpeg)_第19张图片

Videostate表

Videostate表用于存储视频的状态。该表中字段如下表所示。

最简单的视频网站(JavaEE+FFmpeg)_第20张图片

目前按照执行的顺序定义了4种状态:等待上传,等待截图,等待转码,完成。其中“CSS样式”用于辅助显示视频的状态。该表的内容如下

最简单的视频网站(JavaEE+FFmpeg)_第21张图片

Category表

Category表用于存储视频的分类。该表可以用于确定视频的分类,目前还没有做太多开发。

最简单的视频网站(JavaEE+FFmpeg)_第22张图片

Configure表

Configure表用于存储系统配置信息。该表中字段如下表所示。

最简单的视频网站(JavaEE+FFmpeg)_第23张图片

该表的内容如下。

最简单的视频网站(JavaEE+FFmpeg)_第24张图片

前台

前台部分没有太多可以记录的,基本上都是各种DIV和CSS的调整。其中使用了较多的JSTL标签以及EL表达式。此外使用了Struts2标签用于支持国际化。基本的jsp页面只有6个:
index.jsp:首页。 
videolist.jsp:视频列表——直播视频列表,点播视频列表。 
videoedit.jsp:视频编辑——直播视频添加,直播视频编辑,点播视频添加,点播视频编辑。 
videocontent.jsp:视频内容——直播视频内容,点播视频内容。 
configure.jsp:配置页面。 
about.jsp:关于页面。
除了基本页面之外,还有一些辅助页面:
cfooter.jsp:页脚。 
cheader.jsp:标题栏。 
csidebar_recent.jsp:侧边栏(最近添加)。 
error.jsp:错误页面。
FlowPlayer播放器
前台页面中用于视频播放的播放器是FlowPlayer。FlowPlayer播放器安装有3个步骤: 
(1)包含FlowPlayer的Js文件

(2)添加一个标记

(3)添加一段Javascript代码,其中要包含FlowPlayer的Swf文件

FlowPlayer通过HTTP播放点播视频文件的源代码如下所示。${video.url}中保存了视频的相对URL。

复制代码
 
 
复制代码

FlowPlayer 通过RTMP播放直播视频文件的示例代码如下所示。${video.url}中保存了视频的URL。播放RTMP的时候用到了FlowPlayer的 RTMP Plugin。需要注意的是,RTMP的URL需要拆分开来分别填到不同的位置。在这里通过split(‘/’)函数按照“/”将字符串分离为字符串数组。然后将“protocol://server/app”填至plugins的netConnectionUrl字段,playpath填至clip的 url字段。

复制代码
 
 
 

                    
                    

你可能感兴趣的:(流媒体)