• 微信
当前位置:首页 >> CMS笔记

PbootCMS后台编辑器插入mp4格式的视频无法播放的解决方法

作者:玄北 时间:2022-04-02 阅读数:458人阅读

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

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

实现效果:

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

<embed class="edui-faked-video" src="https://www.xuanbeiweb.cn/video/test.swf" type="application/x-shockwave-flash" width="420" height="280"></embed>

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

<video class="edui-faked-video video-js" src="https://www.xuanbeiweb.cn/video/1.mp4" preload="auto" controls="controls" width="420" height="280">
<source src="https://www.xuanbeiweb.cn/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") &gt;= 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")&gt;=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&amp;&amp;(j="ogg"),i="&lt;video"+(e?' id="'+e+'"':"")+' class="'+g+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="auto" width="'+b+'" height="'+d+'" src="'+a+'" data-setup="{}"&gt;';};break;

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

以上就是PbootCMS后台编辑器插入mp4格式的视频无法播放的解决方法的全部内容了

over~~~

       

免责声明:本站部分文章、数据、图片来自互联网,

如果侵犯了你的权益请来信告知我们删除,否则不承担相应法律责任。邮箱:xuanbei@xuanbeiweb.cn

玄北头像

玄北

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

玄北微信

发表评论:

评论记录:

暂无评论——欢迎您的点评!