PbootCMS后台编辑器添加内容时有时需要添加个视频链接mp4格式的，然后在插入视频后发现出来的是swf的代码，这样就导致了视频在前台无法播放。
这个问题首先需要了解到这是百度编辑器UEditor默认的问题，所以实现的思路只能去改ueditor相关的js控制代码来实现。
实现效果：
1、添加swf链接就实用默认的效果，生成emeb标签
<embed class=”edui-faked-video” src=”https://www.xxx/demo/video/test.swf” type=”application/x-shockwave-flash” width=”420″ height=”280″></embed>
2、添加mp4格式链接生成video标签
<video class=”edui-faked-video video-js” src=”http://www.xxx.com/static/upload/video/1.mp4″ preload=”auto” controls=”controls” width=”420″ height=”280″>
<source src=”http://www.xxx.com/static/upload/video/1.mp4″ />
</video>
修改步骤：
(最后面有直接替换文件下载)
1、修改video.js实现预览正确预览视频
打开\core\extend\ueditor\dialogs\video\video.js
找到第275行
$G(“preview”).innerHTML = ‘
<div class=”previewMsg”>’+lang.urlError+'</div>
‘+
‘<embed class=”previewVideo” src=”‘ + conUrl + ‘” type=”application/x-shockwave-flash” width=”‘ + 420 + ‘” height=”‘ + 280 + ‘”></embed>’ +
”;
修改成
if(conUrl.indexOf(“.swf”) >= 0 ) {
$G(“preview”).innerHTML = ‘
<div class=”previewMsg”>’+lang.urlError+'</div>
‘+
‘<embed class=”previewVideo” src=”‘ + conUrl + ‘” type=”application/x-shockwave-flash” width=”‘ + 420 + ‘” height=”‘ + 280 + ‘”></embed>’ +
”;
} else {
$G(“preview”).innerHTML = ‘
<div class=”previewMsg” style=”display: none;”>’+lang.urlError+'</div>
‘+
‘<video style=”max-width: 100%;” autoplay=”autoplay” controls=”controls” width=”‘ + 420 + ‘” height=”‘ + 280 + ‘”>’ +
‘ <source src=”‘ + conUrl + ‘” type=”video/mp4″ />’ +
‘</video>’;
}
2、修改ueditor.all.min.js实现当填入的是mp4链接时生成的html代码为video标签
打开\core\extend\ueditor\ueditor.all.min.js
搜索以下代码
case”embed”:i='<embed class=”‘+g+'” style=”float: ‘+f+’;” src=”‘+utils.html(a)+'” type=”application/x-shockwave-flash” width=”‘+b+'” height=”‘+d+'”></embed>’;break;
然后替换成
case”embed”:if(a.indexOf(“.swf”)>=0){i='<embed class=”‘+g+'” style=”float: ‘+f+’;” src=”‘+utils.html(a)+'” type=”application/x-shockwave-flash” width=”‘+b+'” height=”‘+d+'”></embed>’}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=”{}”>’;};break;
3、上面两个步骤操作后保存，然后到后台强制刷新页面（快捷按钮ctrl+f5），然后就可以和上面gif动画一样的操作效果了。
以上就是PbootCMS后台插入视频mp4格式无法播放解决方法的全部内容了
发表评论