Ueditor 关于视频上传相关问题

  !!!每次改动后记得,清除一下浏览器缓存再试 !!!  

4点:

1.修复编辑时视频不能预览问题;

2.插入视频的时候。在预览的窗口提示 “输入的视频地址有误,请检查后再试!”

3.ueditor 解决上传视频回显 src链接丢失问题

4.ueditor 自定义插入视频封面(页面加载时显示)

1. 修复编辑时视频不能预览问题

ueditor.all.js 中 ,搜索   me.fireEvent(‘beforesetcontent‘, html);

将下列注释

//修复编辑是视频不能预览问题
// me.fireEvent(‘beforesetcontent‘, html);
// var root = UE.htmlparser(html);
// me.filterInputRule(root);
// html = root.toHtml();

搜索 me.commands["insertvideo"]  

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, ‘image‘));

改成

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, ‘video‘));

2. 插入视频的时候。在预览的窗口提示 “输入的视频地址有误,请检查后再试!”如:

解决方法:

1.在ueditor.all.js中 搜索   me.commands["insertvideo"]  

//此处将 edui-faked-video 改为 edui-faked,防止后面将此处替换为image标签

// 此处将image改为embed/video  ,实现  1.实时预览视频,  2.修复了第一次插入视频保存后,刷新后再保存会导致视频丢失的bug

me.commands["insertvideo"] = {
        execCommand: function (cmd, videoObjs, type){
            videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
            var html = [],id = ‘tmpVedio‘, cl;
            for(var i=0,vi,len = videoObjs.length;i<len;i++){
                vi = videoObjs[i];
                //cl = (type == ‘upload‘ ? ‘edui-upload-video video-js vjs-default-skin‘:‘edui-faked-video‘);
                //html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, ‘image‘));

                //此处将 edui-faked-video 改为 edui-faked,防止后面将此处替换为image标签
                cl = (type == ‘upload‘ ? ‘edui-upload-video video-js vjs-default-skin‘:‘edui-faked‘);
                // 此处将image改为embed/video , 实现实时预览视频,且修复了第一次插入视频保存后,刷新后再保存会导致视频丢失的bug
                html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, ‘video‘));
            }
            me.execCommand("inserthtml",html.join(""),true);
            var rng = this.selection.getRange();
            ...

2.在ueditor.config.js中 搜索 whitList  

img 字段中 添加"_url"

img:[‘src‘, ‘alt‘, ‘title‘, ‘width‘, ‘height‘, ‘id‘, ‘_src‘,‘_url‘, ‘loadingclass‘, ‘class‘, ‘data-latex‘, ‘style‘, ‘url‘],//加了style和url

video 后面添加如下规则字段(video不要忘记加逗号)

source: [‘src‘, ‘type‘],

embed: [‘type‘, ‘class‘, ‘pluginspage‘, ‘src‘, ‘width‘, ‘height‘, ‘align‘, ‘style‘, ‘wmode‘, ‘play‘,‘autoplay‘,‘loop‘, ‘menu‘, ‘allowscriptaccess‘, ‘allowfullscreen‘, ‘controls‘, ‘preload‘],

iframe: [‘src‘, ‘class‘, ‘height‘, ‘width‘, ‘max-width‘, ‘max-height‘, ‘align‘, ‘frameborder‘, ‘allowfullscreen‘]  

