ueditor 自定义插入视频，封面和二次编辑的问题

发布时间：2018-03-14作者：laosun阅读（8265）

ueditor的插入视频有很多问题，首先插入mp4显示地址栏错误等信息，其次没有封面poster，回显也有问题，下边我来挨个解答一下，另外点击封面也能播放

本人这个博客后台使用的是百度的ueditor富文本编辑器，但是在上传视频的视频遇到不少问题，下边来挨个弄一下。

首先修改ueditor.all.js文件

ueditor.all.js，17769行

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'));

7343,7344,7346行，注释掉下边这三行代码：

var root = UE.htmlparser(html);

me.filterInputRule(root);

html = root.toHtml();




清理缓存，刷新页面插入视频即可

封面的添加办法：

   我是预先保存到服务器一张黑色的播放按钮照片







其次修改ueditor.config.js文件，我的是429行，找到如下这句话

video:  ['autoplay', 'controls', 'loop', 'preload','poster','onclick', 'src', 'height', 'width', 'class', 'style']

我自定义增加了poster 和 onclick  (poster:封面， onlick:写了一个小小的js，来控制封面播放)

修改ueditor.all.js 我的是17664行，找到下边这句话

       case 'video':

               var ext = url.substr(url.lastIndexOf('.') + 1);

               if(ext == 'ogv') ext = 'ogg';

               str = '<video'< span="">+ (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +

                   ' controls preload="preload" width="' + width + '" height="' + height + '" onclick="this.play();" poster="https://sunjs.oss-cn-beijing.aliyuncs.com/daigou/201803/14/1520998764600.png" src="' + url + '" data-setup="{}">' +

                   '<source src="'<span class=" s2"="">+ url + '" type="video/' + ext + '"/>';

               break;




上边的 poster 和 onclick 是我自己添加的。




好了，去缓存刷新一下浏览器。再插入视频的时候，就会自定义增加黑色封面和点击封面进行播放的功能了。

点此查看效果

 发表评论

 请文明留言

  发表

共 7 条评论