iframe 方式嵌入观看页

若想快速将Polyv直播部署到自身的域名下,可简单通过iframe 引入polyv观看页

普通直播嵌入

示例代码(满屏嵌入,将占满整个浏览器窗口)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.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">
  <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属性,允许iframe获取摄像头与麦克风设备
  • 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设置可参考 iframe 设置参考

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...