kindeditor 增加加flv上传视频插件JW player
2013-02-06 12:39
369 查看
网上有利用原来的flash或media插件修改的方法,不过为了不影响原编辑器的使用或升级,还是采用新增一个flvplayer插件的办法
1、在plugin下建立文件夹flvplayer, 建立flvplaery.js文件 源码如下
2、css文件中增加
3、默认插件调用增加
kindeditor.js
items : 里面增加 'flvplayer'
4、关于上传和文件管理 的服务器脚本修改(以asp为例)
相应的还要在flashExtStr 里面增加 播放器支持的格式 如 .flv .f4v .mp4等
file_manager_json.asp 里面对应增加 flvplayer 目录权限、格式等
综上,插件安装好后,以后如果换Flv网页播放器 只需对应换第1条里面的红色html部分代码即可
1、在plugin下建立文件夹flvplayer, 建立flvplaery.js文件 源码如下
/******************************************************************************* * KindEditor - WYSIWYG HTML Editor for Internet * Copyright (C) 2006-2011 kindsoft.net * * @author Roddy <luolonghao@gmail.com> * @site http://www.kindsoft.net/ * @licence http://www.kindsoft.net/license.php *******************************************************************************/ KindEditor.plugin('flvplayer', function(K) { var self = this, name = 'flvplayer', lang = self.lang(name + '.'), allowFlashUpload = K.undef(self.allowFlashUpload, true), allowFileManager = K.undef(self.allowFileManager, false), formatUploadUrl = K.undef(self.formatUploadUrl, true), extraParams = K.undef(self.extraFileUploadParams, {}), filePostName = K.undef(self.filePostName, 'imgFile'), uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'); self.plugin.flash = { edit : function() { var html = [ '<div style="padding:20px;">', //url '<div class="ke-dialog-row">', '<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>', //width '<div class="ke-dialog-row">', '<label for="keWidth" style="width:60px;">' + lang.width + '</label>', '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ', '</div>', //height '<div class="ke-dialog-row">', '<label for="keHeight" style="width:60px;">' + lang.height + '</label>', '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ', '</div>', '</div>' ].join(''); var dialog = self.createDialog({ name : name, width : 450, title : self.lang(name), body : html, yesBtn : { name : self.lang('yes'), click : function(e) { var url = K.trim(urlBox.val()), width = widthBox.val(), height = heightBox.val(); if (url == 'http://' || K.invalidUrl(url)) { alert(self.lang('invalidUrl')); urlBox[0].focus(); return; } if (!/^\d*$/.test(width)) { alert(self.lang('invalidWidth')); widthBox[0].focus(); return; } if (!/^\d*$/.test(height)) { alert(self.lang('invalidHeight')); heightBox[0].focus(); return; } // var html = K.mediaImg(self.themesPath + 'common/blank.gif', { // src : url, // type : K.mediaType('.swf'), // width : width, // height : height, // quality : 'high' // }); var html='<script src="/flowplayer/flowplayer-3.2.11.min.js"></script>' + '<a href="'+url+'" style="display:block;width:'+width+'px;height:'+height+'px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "/flowplayer/flowplayer-3.2.15.swf"); </script>'; self.insertHtml(html).hideDialog().focus(); } } }), div = dialog.div, urlBox = K('[name="url"]', div), viewServerBtn = K('[name="viewServer"]', div), widthBox = K('[name="width"]', div), heightBox = K('[name="height"]', div); urlBox.val('http://'); if (allowFlashUpload) { var uploadbutton = K.uploadbutton({ button : K('.ke-upload-button', div)[0], fieldName : filePostName, extraParams : extraParams, url : K.addParam(uploadJson, 'dir=flvplayer'), afterUpload : function(data) { dialog.hideLoading(); if (data.error === 0) { var url = data.url; if (formatUploadUrl) { url = K.formatUrl(url, 'absolute'); } urlBox.val(url); if (self.afterUpload) { self.afterUpload.call(self, url, data, name); } alert(self.lang('uploadSuccess')); } else { alert(data.message); } }, afterError : function(html) { dialog.hideLoading(); self.errorDialog(html); } }); uploadbutton.fileBox.change(function(e) { dialog.showLoading(self.lang('uploadLoading')); uploadbutton.submit(); }); } else { K('.ke-upload-button', div).hide(); } if (allowFileManager) { viewServerBtn.click(function(e) { self.loadPlugin('filemanager', function() { self.plugin.filemanagerDialog({ viewType : 'LIST', dirName : 'flvplayer', clickFn : function(url, title) { if (self.dialogs.length > 1) { K('[name="url"]', div).val(url); if (self.afterSelectFile) { self.afterSelectFile.call(self, url); } self.hideDialog(); } } }); }); }); } else { viewServerBtn.hide(); } var img = self.plugin.getSelectedFlash(); if (img) { var attrs = K.mediaAttrs(img.attr('data-ke-tag')); urlBox.val(attrs.src); widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0); heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0); } urlBox[0].focus(); urlBox[0].select(); }, 'delete' : function() { self.plugin.getSelectedFlash().remove(); } }; self.clickToolbar(name, self.plugin.flash.edit); });
2、css文件中增加
.ke-icon-flvplayer { background-position: 0px -512px; width: 16px; height: 16px; }
3、默认插件调用增加
kindeditor.js
items : 里面增加 'flvplayer'
4、关于上传和文件管理 的服务器脚本修改(以asp为例)
If instr(lcase("image,flash,media,file,flvplayer"), dirName) < 1 Then showError("目录名不正确。"&dirName) End If Select Case dirName Case "flash" extStr = flashExtStr Case "media" extStr = mediaExtStr Case "file" extStr = fileExtStr Case "flvplayer" extStr = flashExtStr Case Else extStr = imageExtStr End Select
相应的还要在flashExtStr 里面增加 播放器支持的格式 如 .flv .f4v .mp4等
file_manager_json.asp 里面对应增加 flvplayer 目录权限、格式等
综上,插件安装好后,以后如果换Flv网页播放器 只需对应换第1条里面的红色html部分代码即可
相关文章推荐
- kindeditor 增加加flv上传视频插件JW player
- 为kindeditor添加在线播放视频功能(基于原有flash上传,mp4,flv,flash)
- 改造Kindeditor之:自定义图片上传插件。 外加给图片增加水印效果的选择。
- 为kindeditor添加在线播放视频功能(基于原有flash上传,mp4,flv,flash)
- kindeditor本身支持上传flash功能,但是我们经常需要上传一些flv、mp4或则其它格式的视频。 其实具体的播放功能是通过jwplayer实现的。我只对kindeditor简单的修改了一下
- Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能
- Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能
- 为kindeditor添加在线播放视频功能(基于原有flash上传,mp4,flv,flash)
- 详细教程使用jQuery jPlayer插件给你的站点增加视频和音频功能
- jQuery上传文件到服务器,实现量上传及压缩包导入,支持Office文档、PDF、图像、音视频和图纸等各类型文件。上传完成后系统自动为图片、音、视频类文件增加摘要及缩略图
- Struts2使用Kindeditor4.0.3在线编辑器--上传图片、视频、FLASH、附件
- kindeditor 图片上传插件
- KindEditor插件之图片上传
- 本地可以播放的.flv视频,上传服务器后不能播放的解决方案
- dede5.7织梦后台广告插件增加图片上传功能
- 本地可以播放的.flv视频,上传服务器后不能播放的解决方案
- (转)JSP上传视频后自动转成flv的核心JAVA方法
- springmvc 视频上传 ffmepg 转换为 flv格式 在转换flv时卡死,需关闭tomcat解决方案
- 关于 flash (jw player)不能处理 flv视频 中文名文件 或者 中文路径 的 解决方案
- 关于插件KindEditor 上传图大小的限制