iframe 方式嵌入观看页
若想快速将Polyv直播部署到自身的域名下,可简单通过iframe 引入polyv观看页
普通直播嵌入
示例代码(满屏嵌入,将占满整个浏览器窗口)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>普通直播iframe demo</title>
<style>
/* 将根元素占满浏览器 */
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
iframe {
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 将 "{{频道号}}" 更换为具体频道号 -->
<iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true"></iframe>
</body>
</html>
请pc下尽量将iframe宽度设置为大于或等于1024px,否则会出现横向的滚动条
移动端嵌入建议满屏嵌入,以防出现一些兼容问题
云课堂嵌入
示例代码(满屏嵌入,将占满整个浏览器窗口)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>云课堂iframe demo</title>
<style>
/* 将根元素占满浏览器 */
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
iframe {
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 将 "{{频道号}}" 更换 -->
<iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true"></iframe>
</body>
</html>
云课堂嵌入与普通直播一样,但在pc下宽度请设置在1196px或1196px以上,否则会出现横向滚动条
移动端嵌入建议满屏嵌入,以防出现一些兼容问题
可设置参数 —— hasFrame(适用于云课堂)
设置为1后会页面隐藏直播介绍,页面菜单(页面底部),语言设置,主播放器上的分享频道信息栏,适合局部嵌入iframe 示例代码
<iframe src="https://live.polyv.cn/watch/12345?hasFrame=1" frameborder="0" allowfullscreen="true"></iframe>
设置hasFrame=1
后因为页面底部隐藏,可设置固定高度使竖向滚动条隐藏,使页面嵌入更像在本页面的代码
iframe {
margin: 0 auto;
display: block;
width: 100%;
height: 718px;
}
@media (min-width: 1500px) {
iframe {
height: 824px;
}
}
嵌入后台回放地址如
https://live.polyv.cn/watch/12345?vid=12345
的链接效果与设置hasFrame样式效果一样,也可参考上述的样式设置
iframe 权限设置
连麦
若需要连麦,需要在iframe中添加allow属性(标签内需添加代码allow="microphone; camera"),允许iframe获取摄像头与麦克风设备,且主域名也必须是https
iframe 地址必须是https,本地调试可使用localhost访问,不受协议限制
<iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true" allow="microphone; camera"></iframe>
全屏
允许全屏可添加属性
allowfullscreen="true"
,否则iframe无法进入全屏
注意事项
1、使用自定义授权与外部授权时请嵌入 https 协议的观看页。 2、iframe不支持直接(独立)授权使用。 3、安卓微信进入iframe观看页的页面白屏,观看页在微信端会默认经过微信的授权,获取观众的头像和昵称,如需使用iframe观看页链接的方式观看,需要结合外部授权或自定义授权观看条件使用,否则在安卓微信端打开将显示白屏。 4、安卓微信出现页面抖动的情况,需要将iframe标签默认的边框去掉。 5、iframe不支持打赏、红包、等涉及支付类的功能。
<iframe src="https://live.polyv.cn/watch/{{频道号}}" style="border:0"></iframe>
更多iframe设置可参考 iframe 设置参考
Last updated
Was this helpful?