KindEditor&ckplayer的簡單結合

原貼發表在個人我的博客haha.tk | Ha?Have a Talk!上，轉載請註明出處，謝謝。

連接

  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相結合，利用ckplayer播放由KindEditor富文本編輯器上傳至服務器的視頻。

KindEditor

  KindEditor的安裝與配置這裏不作多餘介紹，具體參考《官方文檔-編輯器使用方法》。

ckplayer的配置

  上傳相關文件到編輯器的插件目錄即editor/plugins/ckplayer，基本的文件包括ckplayer.js、ckplayer.swf、ckplayer.xml、language.xml和style.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 ';
        _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;" /> &nbsp;',
                '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;',
                '<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，具體參考官方文檔。