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，否则会出现横向的滚动条移动端嵌入建议满屏嵌入，以防出现一些兼容问题

嵌入无聊天室的页面

如需嵌入的页面不需要聊天室，只需要播放器，请使用特定的链接：

<iframe src="https://s1.videocc.net/live-only-video/polyv-live-video.html?uid={{直播账号ID}}&vid={{频道号}}" frameborder="0" allowfullscreen="true"></iframe>

文档+视频嵌入

示例代码（满屏嵌入，将占满整个浏览器窗口）

<!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中添加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观看页的页面白屏，观看页在微信端会默认经过微信的授权，获取观众的头像和昵称，如需使用iframe观看页链接的方式观看，需要结合外部授权或自定义授权观看条件使用，否则在安卓微信端打开将显示白屏。 3. 安卓微信出现页面抖动的情况，需要将iframe标签默认的边框去掉。 4. iframe不支持打赏、红包、等涉及支付类的功能。

<iframe src="https://live.polyv.cn/watch/{{频道号}}" style="border:0"></iframe>

更多iframe设置可参考 iframe 设置参考

Previous签到、答题卡、问卷 Next观众进入直播间的多种方式

Last updated 21 days ago