Java web在线编辑器编辑视频

来源：互联网发布：淘宝店铺教程视频编辑：程序博客网时间：2024/04/30 07:34

解决方案

方案名称：在线编辑器编辑视频解决方案

方案时间：2012-08-16

编写人员：yummy

方案资料：

在线编辑器

　　在线编辑器是一种通过浏览器等来对文字、图片等内容进行在线编辑修改的工具。一般所指的在线编辑器是指HTML编辑器。

在线编辑器的用途

　　在线编辑器用来对网页等内容进行在线编辑修改，让用户在网站上获得“所见即所得”效果，所以较多用来做网站内容信息的编辑和发布和在线文档的共享等，比如新闻、博客发布等。由于其简单易用，被网站广泛使用，为众多网民所熟悉。比如百度百科的词条创建、修改的过程中，就使用的是在线编辑器。

在线编辑器的模式

　　一般在线编辑器都具有三种模式：编辑模式、代码模式和预览模式。编辑模式让用户可以进行文本、图片等内容增加、删除和修改。代码模式用于专业技术人员来查看和修改原始代码（如HTML代码等）。预览模式则是用来查看最终的编辑效果

在线编辑器的功能

在线编辑器一般具有如下基本功能：（1）文字的增加、删除和修改；（2）文字格式（如字体、大小、颜色、样式等）的增加、删除和修改；（3）表格的插入和编辑；图片、音频、视频等多媒体的上传、导入和样式修改；（4）文档格式的转换，比如WORD文档格式转为普通网页格式等。　　随着人们对网页编辑要求越来越高，人们对它不断地进行大量的功能改进和增加。比如：（1）可打开原有网页，另存/新建网页；（2）编辑器内的查找、替换功能；（3）多媒体的上传、播放支持；（4）图文样式调整、排版；（5）图片处理，如上传图片自动生成缩略图，以解决打开图片库选图速度慢的问题；非本地服务器图片自动下载及保存；（6）他站指定文件类型的自动下载到指定服务器；（7）完善的表格编辑功能（可插入、删除、修改、合并、拆分等），可编辑表格背景色、表格线等，并有预览功能，满意后插入/修改；表格线的加上与去除支持；（8）插入WORD/EXCEL等代码；（9）网页减肥，如WORD冗余代码去除；（10）去除危险代码；（11）代码转换，如全角/半角转换、大写/小写字母转换、汉字的繁简体转换等；（12）自定义CSS样式等。

常见的在线编辑器

　　常见的在线编辑器有FreeTextBox，CKeditor（其旧版本为FCKeditor等。也有一些国人写的相当优秀的在线编辑器，如KindEditor，eWebEditor，WebNoteEditor等，还有上述编辑器的改进版本等。

在线编辑器的安全

　　由于网页内容的多样性和复杂性，为了防止提交有可能损坏服务器安全的脚本，一般都会要求用户通过注册帐号、密码登录后，再在内容编辑页面进行操作。同时，还可以通过技术手段将危险代码进行过滤后再提交服务器。

更多应用

　　随着近年微博的迅速发展，为突破微博内容140字的限制，人们使用长微博工具将欲发布的文字、图片等综合信息转换为图片，附于文字微博之后。由于在线编辑器具有方便的编辑功能，也在此大显身手。随着云时代的来临，在线Office等在线编辑器将成为主流办公软件厂商的必争战场。

FLV 是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。

FLV ：

在线视频

英文名：Flash Video 　　FLV视频格式的定义　　目前许多在线视频网站都采用此视频格式。如搜狐视频、新浪播客、六间房、56、优酷、酷6、土豆，youtube等。FLV已经成为当前视频文件的主流格式。

网页支持的播放器代码：

在线编辑器加视频整合效果图

Javaweb视频上传：

Javaweb实现视频上传，满足在线编辑器在线编辑视频功能。

支持在线视频编辑，实现用户体验。

针对在线编辑器实现在线编辑视频两种方式：

1，支持视频上传至服务器（Tomcat）编辑

2，实现ftp上传视频，抓取视频路径

技术支持：在线编辑器（fckeditor）+html标签+Ajax

页面普通视频代码：

Flv视频显示代码：

例如：

实现思路：

用户视频上传并不全具好处，增加了tomcat的负担，也就是内存，针对有的视频并不是上传到tomcat服务器，而是拿到一段视频的路径，便于减少Tomcat的压力，实现在线编辑器支持视频编辑的功能，并不是视频上传。

一、支持视频上传至服务器（Tomcat）编辑

主要做编辑器编辑广告，如：flash支持，swf格式支持!

1.导入在线编辑器的js（fckeditor）*可在网上下载支持。

下载后的效果图：

2.创建一个页面，做编辑页面如：add.jsp

3.上传一段视频，在action控制视频大小，然后js写入在线编辑器

获取到视频在服务器的路径和名称，此处用Ajax获取。得到视频的

Var obj = "<embed height=480 width=355 wmode=transparent menu=false name=scriptmain salign=T type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer quality=high loop=false src="+路径+"/"+名称+">";

//把图片插入文本编辑器

function insertHTMLToEditor(obj)

{

var oEditor = FCKeditorAPI.GetInstance("content");

if(oEditor.EditMode==FCK_EDITMODE_WYSIWYG){

oEditor.InsertHtml(obj);

}else{

return false;

}

4保存，完成视频上传和在线编辑

前台显示效果如下图：

二、支持服务器外视频（Tomcat）编辑 ftp视频上传，获取路径

*主要用于页面显示视频播放，支持较大容量的视频显示!

实现思路：

外部的一个文件夹或者是外面的内网IP范围内，存在一段视频，获取到该视频地址后，实现在线编辑。

同时在数据库中增加一个字段，便于显示时得到视频显示的路径，增加数据库字段'"src"

在前面页面的基础上，增加页面属性，src

同理点击浏览获取到该视频的路径和名称，此处不实现视频上传。

通过手动加载视频代码的方式在线编辑器中插入一段代码实现编辑。

点击保存按钮，数据库中添加完成。保存视频的路径，便于显示!

注意：此方案仅仅支持flv类型的视频显示!

因此在做ftp视频上传时借用外部视频格式转换工具，此工具网上很多，可随便下载能转换为flv视频的软件!

先做转换后，再做ftp上传

1、页面编辑，创建页面如：add.jsp

手动输入存在的视频路径!然后注入到编辑器。

针对视频显示，在数据库原有的属性添加一个字段src

用于保存视频路径，做视频显示!

3、插入代码块，编辑视频操作，同时保存视频路径，便于视频显示

163:lcyangmi@163.com