20/11/24-深空开发日志-iframe调用支持

深空在运营初期就有用户提问:“深空资讯会不会开放视频”,作为一个公益性运营的社区,在目前磁盘空间小的可怜的服务器上开设视频站点是非常不现实的,但是在如今多媒体高速发展的时代,视频也是获取信息&娱乐不可或缺的一部分。所以我就在想,能不能借助第三方视频站,调用到深空论坛呢

——笔者

从当下入手

作为一个忠实的B站用户第一个想到的便是调用我们的小电视播放器。首先flash播放器被否决了,手机不支持,官方也默认了它过时的事实。所以我们直接从HTML5播放器入手

经常使用B站PC版本的用户会发现B站分享有个特殊选项

不同于视频地址,嵌入代码是以html标签存在的

然后我们再看看网抑云歌曲播放界面(PC端)

网抑云的外链播放器,也是生成一段嵌入代码进行调用

我们从两者中分别得到一串HTML标签代码

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=98241643&auto=1&height=430"></iframe>
//网抑云外链播放器嵌入代码
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=98241643&auto=1&height=430"></iframe>
//B站视频分享嵌入代码

可以看到两者都是用了<iframe>这个HTML标签,那么,什么是<iframe>?又如何使用呢

IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

——来自百度百科

简洁一点来说,iframe代码就是让你自己的网页里再套一个网页,就像一个小窗口一样。而网抑云andB站的嵌入代码也就可以理解为将播放器作为一个页面套在我们自己的页面里,用户在我们的页面可以看到听到来自网抑云和B站的多媒体信息

经过分析之后,我最后确定了iframe所必须的几个参数

src //被调用的页面URL,这个URL将指向需要被调度的页面显示在iframe框架内
//示例:src="//www.baidu.com"
height //这个iframe框架高度
//示例:height=220 height=75% height=220px
//PS:px是像素单位,可加可不加,%数据是相对于设备本身窗口大小,比如你的手机浏览器界面为1080px,75%就代表1090px的75%,这个用在width上比较多
width //这个iframe框架的宽度
//示例同上

确定了iframe使用办法后,接下来就着手把他应用到我的Discuz论坛中。但是,我们很快遇到了新的问题,开放HTML代码使用权限给用户会给我们站点带来很大安全隐患,而且经过多次测试之后发现Discuz居然不认<iframe>标签

最终决定使用discuz自带的Discuz代码。我们进入论坛后台→界面→编辑器设置→自定义代码

这里笔者把自定义标签设置为“btv”,大家可以自己随意设定

替换内容即将被Discuz代码代替的HTML代码,这里看见{1},{2},{3}分别是height,width,src参数(PS:Discuz自定义代码在三个参数情况下默认格式为[btv={1},{2}]{3}[/btv],为了把height和width这两个相似参数放一起,特地把src参数设定为{3})

保存并更新缓存后我们就能在论坛编辑器里看见我们自定义的代码了

注意:网址前面需要加双斜杠“//”或者“http://”“https://”,由于你无法确定网站是否开启ssl,所以简单地打上双斜杠就可以了
示例填写”调用网抑云播放器”
最后自动生成的Discuz代码
在帖子内的效果图

不过这个播放器周围有边框,比较难看,所以要用到iframe标签里frameborder这个参数,他的值只能填1或者0,相当于true和false,在上面Discuz代码自定义界面里我们把1改成0就不会有难看的边框了

去边框后和谐了许多有木有(下面显示瑕疵是笔者height参数没设定好)
b站这里是笔者用了火狐浏览器,默认使用了flash没法显示,支持h5的浏览器都是可以用的

iframe此外还可以搭配align等等参数进一步格式化,充分利(白)用(嫖)第三方网站的调用接口

大家可以试试无限套娃哦(在iframe中套iframe中套iframe……省略1000字)

发表评论

邮箱地址不会被公开。 必填项已用*标注