普通直播iframe demo

# iframe 方式嵌入观看页若想快速将Polyv直播部署到自身的域名下，可简单通过iframe 引入polyv观看页 ## 普通直播嵌入示例代码（满屏嵌入，将占满整个浏览器窗口） ```html 普通直播iframe demo ``` * 请pc下尽量将iframe宽度设置为大于或等于1024px，否则会出现横向的滚动条 * 移动端嵌入建议满屏嵌入，以防出现一些兼容问题 ## 云课堂嵌入示例代码（满屏嵌入，将占满整个浏览器窗口） ```html 云课堂iframe demo ``` * 云课堂嵌入与普通直播一样，但在pc下宽度请设置在1196px或1196px以上，否则会出现横向滚动条 * 移动端嵌入建议满屏嵌入，以防出现一些兼容问题 ### 可设置参数 —— hasFrame（适用于云课堂）设置为1后会页面隐藏直播介绍，页面菜单(页面底部)，语言设置，主播放器上的分享频道信息栏，适合局部嵌入iframe 示例代码 ```html ``` 设置`hasFrame=1`后因为页面底部隐藏，可设置固定高度使竖向滚动条隐藏，使页面嵌入更像在本页面的代码 ```css 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访问，不受协议限制 ```html ``` ### 全屏 * 允许全屏可添加属性 `allowfullscreen="true"`，否则iframe无法进入全屏 ## 注意事项 1、使用**自定义授权**与**外部授权**时请嵌入 https 协议的观看页。\ 2、iframe不支持**直接（独立）授权**使用。\ 3、**安卓微信进入iframe观看页的页面白屏**，观看页在微信端会默认经过微信的授权，获取观众的头像和昵称，如需使用iframe观看页链接的方式观看，需要结合外部授权或自定义授权观看条件使用，否则在安卓微信端打开将显示白屏。\ 4、**安卓微信出现页面抖动的情况**，需要将iframe标签默认的边框去掉。\ 5、iframe不支持打赏、红包、等涉及支付类的功能。 ``` ``` 更多iframe设置可参考 [iframe 设置参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)