当前位置: 首页 > PbootCMS教程 > PbootCMS后台插入视频mp4格式无法播放的解决方法

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

源码商城 / 2022-01-14
[] [] []

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>

 

修改步骤:

 

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

 

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="' + 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标签

 

打开\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="'+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动画一样的操作效果了。

 

以上就是PbootCMS后台插入视频mp4格式无法播放解决方法的全部内容了,更多pbootcms教程请继续关注小郭博客。

 

声明:本文转载自PB教程网,原文链接:https://www.pbhtml.com/128.html

 

本文链接:http://www.365ymw.com/article-1741.html 转载请保留出处,谢谢!

中查找“PbootCMS后台插入视频mp4格式无法播放的解决方法”更多相关内容

用户评论

暂时还没有任何用户评论
用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha

浏览历史

免责条款 | 隐私保护 | 联系我们 | 公司简介 | 报价单 | 积分商城 | 留言板
Copyright © 2010-2024 365ymw.com All Rights Reserved. 365源码商城
免责声明:部分图片素材及板块内容来自网络,如有侵犯您的权益,请联系我们,站长会立即处理!
备案号:鄂ICP备2024039974号-1