台球斯诺克视频直播
淘特cms
当前位置:淘特CMS->帮助中心->常见问题
热销产品
解决方案
购买?#25913;?/div>
更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
  • 作者:
  • 日期:2019/1/30 10:19:49
  • 出处:淘特CMS
  • 点击:

kindeditor是一款不错的可视化编辑器,不过最近?#25913;?#20284;乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系?#25345;?#30340;embed标记更改好video。具体操作方法如下:

1、在296行

embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],

下面增加以下代码:

video : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess','controls'],

修改后的效果如下图:

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

2、在893-895行代码段

if (/.(swf|flv)(?|$)/i.test(src)) {

return 'application/x-shockwave-flash';

}

下面增加以下代码:

if (/.(mp4|mp5)(?|$)/i.test(src)) {

return 'video/mp4';

}

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

3、然后修改901-903行代码

if (/flash/i.test(type)) {

return 'ke-flash';

}

在下面增加

if (/video/i.test(type)) {

return 'ke-video';

}

修改后的效果如下图:

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

4、在917行代码function _mediaImg(blankPath, attrs) {

在其上面增加代码:

function _mediaVideo(attrs) {

var html = '

_each(attrs, function(key, val) {

html += key + '="' + val + '" ';

});

html += ' controls="controls" />';

return html;

}

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

5、在955行代码:K.mediaEmbed = _mediaEmbed;的下面

增加代码 :K.mediaVideo = _mediaVideo;

好了,这样当我们上传视频时,就会使用video标记来引用视频了。取代以前的embed标签 。不过,这里还有一个问题,就是上传视频后,编辑器中为空白的(其实已经上传成功,切换到代码模式也能看到有内容)。使用chrome调试,发现问题在样式上。经过对比发现问题在这里:

之前使用embed标签显示视频的效果:

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

替换后使用video展示视频的效果:

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

所以我们增加样式即可,找到3528行的代码:'img.ke-media {',

将其修改为'img.ke-media,img.ke-video {',

这句话的含义就是ke-video样式与ke-media一样。好了,文件修改好,清除浏览器缓存(也可以按ctr+f5),再次上传视频查看效果解决!

更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
最新评论
用 户:
内 容:
验证码:
台球斯诺克视频直播
广西福利彩票电子投注 时时彩组六720注号码 51pk10计划人工在线计划 网上压庄龙虎对刷 时时彩漏洞稳赚技巧 pk10六码计划在线 重庆时时五星彩走势图500 大乐透胆拖投注金额计算器 11选5技巧稳赚高手群山西省 江苏时时开奖网