pbootcms后台编辑器上传mp4视频 默认黑屏不显示如何解决

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

pbootcms后台编辑器添加内容时有时需要添加个视频链接mp4格式的，然后在插入视频后发现出来的是swf的代码，这样就导致了视频在前台无法播放。

这个问题首先需要了解到这是百度编辑器UEditor默认的问题，所以实现的思路只能去改ueditor相关的js控制代码来实现。

实现效果：

添加swf链接就实用默认的效果，生成emeb标签

添加mp4格式链接生成video标签

修改步骤

1、修改video.js实现预览正确预览视频

打开coreextendueditordialogsideoideo.js，找到第275行

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

修改成

if(conUrl.indexOf(".swf") >= 0 ) {    $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>';} else {    $G("preview").innerHTML = '<div class="previewMsg" style="display:none;"><span>'+lang.urlError+'</span></div>'+    '<video controls="controls" autoplay="autoplay" '+        ' width="' + 420  + '"' +        ' height="' + 280  + '"' +        ' style="max-width:100%;">' +        ' <source src="' + conUrl + '"' + ' type="video/mp4" />' +    '</video>';}

截图：

2、修改ueditor.all.min.js实现当填入的是mp4链接时生成的html代码为video标签

打开coreextendueditorueditor.all.min.js

搜索以下代码

case"embed":i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="http://www.macromedia.com/go/getflashplayer" src="'+utils.html(a)+'" width="'+b+'" height="'+d+'"'+(f?' style="float:'+f+'"':"")+' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';break;

然后替换成

case"embed":if(a.indexOf(".swf")>=0){i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="http://www.macromedia.com/go/getflashplayer" src="'+utils.html(a)+'" width="'+b+'" height="'+d+'"'+(f?' style="float:'+f+'"':"")+' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >'}else{var j=a.substr(a.lastIndexOf(".")+1);"ogv"==j&&(j="ogg"),i="<video"+(e?' id="'+e+'"':"")+' class="'+g+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="auto" width="'+b+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+j+'" /></video>';};break;

3、上面两个步骤操作后保存，然后到后台强制刷新页面（快捷按钮ctrl+f5），然后就可以和上面gif动画一样的操作效果了。

如果还没效果换个浏览器测试，避免缓存导致无法看效果

广东鲸弘科技有限公司专注惠州网站建设、惠州小程序开发、企业官网定制、微信小程序开发等服务，欢迎咨询合作。