导航
观看页 iframe 嵌入
最近更新时间：2024.11.27 10:41:06首次发布时间：2022.02.24 19:18:57
本文介绍如何通过 iframe 嵌入的方式，将企业直播的观看页嵌入您的自有页面。您可将观看页嵌入到页面的任意位置，有效降低开发成本。同时，观众可在您的自有页面观看直播，不仅能吸引新用户，更能留住老用户。
Demo
点击此处或扫描以下二维码查看 Demo 效果。
前提条件
您已开通专业版、旗舰版或定制版套餐。详见计费说明。
注意事项
- 由于某些浏览器禁用第三方 Cookie，因此不要做任何读写 Cookie 的设置，即不支持以下功能：发布发送时机为进入直播时的问卷、让观众在进入直播间前登录直播间（即将观看限制设置为密码、手机号等）。如需使用相关功能，可以通过添加别名记录（CNAME 记录）的方式自定义嵌入页面（观看页）域名，使您的自有页面和嵌入页面的域名相同，嵌入页面的 Cookie 会作为第一方 Cookie 写入，不会受到第三方 Cookie 的限制。如需添加 CNAME 记录，请联系企业直播技术支持。
- 建议观看限制选择自定义，并选择观看页免登录方案。详见观看页免登录方案。
- 不要在 HTTPS 域名下嵌入 HTTP 域名的页面，否则页面可能无法正常访问。
- 在嵌入聊天互动菜单时，PC 端最小宽度限制为 320 px。
嵌入方法
拼接
iframe标签中的嵌入链接。如需整页嵌入，例如 PC 端观看页整页嵌入，示例如下所示。
<iframe src="https://live.byteoc.com/5528/37****9?platform=pc"></iframe>如需嵌入指定模块，例如播放器，示例如下所示。
<iframe src="https://live.byteoc.com/5528/37****9?mode=player"></iframe>
请将
https://live.byteoc.com/5528/37****9替换为您直播间的观看页地址。有关嵌入链接中支持的参数信息，详见配置参数。有关嵌入页面的监听事件，详见事件。设置
iframe元素的属性。示例如下所示。<iframe src="https://live.byteoc.com/5528/37****9?platform=pc" width="1000" height="600" allowfullscreen="true" autoplay="true" allow=“fullscreen; screen-wake-lock; autoplay; picture-in-picture; camera; microphone” frameborder="0" border="0"></iframe>width：iframe元素的宽度。取值为数值时，单位为 px。取值为百分比时，表示相对于父容器宽度的百分比。height：iframe元素的高度。取值为数值时，单位为 px。取值为百分比时，表示相对于父容器高度的百分比。allowfullscreen="true"：允许嵌入页面进入全屏模式。当嵌入页面包含播放器时，建议添加该参数，允许播放器进入全屏模式。autoplay="true"：自动播放视频。allow：嵌入页面支持的功能。参数值之间使用分号（;）分隔。取值如下：fullscreen：进入全屏模式。适用于嵌入页面包含播放器的场景。screen-wake-lock：不息屏，屏幕保持点亮状态。autoplay：自动播放视频。picture-in-picture：画中画。仅适用于 PC 端。camera：摄像头。适用于观众连麦场景。microphone：麦克风。适用于观众连麦场景。
frameborder：iframe元素是否有边框。取值如下：0：无边框。1：有边框。
border：iframe元素的边框宽度。单位为 px。
将
iframe标签插入到您的自有页面中。
上报加载错误
在 iframe 嵌入页面添加以下脚本，即可在发生 iframe 加载错误时，自动上报企业直播。
<script> !function(){function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}!function(t){function n(){try{var t,n=function(t,n){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,n){if(t){if("string"==typeof t)return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}(t))||n&&t&&"number"==typeof t.length){r&&(t=r);var o=0,i=function(){};return{s:i,n:function(){return o>=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var e=r.next();return c=e.done,e},e:function(e){l=!0,a=e},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw a}}}}(document.getElementsByTagName("iframe"));try{for(n.s();!(t=n.n()).done;){var r=t.value;if(r.src.includes("live.byteoc.com")||r.src.includes("live.volcvideo.com")||r.src.includes("bytedance.net"))return r}}catch(e){n.e(e)}finally{n.f()}}catch(e){}return null}var r;try{r=window.setTimeout((function(){!function(e){var t;if(window.XMLHttpRequest){var r=(null===(t=n())||void 0===t?void 0:t.src)||"",o="https://live.byteoc.com/apiservice/setErrorLog?errorMsg="+encodeURIComponent("iframe_loading_error")+"&iframeUrl="+encodeURIComponent(r)+"&loacalUrl="+encodeURIComponent(location.href),i=new XMLHttpRequest;i.open("GET",o,!0),i.send()}}()}),1e4)}catch(e){}window.addEventListener("message",(function(e){if("iframeLoadSuccess"===e.data&&r){clearTimeout(r);try{var t,o,i={action:"perf_log",data:{fp:performance.getEntriesByName("first-paint")[0].startTime,fcp:performance.getEntriesByName("first-contentful-paint")[0].startTime}};null===(t=n())||void 0===t||null===(o=t.contentWindow)||void 0===o||o.postMessage(i,"*")}catch(e){}}}))}()}(); </script>