hi~~~好久好久不见

FCK默认是可以上传图片的,目前参与的题库系统,要求可以上传多媒体,那么就需要FCK可以上传视频,查了下资料,FCK提供2个插件可以支持视频上传,为movie,flvplayer。题库软件中的要求有以下几点

1、上传视频格式为flv、avi、mp4

2、服务器的视频在展示的时候,首先需要显示一个缩略图

3、在学生答题的时候,多媒体试题,2个答案作为一行显示


基于这3个要求,2个插件分别都使用了下,发现avi的视频上传之后需要在客户端安装×××才能显示画面,否则只有声音。对客户端要求麻烦,所以暂时弃用avi视频功能。


2个插件中,flvplayer可以设置视频的显示缩略图,movie没有找到解决方案。所以最终采用了flvplayer。基于第3个要求,是对fck保存的信息进行了处理,要求显示的时候根据答案序号判断当前是否需要换行显示。


虽然功能完成了,但是代码的质量并不是很好,针对所需要使用的软件环境,对fck的修改,实用性很低,所以记录下修改的位置,方便下次进行升级。


1、FCK融入movie,flvplayer的插件

1)fckeditor/fckconfig.js里面找到

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;

在这行代码下插入以下2行代码

FCKConfig.Plugins.Add( 'movie','en,zh,zh-cn') ;

FCKConfig.Plugins.Add( 'flvPlayer','zh-cn') ;  

2)更新FCK菜单栏,加入选择视频的菜单

FCKConfig.ToolbarSets["DsExam"] = [
    ['Link','Unlink'],
    ['Image','Table','flvPlayer','Source'] 
] ;

注:页面使用的菜单栏为DsExam,期中flvPlayer为我新加入的菜单,与1)中加入的对应【movie的没有应用,所以没加入到菜单中】

3)将插件文件movie、flvPlayer放到/fckeditor/editor/plugins

效果图入

wKioL1NM7e7jcSMlAABZDzJj1r4228.jpg


2、FCK上传视频格式限制

以往使用的fck是页面版的,题库这个是java 类版的,也是第一次接触,在fck.src/net/fckeditor/handlers/default.properties中修改上传flash的文件格式

#connector.resourceType.flash.extensions.allowed = swf|fla|mp3|mp4|avi|wmv|rmvb|mov|vob|mpg|flv
connector.resourceType.flash.extensions.allowed = mp4|flv



3、FCK上传视频面板修改

flvPlayer本身的面板文件是fckeditor/editor/plugins/flvPlayer/flvPlayer.html,对应着fckeditor/editor/plugins/flvPlayer/lang/zh-cn.js,了解各标签的位置,对于没有用的标签我都给注释掉了,修改后的样式如下图:

wKioL1NM7pHBZIj1AAE_BcSvIVY879.jpg

在注释标签的过程中,同时还需要在fckeditor/editor/plugins/flvPlayer/flvPlayer.js文件中修改标签的初始化赋值等代码。

上图中,关于视频的大小我进行了初始化,标签的初始化也是在fckeditor/editor/plugins/flvPlayer/flvPlayer.js中进行赋值,不是在html页面中

在传递视频这个阶段,考虑到用户每个视频都需要自己截图比较麻烦,这里在上传视频之后调用了ffmpeg工具方法进行了视频截图,在用户没有传图片的时候系统会自动截图,至于ffmpeg以后有时间再补充了。


最终,学生登录展示题的时候首先显示的是视频缩略图,点击视频可以进行播放,如果没有截图,视频初始化是黑色框。