直播播放器嵌入

目睹直播提供视频直播窗口Iframe嵌入功能,在频道管理-频道分享-直播播放器嵌入页面可以分别看到PC端播放器和移动端播放器的Iframe嵌入代码。

如果想要pc端和移动端同时观看,请使用移动端嵌入代码。

嵌入1.png

点击“复制地址”获取该频道的PC端/移动端嵌入地址,将该地址放入网页源代码中,即可实现视频外嵌,如

PC端:

<p>

    <iframe width="800" height="450" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" src="http://mudu.tv?a=index&c=show&id=1113&type=pc"></iframe>

</p>

移动端:

<p>

    <iframe width="640" height="360" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"  src="http://mudu.tv?a=index&c=show&id=1113&type=mobile"></iframe>

</p> 

HTML iframe 框架

HTML iframe 是框架的一种,也称为内置框架或内联框架,用来在网页内嵌入另外一个网页, HTML iframe 可以自己设定要嵌入的网页所占空间,如宽度与高度,也可以设定是否要显示边框或滚动条,几乎所有主流的浏览器都支援 HTML iframe 框架语法。 

HTML iframe 基本语法

<iframe src="要嵌入的网页网址"></iframe>

标准的 HTML iframe 框架语法是由 <iframe> 开始至 </iframe> 结束,开头的 <iframe> 标签内的 src 就是用来指定要嵌入的网页网址,如果想要写得更完整一点,可以在 <iframe> 与 </iframe> 间加入"浏览器不支持的提示文字",当网友使用的浏览器不支持 HTML iframe 时,可以显示提示文字让网友知道有一个部分的内容没有显示。

HTML iframe 框架宽度与高度设定

<iframe src="要嵌入的网页网址" width="宽度" height="高度"></iframe>

如果要替 iframe 加上宽度与高度,仅需使用 width 与 height 这两个属性即可,预设的属性单位为 px,例如「width="200" height="200"」这样写就代表宽度与高度均是 200px,但为了管理上的效率,还是建议写成「width="200px" height="200px"」比较完整,若是要使用百分比做为尺寸的单位,则一定要将百分比写出来,例如「width="30%" height="50%"」这样,否则浏览器可能会误以为是用 px 做为单位。

HTML iframe 框架边框显示与隐藏

<iframe src="要嵌入的网页网址" frameborder="0"></iframe>

网页设计本来的风格在嵌入另一个网页后,很可能会对原本的视觉效果有所影响,其中突兀的边框可以说是相当明显,还好 iframe 有提供隐藏边框的功能,范例中的 frameborder="0" 代表隐藏边框,如果是 frameborder="1" 则代表显示边框。

HTML iframe 框架 scrolling 滚动条

<iframe src="要嵌入的网页网址" scrolling="no"></iframe>

既然是嵌入另一个网页,就很可能会遇到网页大小与主网页的显示区块间的尺寸差异,嵌入的网页可能很大或是内容很多,需要用到滚动条才方便,iframe 可以透过 scrolling 属性来设定是否要显示滚动条,scrolling 有三个属性值,分别为 yes 代表要显示滚动条、no 代表不显示滚动条以及 auto 代表根据网页大小自动显示。

属性混搭使用

<iframe src="要嵌入的网页网址" width="200" height="200" frameborder="0" scrolling="no"></iframe>

以上几个常用的属性,可以同时用在一个 iframe 框架的设计上,调整出最适合的嵌入尺寸与形态,假设全部属性都用上去,写起来大至会向范例这个模样,意思代表要嵌入一个宽度与高度都是 200px 的框架,边框与滚动条都不显示。


相关阅读:


自定义菜单功能说明 

自定义授权观看功能说明 

互动投票使用帮助及规则说明  

互动打赏 

设立观看门槛 控制观看用户数量 

通过微信做直播 微信电视已全面开启 


服务时间:9:00~21:00

紧急支持:21:00~9:00

咨询热线:4009-618-610

在线咨询