3.在dialogs/video/video.js   搜索 function createPreviewVideo(url){     把下面的内容替换

function createPreviewVideo(url){
        if ( !url )return;
        var conUrl = convert_url(url);
        conUrl = utils.unhtmlForUrl(conUrl);
        $G("preview").innerHTML =
            // ‘<div class="previewMsg"><span>‘+lang.urlError+‘</span></div>‘+
          // ‘<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"‘ +
          //     ‘ src="‘ + conUrl + ‘"‘ +
          //     ‘ width="‘ + 420  + ‘"‘ +
          //     ‘ height="‘ + 280  + ‘"‘ +
          //     ‘ wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >‘ +
          // ‘</embed>‘;

          //换成video标签
            ‘<video‘ +
            ‘ src="‘ + conUrl + ‘"‘ +
            ‘ width="‘ + 420 + ‘"‘ +
            ‘ height="‘ + 280 + ‘"‘ +
            ‘ autoplay‘ +
            ‘ controls="controls">‘+
            ‘</video>‘;

    }

3. ueditor 解决上传视频回显 src链接丢失问题

切换 html 按钮src链接丢失问题

ueditor.config.js文件的 361行左右  ,

inputXssFilter:true 修改为 ,inputXssFilter:false

     // xss 过滤是否开启,inserthtml等操作
        ,xssFilterRules: true
        //input xss过滤
        //,inputXssFilter: true
        ,inputXssFilter: false //解决视频回显src消失
        //output xss过滤
        ,outputXssFilter: true
        // xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
        ,whitList: {        ...

ueditor.all.js 中  搜索 编辑器默认的过滤转换机制 or UE.plugins[‘defaultfilter‘]

加上return

// plugins/defaultfilter.js
///import core
///plugin 编辑器默认的过滤转换机制
UE.plugins[‘defaultfilter‘] = function () {
    return;
var me = this;
    me.setOpt({
        ...

找到  case ‘img‘:  ,注释代码

case ‘img‘:
     //todo base64暂时去掉,后边做远程图片上传后,干掉这个
     // if (val = node.getAttr(‘src‘)) {
     //     if (/^data:/.test(val)) {
     //         node.parentNode.removeChild(node);
     //         break;
     //     }
     // }
     // node.setAttr(‘_src‘, node.getAttr(‘src‘));
     break;
 ...                         

4. ueditor 自定义插入视频封面(页面加载时显示)

预先保存一张封面到服务器   假设路径为  /static/images/video-poster.png

ueditor.config.js 中  搜索   whitList   在 video 中字段 添加 poster

video:  [‘autoplay‘, ‘_src‘, ‘poster‘, ‘controls‘, ‘loop‘, ‘preload‘, ‘src‘, ‘height‘, ‘width‘, ‘class‘, ‘style‘, ‘id‘], 

修改ueditor.all.js中 搜索    case ‘video‘:    添加 poster  字段 (通过js获取当前域名,拼接上保存到服务器上的图片作为url)

           case ‘embed‘:
                //str = ‘<embed type="application/x-shockwave-flash" class="‘ + classname + ‘" pluginspage="http://www.macromedia.com/go/getflashplayer"‘ +
                str = ‘<embed class="‘ + classname + ‘" pluginspage="http://www.macromedia.com/go/getflashplayer"‘ +
                    ‘ src="‘ +  utils.html(url) + ‘" width="‘ + width  + ‘" height="‘ + height  + ‘"‘  + (align ? ‘ style="float:‘ + align + ‘"‘: ‘‘) +
                    ‘ wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >‘;
                break;
            case ‘video‘:
                var ext = url.substr(url.lastIndexOf(‘.‘) + 1);
                //当前域名window.location.protocol+"//"+window.location.host
                var locationHost = window.location.protocol+"//"+window.location.host;
if(ext == ‘ogv‘) ext = ‘ogg‘;
                str = ‘<video‘ + (id ? ‘ id="‘ + id + ‘"‘ : ‘‘) + ‘ class="‘ + classname + ‘ video-js" ‘ + (align ? ‘ style="float:‘ + align + ‘"‘: ‘‘) +
                    ‘ controls preload="none" width="‘ + width + ‘" height="‘ + height +
                    ‘" poster="‘+locationHost+‘/static/images/video-poster.png" src="‘ + url + ‘" data-setup="{}">‘ +
                    ‘<source src="‘ + url + ‘" type="video/‘ + ext + ‘" /></video>‘;
                break;

原文地址:https://www.cnblogs.com/wuhuanan/p/11766844.html

时间: 2024-10-23 04:31:33

Ueditor 关于视频上传相关问题的相关文章

jsp+ssm+tomcat配置ueditor(单图片,视频上传)

一.下载ueditor资源 二.减压资源,将ueditor包(我项目里的utf8-jsp)放到项目的WebContent下的js文件夹里. 把ueditor资源里 utf8-jsp\jsp\lib文件夹里的jar包拷贝到项目的lib里.(以idea为例)选择file--->Project Structure-->Libraries.导入ueditor-1.1.2.jar包. 三.在需要使用的ueditor的页面引用下图的js(顺序是固定的) 在页面添加 <textarea name=&q

陈松松:视频上传技巧:视频排名稳定,没有流量怎么解决?

每个视频,都是你的金牌业务员 这是我写的第24篇视频营销原创文章 与其搜索十年,不如花一年的时间学习,去赚9年的高薪! 昨天为你分享了视频上传高级技巧的5个环节,视频排名只是其中的一个环节而已,其他4个环节你必须重视起来,否则哪怕你的视频排名再好,再稳定,仍是徒劳无功! 在后台有人留言给我:松松老师,我的视频排名很好,但是没有点击,怎么处理! 这个问题其实每个人都遇到过,而且很难解决,更重要的是不知道从哪里下手,这里我简单给你分析下. 还是那句话,每个环节你都要做好. 想要落地,细节太重要了.

陈松松:视频上传高级技巧

每个视频,都是你的金牌业务员 这是我写的第23篇视频营销原创文章 与其搜索十年,不如花一年的时间学习,去赚9年的高薪! 做视频营销,视频上传技巧是个核心问题! 基本上只要你做视频营销,都会仔细研究它! 其实大家往往把视频上传技巧看的太重了,尤其很多人把视频上传直接定性为就是视频排名,也就是他做的这一切都是为了视频排名. 如果你要是这样做的话,视频营销你会越做越累,效果越来越差. 那视频上传高级技巧的核心是什么,要把重点放在哪里? 其实视频上传技巧,不仅仅只是视频排名,我们先来屡屡视频排名的关系?

iOS开发——项目实战总结&amp;类微信朋友圈发动态功能初步-图片与视频上传

类微信朋友圈发动态功能初步-图片与视频上传 最近在做一个新的项目,涉及到了关于图片和视频上传和显示的功能,研究了一段时间,总结一下. 使用AFNetworking上传图片(可一次上传多张图片,包含不同类型png, jpeg)和视频 1 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; 2 3 AFHTTPRequestOperation *operation = [manager P

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

基于腾讯云点播的视频上传和转码功能

在之前的文章中提到过腾讯云储存上传大文件的各种不方便,比如不能转码(要转码得先把mp4文件从云存储上下载下来,然后通过服务器执行ffmpeg操作,最后再把切割的ts文件上传到腾讯云,过程复杂且容易出错),不能获取实时的上传进度等等,所以就发现腾讯云点播这项技术.相对来说通过云点播既能实现上传进度的获取,而且还能上传完成后自动转码,比如自动把mp4转换为m3u8格式的清单文件来进行分片加载,这样子既能大大加快加载速度,还能保护视频链接的url,所以就记录一下这种技术的使用原理. 云点播视频上传Js

从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. 我实现跨域上传的主要方式是将编辑器的前后端分离,前段直接放到需要用的项目内,接收上传的后端(已做权限验证)放到图片服务器上面. 跨域要添加两个HTTP头: Access-Control-Allow-Origin: *//允许任意域名发起的跨域请求Access-Control-Allow-Header

UEditor Flash文件上传-crossdomain.xml文件配置

在使用UEditor富文本时,如果客户端的浏览器是低版本浏览器,如IE7.IE8等,UEditor的文件上传方式将会使用flash方式上传而不是html5,而flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 从UEditor官方文档上看,如果使用flash方式上传文件,那么只需要设置如下即可: 但实际在IE7.IE8环境下该文件被正确请求到后仍然无法正确上传文件,而是报出“http请求错误”信息.

在SAE上使用Ueditor的图片上传功能

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath):     '''