栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > PHP > php开源框架 > Pbootcms

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

Pbootcms 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

实现效果:

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

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

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

<p>
    <video class="edui-faked-video video-js" controls="" preload="auto" width="420" height="280" src="https://www.pbhtml.comhttps://pbhtml.imarc.work/static/upload/video/20200409/1586447634200979.mp4">
        <source src="https://www.pbhtml.comhttps://pbhtml.imarc.work/static/upload/video/20200409/1586447634200979.mp4" type="video/mp4"/>
    </video>
</p>


编辑器添加视频链接演示.gif

修改步骤:

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

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

打开\core\extend\ueditor\dialogs\video\video.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=https://www.mshxw.com/skin/sinaskin/image/nopic.gif>

修改成

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=https://www.mshxw.com/skin/sinaskin/image/nopic.gif>

截图:


image.png

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

打开\core\extend\ueditor\ueditor.all.min.js

搜索以下代码

case"embed":i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="http://www.macromedia.com/go/getflashplayer" src=https://www.mshxw.com/skin/sinaskin/image/nopic.gif>

然后替换成

case"embed":if(a.indexOf(".swf")>=0){i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="http://www.macromedia.com/go/getflashplayer" src=https://www.mshxw.com/skin/sinaskin/image/nopic.gif>

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/490817.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号