zoukankan      html  css  js  c++  java
  • 让KindEditor支持视频、音频播放!

    让KindEditor支持视频、音频播放!

      一、Kindeditor-all.js文件修改:
      1.修改支持MP4格式视频
    // if (/.(swf|flv)(?|$)/i.test(src)) {        //源码
    if (/.(swf|flv|mp4)(?|$)/i.test(src)) {      //需修改为
    return 'application/x-shockwave-flash';
    }
      2.修改媒体流方法
    function _mediaEmbed(attrs) {
    // var html = '<embed ';// 源码;
    var html = '<embed id="player" name="player" allowscriptaccess="always" allowfullscreen="true" ';               //需修改为;

      二、Flash.js文件修改
      1.修改设置
    var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
    // src : url,  // 源码
    flashvars : 'file=' + url,  //需修改为
    src : '/Uploads/media/player.swf',//需修改为

      2.修改
    var img = self.plugin.getSelectedFlash();
    if (img) {
    var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
    // urlBox.val(attrs.src);//源码;
    urlBox.val(attrs.flashvars);//需修改为 ;

      如果是服务上传脚本是php的话,修改upload_json.php文件:
    'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
    'flash' => array('swf', 'flv'),
    //'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),//源码;

    'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb','mp4'),//需修改为 ;

      如果是服务上传脚本是php的话,根据file_manager_json.php脚本设置的路径新建相应文件夹,并确保该文件夹具备写权限:

    //根目录路径,可以指定绝对路径,比如 /var/www/attached/
    $root_path = $php_path . '../attached/';
    //根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
    $root_url = $php_url . '../attached/';
    即在kindeditor下新建一个attached文件夹。并设置该文件夹具备读写权限。
     
      在需要播放的web视频的页面添加jwplayer插件的引入路径及License
    <script type="text/javascript" src="__PUBLIC__/jwplayer/jwplayer.js"></script>

    <script type="text/javascript">jwplayer.key="*********上jwplayer官网注册下载时就会有key********";</script>

    并在添加以下js代码,即可确保chrome、360、firefox浏览器皆可兼容视屏播放:
    $(document).ready(function(e) {  
                //非视频,不加载播放器  
                if(document.getElementById('player') != null) {
                    jwplayer('player').onReady(function() {});  
                    jwplayer('player').onPlay(function() {});
                    jwplayer("player").play(); 
                }
                var src = document.getElementById('player') != null?  document.getElementById('player').getAttribute('src'):'';
                //加载视频。
                jwplayer("player").setup({
                    file: src, //此处放视频封面图片地址
                    image: "http://yc.duoduo365.com.cn/Public/app/ty1.png",//此处放视频封面图片
                            // primary: "flash"       //360极速模式不支持,会报错! 
                });

            });

      如果服务器上传脚本是jsp页面修改如下:

      <script type='text/javascript'>  

        //非视频,不加载播放器  

        if(document.getElementById('player')!=null)  

        {  

           jwplayer('player').onReady(function() {});  

           jwplayer('player').onPlay(function() {});  

           //jwplayer('player').play(); //自动播放?  

         }  

      </script>  

  • 相关阅读:
    SpringMVC之五:自定义DispatcherServlet配置及配置额外的 servlets 和 filters
    DTP模型之一:(XA协议之三)MySQL数据库分布式事务XA优缺点与改进方案
    Spring Bean基本管理--bean注入方式汇总
    类装载器ClassLoader
    spring中的BeanFactory与ApplicationContext的作用和区别?
    Spring IoC,IoC原理
    mybatis实战教程(mybatis in action)之九:mybatis 代码生成工具的使用
    session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli
    MyBatis的association示例——MyBatis学习笔记之三
    MyBatis一对多双向关联——MyBatis学习笔记之七
  • 原文地址:https://www.cnblogs.com/frankchia/p/7849538.html
Copyright © 2011-2022 走看看