Ha? Have a Talk. Menu

Permalink:

KindEditor与ckplayer的简单结合

链接

  ckplayer 6.7:http://www.ckplayer.com/bbs/forum.php?mod=viewthread&tid=10864
  KindEditor4.1.10 (2013-11-23):http://kindeditor.net/down.php
  参考教程: 关于kindeditor整合万能的ckplayer视频播放器插件


  因项目需要,现将KindEditor与ckplayer相结合,搭建一个带本地视频播放的cms。

KindEditor

  KindEditor的安装与配置这里不做多余介绍,具体参考《官方文档-编辑器使用方法》

ckplayer的配置

  上传相关文件到编辑器的插件目录即editor/plugins/ckplayer,基本的文件包括ckplayer.jsckplayer.swfckplayer.xmllanguage.xmlstyle.css

修改格式验证代码

  修改kindeditor.js的960行左右的上传功能的格式验证代码,加入需要支持的视频格式:

    function _mediaType(src) {
        if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
            return 'audio/x-pn-realaudio-plugin';
        }
        if (/\.(swf|flv|mp4)(\?|$)/i.test(src)) {
            return 'application/x-shockwave-flash';
        }
        return 'video/x-ms-asf-plugin';
    }

  修改jsp/upload_json.jsp的32行左右的上传功能的格式验证代码,加入需要支持的视频格式:

    //定义允许上传的文件扩展名
    HashMap<String, String> extMap = new HashMap<String, String>();
    extMap.put("image", "gif,jpg,jpeg,png,bmp");
    extMap.put("flash", "swf,flv,mp4");
    extMap.put("media",
            "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4");
    extMap.put("file",
            "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

  ckplayer官方称支持以下视频格式:

视频协议 视频格式 Flash HTML5
HTTP flv g.jpg x.jpg
HTTP f4v g.jpg x.jpg
HTTP mp4 g.jpg g.jpg
HTTP m3u8 g.jpg g.jpg
HTTP webm x.jpg g.jpg
HTTP ogg x.jpg g.jpg
RTMP flv g.jpg x.jpg
RTMP f4v g.jpg x.jpg
RTMP mp4 g.jpg x.jpg
RTMP 直播流 g.jpg x.jpg

  所以其中要添加什么类型的文件记得在两个文件都修改。

修改embed标签代码

  ckplayer播放本地视频的原理是调用ckplayer.swf打开本地的视频,下面的修改kindeditor.js中983行左右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="f=' 
                        + localhostPath + val + '" ';
            } else {
                html += key + '="' + val + '" ';
            }
        });
        html += '/>';
        return html;
    }

注意

大约在kindeditor.js的300行左右,会有如下代码:

embed : [ 'id', 'class', 'src', 'width', 'height', 'type', 'loop',
                    'autostart', 'quality', '.width', '.height', 'align',
                    'allowscriptaccess','flashvars' ],

  这段代码表示的是embed标签里的属性名,记得添加ckplayer专用的代表本地视频地址的flashvars参数,否则在KindEditor编辑器将代码转换成HTML代码时,embed标签中的其它参数会被省略。
  修改之后,当插入视频时,将会生成如下代码其中flashvars的其它参数可以通过&来连接更多的参数,如控制自动播放的p参数。

<embed src="http://localhost:8080/editor/plugins/ckplayer/ckplayer.swf" 
flashvars="f=/attached/flash/20160116/20160116131808_254.mp4" 
type="application/x-shockwave-flash" width="550" height="400" quality="high" />

其他

  还有一些关于编辑器和优化如下:

修改上传提示

  修改editor/plugins/flash/flash.js,在html参数中如添加诸如一下代码,引导管理员更好的使用上传本地视频的功能。

            var html = [
                '<div style="padding:20px;">',
                //url
                '<div class="ke-dialog-row">',
                '<div style="color:red">',
                '本地视频上传详见<a href="http://haha.tk"  target="_blank" >《教程吧啦吧啦》</a>',
                '</div>',
                '<label for="keUrl" style="width:60px;">' + lang.url + '</label>',
                '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" />  ',
                '<input type="button" class="ke-upload-button" value="' + lang.upload + '" />  ',
                '<span class="ke-button-common ke-button-outer">',
                '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
                '</span>',
                '</div>',    

视频播放去广告

  将ckplayer.xml中setup参数的第9个值设置成0,具体参考官方文档

  • 一个程序猿

    法官:”被告,您干的这件事简直令我们不能相信,您怎么在80岁高龄的时候,想起偷汽车的事来?您为什么在这种年龄去偷别人的汽车呢?“老人:”法官先生,您当然无从了解,在我年轻的时候还没有汽车呢“

  • ccj803

    我试试你的方法看可以不?谢谢了

  • starlitlight

    我想问一下,按照你的方法,可是我的视频显示加载失败为什么啊

    • 大菜头

      你注意检查一下存入数据库中带html标签的信息是否符合要求,可以贴一下信息看一下。

  • milo

    请问为什么我上传完成后,查看html可以看到带属性的embed,但是一submit按钮提交的时候,就会在输出一个embed,只有width和height,提交上去的也是这个空的

    • 大菜头

      提供一个思路,通过浏览器加断点调试的方式看看哪一地方没有把embed标签的内容提交上去,还有就是查一查kindeditor提交代码的时候对于HTML标签代码的转换是什么机制,可能是出于安全考虑把没有声明的embed标签给处理了。

  • Thanks for leaving a comment, please keep it clean. HTML allowed is strong, code and a href.