PC及移动端网页中嵌入视频

作者:杨润炜
日期:2016/3/8 16:32

UEditor编辑器提供了嵌入视频的功能,实际上是往html里嵌入embed元素。这是H5新标签,目前有兼容问题。目前最兼容的方案还是使用iframe来实现。然而允许用户或者运营者提交iframe,是十分不安全的。所以,我们折衷地在输出内容时,将embed用iframe代替,这样在未来浏览器都升级后可以直接使用embed,也可以保证现在可以正常运行。

拿腾讯视频举栗子

1.首先获取到视频源,我们取embed里的src值,如图:

获取腾讯视频源

2.将值填入UEditor编辑器的视频上传组件中,如图:

UEditor上传视频

3.输出时将ebmed替换成iframe

网站用jade模块,读者也可以在前端进行替换,代码如下:

  1. content = content.replace(/<embed(.*?) src="http:\/\/static\.video\.qq\.com\/(.*?)\.swf(.*?)">/gmi, '<iframe frameborder="0" width="100%" height="200" src="http://v.qq.com/iframe/player.html?$3&tiny=0" allowfullscreen></iframe>')

之所以能够将embed替换成iframe,是因为腾讯视频的swf源和iframe源基本只有根域名的差别,知道一个可以推导成另一个,如
swf源为:

http://static.video.qq.com/TPout.swf?vid=x00193363qx&auto=0

那iframe源则为:

http://v.qq.com/iframe/player.html?vid=x00193363qx&tiny=0&auto=0

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/39.html
邮箱:glowrypauky@gmail.com
QQ: 892413924