pbootcms后台编辑器插入视频网址实现支持mp4格式

2022-12-02 0 252

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

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

实现效果:

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

<p><embedtype="application/x-shockwave-flash"class="edui-faked-video"src="demo/video/test.swf"width="420"height="280"wmode="transparent"play="true"loop="false"menu="false"allowfullscreen="true"/></p>

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

<p><videoclass="edui-faked-videovideo-js"controls=""preload="auto"width="420"height="280"src="https://www.pbhtml.comhttps://img.cdn.pbhtml.com/static/upload/video/20200409/1586447634200979.mp4"><sourcesrc="https://www.pbhtml.comhttps://img.cdn.pbhtml.com/static/upload/video/20200409/1586447634200979.mp4"type="video/mp4"/></video></p>

pbootcms后台编辑器插入视频网址实现支持mp4格式

修改步骤:

(最后面有直接替换文件下载)

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

打开coreextendueditordialogsideoideo.js

找到第275行

$G("preview").innerHTML='<divclass="previewMsg"><span>'+lang.urlError+'</span></div>'+'<embedclass="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='<divclass="previewMsg"><span>'+lang.urlError+'</span></div>'+'<embedclass="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='<divclass="previewMsg"style="display:none;"><span>'+lang.urlError+'</span></div>'+'<videocontrols="controls"autoplay="autoplay"'+'width="'+420+'"'+'height="'+280+'"'+'style="max-width:100%;">'+'<sourcesrc="'+conUrl+'"'+'type="video/mp4"/>'+'</video>';}

截图:

pbootcms后台编辑器插入视频网址实现支持mp4格式

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

打开coreextendueditorueditor.all.min.js

搜索以下代码

case"embed":i='<embedtype="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='<embedtype="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{varj=a.substr(a.lastIndexOf(".")+1);"ogv"==j&&(j="ogg"),i="<video"+(e?'id="'+e+'"':"")+'class="'+g+'video-js"'+(f?'style="float:'+f+'"':"")+'controlspreload="auto"width="'+b+'"height="'+d+'"src="'+a+'"data-setup="{}"><sourcesrc="'+a+'"type="video/'+j+'"/></video>';};break;

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

直接替换文件下载

地址①:点击直接下载

地址②:点击加群下载

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 PbootCMS教程 pbootcms后台编辑器插入视频网址实现支持mp4格式 https://www.u-9.cn/cmssyjc/pbootcms-cmssyjc/1393.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

注册会员,众多资源免费下载