iframe 方式嵌入觀看頁

更新時間：2024-04-24 13:32:02

若想快速將 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. Android 微信進入 iframe 觀看頁的頁面白屏，觀看頁在微信端會預設經過微信的授權，取得觀眾的頭像和暱稱，如需使用 iframe 觀看頁連結的方式觀看，需要結合外部授權或自訂授權觀看條件使用，否則在 Android 微信端開啟將顯示白屏。
3. Android 微信出現頁面抖動的情況，需要將 iframe 標籤預設的邊框去掉。
4. iframe 不支援打賞、紅包等涉及支付類的功能。

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

更多 iframe 設定可參考 iframe 設定參考