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

发布时间:2018-03-14作者:laosun阅读(3772)

ueditor

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


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

    封面的添加办法:

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

    1521000083973053008.png


    其次修改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 是我自己添加的。


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

    点此查看效果


9 +1

版权声明

 前端

 请文明留言

6 条评论