今天在撰写一篇文章的时候需要插入一个视频



一、插入视频分享代码后切换可视化后自动被过滤

1、场景重现

目前视频网站仅支持「iframe」形式的分享,那么在我们插入视频分享代码的时候会出现错误。

如Bilibili的视频分享代码

1.jpg

<iframe src="//player.bilibili.com/player.html?aid=802833370&bvid=BV1Yy4y1s7Tt&cid=328845472&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

将「分享代码」通过「编辑器源代码」进行粘贴

1.jpg

再次点击「html」回到可视化界面的时候,源代码就会消失

1.jpg

2、解决思路

1、修改ueditor.config.js

百度编辑器ueditor会在切换源码的时候过滤掉img的_url属性,而这个属性是用来存储视频Url的。

文件目录:/ueditor/ueditor.config.js

修改方法:定位「xss过滤白名单」,大概在364行,对whitList:{ },的 img: 增加 “_url” 属性:

将代码

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],

替换为

img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class',' _url','data-latex'],

二、增加video标签

增加使三个标签,让Ueditor分别能支持embed标签和iframe标签,这样代码就不会被过滤掉。

1、在video标签后增加「source」、「embed」、「iframe」属性

如果你嫌麻烦,直接替换即可。

将代码

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']

替换为

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play',  
      +  'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

2、代码可以正常显示

调整完毕后,保存、上传、强制刷新,我们会发现视频已经出现了。

1.jpg

三、让视频高度自适应

我们发布后,会发现视频的宽度和高度,并不正常,无法做到自适应。

当然我们可以给视频代码加上宽度,设置width="100%"

但是会发现宽度是变化了,100%,但是高度却还是不正常,高度只有150px,无法正常显示,如果将宽度和高度设置固定值之后,移动端则不能自适应,出现错位问题。

即便设置 height="auto",也是毫无变化。

后来寻找各种方法,终于找到了解决方案。

1、通过JS控制高度

在页面代码加入以下JS代码

<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>

2、视频代码设置ID

将视频分享代码加入id="video"的标签

例如

<iframe id="video" src="//player.bilibili.com/player.html?aid=802833370&bvid=BV1Yy4y1s7Tt&cid=328845472&page=1" frameborder="no" allowfullscreen="true"> </iframe>

视频最终就正常了

1.jpg

总结

折腾了半天,总算是解决问题了,不用担心视频没法发布到文章里了。