為什么80%的碼農都做不了架構師？>>> ??

原貼發表在我的個人博客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官方稱支持以下視頻格式：

視頻協議視頻格式FlashHTML5

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，具體參考官方文檔。

轉載于:https://my.oschina.net/thau/blog/603680

總結

以上是生活随笔為你收集整理的KindEditorckplayer的简单结合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。