当前位置:编程学习 > html/css >>

Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能

Kindeditor编辑器是挺好用的,可是上传的flv视频文件在前台是无法访问的。到底是什么问题,先看看通过该编辑器上传的flv视频文件的源代码:
[html] 
<embed src="/upload/201210/22/201210221043235781.flv" type="application/x-shockwave-flash" width="550" height="400" quality="high" /> 
       分析一下上边的代码,这是播放swf文件的代码,而要在网页里边播放flv视频文件,需要加载一个播放器了,如果把上边代码改成如下代码:
[html] 
<embed src="/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=/upload/201210/19/201210191854485625.flvtype="application/x-shockwave-flash" width="550" height="400" quality="high" /> 
       就可以在网页中正常访问了,分析一下这段代码中的src,就是访问Flvplayer.swf播放器并通过该播放器加载相应的flv视频文件,这样才可以在网页中正常打开flv视频文件。下边就介绍如何在Kindeditor编辑器中添加该功能。
1.       在\themes\common文件夹下新添加flv标志的图片flv.gif。
2.       修改\themes\default\default.png图片,在其底部添加flv图标。
3.       在编辑器功能菜单中显示添加flv文件的菜单,修改\themes\default\default.css文件,找到.ke-icon-flash样式,在其下边添加一段新的样式,代码如下:
[css] 
.ke-icon-flv { 
 
       background-position: 0px -1232px; 
 
       width: 16px; 
 
       height: 16px; 
 
}  

4.       修改lang文件夹下的zh_CN.js文件,找到
[javascript] 
flash: 'Flash', 
并在其下边添加代码
[javascript] 
flv: 'Flv', 
5.       plugins文件夹下新建文件夹flv,并在flv文件夹下再新添加一个文件夹swf,把播放flv文件的swf文件Flvplayer.swf拷贝到该文件夹下,在flv文件夹里新添加flv.js文件。代码如下:
[javascript]
/*******************************************************************************
 
* KindEditor - WYSIWYG HTML Editor for Internet
 
* Copyright (C) 2006-2011 kindsoft.net
 
*
 
* @author juhnpen <juhnpen@qq.com>
 
* @site http://www.kindsoft.net/
 
* @licence http://www.kindsoft.net/license.php
 
*******************************************************************************/ 
 
  
 
KindEditor.plugin('flv', function (K) { 
 
    var self = this, name = 'flv', lang = self.lang(name + '.'), 
 
              allowFlvUpload = K.undef(self.allowFlvUpload, true), 
 
              allowFileManager = K.undef(self.allowFileManager, false), 
 
              uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'); 
 
    self.plugin.flv = { 
 
        edit: function () { 
 
            var html = [ 
 
                            '<div style="padding:10px 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">', 
 
         &n

补充:web前端 , HTML 5 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,