- MP4视频文件不是支持格式
- 原本的视频上传后，在前台页面生成后，会提示播放插件不支持的问题
- 使用ckplayer视频播放插件
步骤一： 修改允许上传的视频格式
修改编辑器目录下的 kendeditor/php/upload_json.php,大概在20行左右,在media类型中添加MP4- $ext_arr = array(
- 'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
- 'flash' => array('swf', 'flv'),
- 'media' => array('swf', 'flv', 'mp3', 'mp4', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
- 'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
- );
步骤二：修改kindeditor.js 905行左右，加入需要支持的视频格式，MP4生成的embed的type为application/x-shockwave-flash;
- function _mediaType(src) {
- if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
- return 'audio/x-pn-realaudio-plugin';
- }
- if (/\.(swf|flv|mp4)(\?|$)/i.test(src)) { //添加MP4
- return 'application/x-shockwave-flash';
- }
- return 'video/x-ms-asf-plugin';
- }
步骤三：下载ckplayer，将插件保存到项目的kendeditor/plugins文件夹中
步骤四：修改kineditor提交视频后生成的embed，按照ckplayer插件简单调用的格式。
- ckplayer播放本地视频的原理是调用ckplayer.swf打开本地的视频，下面的修改kindeditor.js中920行左右embed标签相关的代码，加入ckplayer可以识别的参数flashvars：
- function _mediaEmbed(attrs) {
- var html = '<embed '; //最后有个空格
- //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
- var curWwwPath=window.document.location.href;
- //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
- var pathName=window.document.location.pathname;
- var pos=curWwwPath.indexOf(pathName);
- //获取主机地址，如： http://localhost:8083
- var localhostPath=curWwwPath.substring(0,pos);
- _each(attrs, function(key, val) {
- if(key == 'src') {
- html += key + '="' + K.options.pluginsPath
- + 'ckplayer/ckplayer.swf" ' + 'flashvars="video=' //.swf后又个空格
- + localhostPath + val + '" '; //‘" ’这里最后有个空格
- } else {
- html += key + '="' + val + '" '; //‘" ’这里最后有个空格
- }
- });
- html += '/></embed>';
- return html;
- }
- 添加kindeditor生成embed时，要遍历的属性数组，添加上 falshvars，不然我们上面的操作再生成后，就会被忽略；大约在kindeditor.js的298行中：
embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'flashvars'], //添加falshvars属性
注意：
- 上方html拼接字符串时，两个属性直接的空格不要漏了，不然在编辑器提交的时候，将img转换为embed的时候，会导致所有的属性都无法被获取！！！ 这个坑我也踩了好久
- 网上很多文章写的都是在embed上添加的是 'flashvars="f=', 但是新版的ckplayer则是 'flashvars="video='，用video代替f 不然前台会显示视频路径不存在；
步骤五：前台引入ckplayer,js
在需要播放视频的页面，引入ckplayer.js，生成该播放器;
ckplayer播放器的配置可直接才ckplayer.js中修改，具体文档请参照操作手册