导航
观看页 iframe 嵌入
最近更新时间：2025.03.31 17:27:35首次发布时间：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标签插入到您的自有页面中。
智能选取可用域名（智能选路）
为防止 DNS 解析异常、运营商机房被攻击等问题导致的域名不可用，您可以通过以下方式，将企业直播所有可用域名请求一遍，从而选取其中一个可用的域名。
示例代码如下所示。
<html>
<head>
<!-- 智能选路脚本 -->
<script>!function(){function e(o){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(o)}function o(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),t.push.apply(t,r)}return t}function t(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(o){var r,i,a,s;r=t,i=o,a=n[o],s=function(o,t){if("object"!=e(o)||!o)return o;var r=o[Symbol.toPrimitive];if(void 0!==r){var n=r.call(o,"string");if("object"!=e(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(o)}(i),(i="symbol"==e(s)?s:String(s))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}!function(){var e=0;function o(t){var r=t.domain,n=void 0===r?"":r,i=t.errorMsg,a=void 0===i?"none":i,s=t.requestUrlParam,c=void 0===s?"https://live.volcvideo.com/apiservice/setErrorLog":s;if(window.XMLHttpRequest&&!(++e>3))try{var u,l,f=c+"?eventName=cloud_detect_error&errorMsg="+a+"&domain="+n+"&localUrl="+encodeURIComponent(window.location.href),d=new XMLHttpRequest,v=null!==(u=null===(l=window.livesaasIframeConfig)||void 0===l?void 0:l.domainList[e%3])&&void 0!==u?u:"livesaas.volcvideo.com";d.open("GET",f,!0),d.onload=function(){d.status>=200&&d.status<300||o({domain:n,errorMsg:a,requestUrlParam:"https://".concat(v,"/apiservice/setErrorLog")})},d.onerror=function(){o({domain:n,errorMsg:a,requestUrlParam:"https://".concat(v,"/apiservice/setErrorLog")})},d.send()}catch(e){}}try{if(window.livesaasIframeConfig={hasLoaded:!1,usefulDomain:"live.volcvideo.com",detect:!1,autoChangeDomainTimeout:!1,autoChangeDomainError:!1,domainList:["live.volcvideo.com","livesaas.volcvideo.com","live.byteoc.com"]},!window.XMLHttpRequest)return;for(var r=0;r<window.livesaasIframeConfig.domainList.length;r++)r<3&&function(){var e=new XMLHttpRequest,n=window.livesaasIframeConfig.domainList[r];e.open("GET","https://".concat(n,"/clouddetect"),!0),e.timeout=3e4,e.addEventListener("error",(function(){o({errorMsg:"onerror",domain:n})})),e.addEventListener("timeout",(function(){o({errorMsg:"timeout",domain:n})})),e.addEventListener("load",(function(){200===e.status?(window.livesaasIframeConfig.detect?"live.volcvideo.com"===n&&(window.livesaasIframeConfig.usefulDomain=n):(window.livesaasIframeConfig.detect=!0,window.livesaasIframeConfig.usefulDomain=n),window.livesaasIframeConfig=t(t({},window.livesaasIframeConfig),JSON.parse(e.responseText))):o({errorMsg:"".concat(e.status),domain:n})})),e.send()}()}catch(e){}}()}();</script>
</head>
<body>
<iframe id="myIframe"></iframe>
<script>
const dom = document.getElementById('myIframe');
// 请将 url 的取值 https://live.byteoc.com/5528/1234?xxx 替换为 iframe 的嵌入链接。
let url = 'https://live.byteoc.com/5528/1234?xxx'
// 通过 window.livesaasIframeConfig.usefulDomain，将域名替换为智能选路后的域名。例如，将 https://live.byteoc.com/5528/1234?xxx 替换为 https://live.volcvideo.com/5528/1234?xxx。
if (window.livesaasIframeConfig.detect && window.livesaasIframeConfig.usefulDomain) {
url = url.replace(/^(https?:\/\/)[^/?#]+/, `$1${window.livesaasIframeConfig.usefulDomain}`);
}
// 将 iframe 嵌入链接中的域名替换为智能选路后的域名。例如将 https://live.byteoc.com/5528/1234?xxx 替换为 https://live.volcvideo.com/5528/1234?xxx。
dom.setAttribute('src', url);
</script>
</body>
</html>
监控白屏
为及时检测到观看页的白屏现象，从而迅速定位和解决问题，确保观众的观看体验，您可以在添加智能选路脚本后，通过以下方式监控白屏。
示例代码如下所示。
<html>
<head>
<!-- 智能选路脚本 -->
<script>!function(){function e(o){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(o)}function o(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),t.push.apply(t,r)}return t}function t(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(o){var r,i,a,s;r=t,i=o,a=n[o],s=function(o,t){if("object"!=e(o)||!o)return o;var r=o[Symbol.toPrimitive];if(void 0!==r){var n=r.call(o,"string");if("object"!=e(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(o)}(i),(i="symbol"==e(s)?s:String(s))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}!function(){var e=0;function o(t){var r=t.domain,n=void 0===r?"":r,i=t.errorMsg,a=void 0===i?"none":i,s=t.requestUrlParam,c=void 0===s?"https://live.volcvideo.com/apiservice/setErrorLog":s;if(window.XMLHttpRequest&&!(++e>3))try{var u,l,f=c+"?eventName=cloud_detect_error&errorMsg="+a+"&domain="+n+"&localUrl="+encodeURIComponent(window.location.href),d=new XMLHttpRequest,v=null!==(u=null===(l=window.livesaasIframeConfig)||void 0===l?void 0:l.domainList[e%3])&&void 0!==u?u:"livesaas.volcvideo.com";d.open("GET",f,!0),d.onload=function(){d.status>=200&&d.status<300||o({domain:n,errorMsg:a,requestUrlParam:"https://".concat(v,"/apiservice/setErrorLog")})},d.onerror=function(){o({domain:n,errorMsg:a,requestUrlParam:"https://".concat(v,"/apiservice/setErrorLog")})},d.send()}catch(e){}}try{if(window.livesaasIframeConfig={hasLoaded:!1,usefulDomain:"live.volcvideo.com",detect:!1,autoChangeDomainTimeout:!1,autoChangeDomainError:!1,domainList:["live.volcvideo.com","livesaas.volcvideo.com","live.byteoc.com"]},!window.XMLHttpRequest)return;for(var r=0;r<window.livesaasIframeConfig.domainList.length;r++)r<3&&function(){var e=new XMLHttpRequest,n=window.livesaasIframeConfig.domainList[r];e.open("GET","https://".concat(n,"/clouddetect"),!0),e.timeout=3e4,e.addEventListener("error",(function(){o({errorMsg:"onerror",domain:n})})),e.addEventListener("timeout",(function(){o({errorMsg:"timeout",domain:n})})),e.addEventListener("load",(function(){200===e.status?(window.livesaasIframeConfig.detect?"live.volcvideo.com"===n&&(window.livesaasIframeConfig.usefulDomain=n):(window.livesaasIframeConfig.detect=!0,window.livesaasIframeConfig.usefulDomain=n),window.livesaasIframeConfig=t(t({},window.livesaasIframeConfig),JSON.parse(e.responseText))):o({errorMsg:"".concat(e.status),domain:n})})),e.send()}()}catch(e){}}()}();</script>
</head>
<body>
<iframe id="myIframe"></iframe>
<script>
const dom = document.getElementById('myIframe');
// 请将 url 的取值 https://live.byteoc.com/5528/1234?xxx 替换为 iframe 的嵌入链接。
let url = 'https://live.byteoc.com/5528/1234?xxx'
// 通过 window.livesaasIframeConfig.usefulDomain，将域名替换为智能选路后的域名。例如，将 https://live.byteoc.com/5528/1234?xxx 替换为 https://live.volcvideo.com/5528/1234?xxx。
if (window.livesaasIframeConfig.detect && window.livesaasIframeConfig.usefulDomain) {
url = url.replace(/^(https?:\/\/)[^/?#]+/, `$1${window.livesaasIframeConfig.usefulDomain}`);
}
// 监控白屏脚本。
!function(){function e(r){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(r)}function r(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function t(t){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?r(Object(o),!0).forEach((function(r){var n,i,a,l;n=t,i=r,a=o[r],l=function(r,t){if("object"!=e(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,"string");if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(i),(i="symbol"==e(l)?l:String(l))in n?Object.defineProperty(n,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):r(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function n(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}!function(e){function r(e){var r,t=e.type,n=void 0===t?"error":t,i=e.requestUrlParam,a=void 0===i?"https://live.byteoc.com/apiservice/setErrorLog":i,l=e.sendLevel,c=void 0===l?0:l;if(window.XMLHttpRequest){var f=(null===(r=o())||void 0===r?void 0:r.src)||"",s=a+"?errorMsg="+encodeURIComponent("iframe_loading_error")+"&iframeUrl="+encodeURIComponent(f)+"&type="+n+"&localUrl="+encodeURIComponent(window.location.href);c>0&&(s=s+"&sendLevel="+c);var u=0===c||10===c,d=new XMLHttpRequest;d.open("GET",s,!0),d.onload=function(){d.status>=200&&d.status<300||u&&v()},d.onerror=function(){u&&v()},d.send()}}function o(){try{var e,r=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return n(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?n(e,r):void 0}}(e))||r&&e&&"number"==typeof e.length){t&&(e=t);var o=0,i=function(){};return{s:i,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[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,l=!0,c=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return l=e.done,e},e:function(e){c=!0,a=e},f:function(){try{l||null==t.return||t.return()}finally{if(c)throw a}}}}(document.getElementsByTagName("iframe"));try{for(r.s();!(e=r.n()).done;){var t=e.value;if(t.src.includes("live.byteoc.com")||t.src.includes("live.volcvideo.com")||t.src.includes("livesaas.volcvideo.com"))return t}}catch(e){r.e(e)}finally{r.f()}}catch(e){}return null}var i={time:1e4,level:1,iframeReportTimer:void 0};function a(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];i.iframeReportTimer&&(clearTimeout(i.iframeReportTimer),i.iframeReportTimer=void 0),i.level=1;try{e&&d(),window.livesaasIframeConfig.hasLoaded}catch(e){}}var l=["live.byteoc.com","live.volcvideo.com","livesaas.volcvideo.com"];try{var c,f;window.livesaasIframeConfig=t(t({},window.livesaasIframeConfig),{},{onload:function(){!0===window.livesaasIframeConfig.hasLoaded||!1===window.livesaasIframeConfig.hasLoaded&&r({type:"error",requestUrlParam:e}),a(!1)},hasLoaded:!1,reset:a}),null!==(c=window.livesaasIframeConfig)&&void 0!==c&&null!==(f=c.domainList)&&void 0!==f&&f.length&&(l=window.livesaasIframeConfig.domainList)}catch(e){}var s=0,u=l.length;function v(){if(!(s>=u)){var e=o();if(e){for(var r=e.src,t=-1,n=0;n<l.length;n++)if(r.includes(l[n])){t=n;break}if(-1!==t){var i=(t+1)%l.length,c=l[i],f=r.replace(l[t],c);e.src=f,s++,a()}}}}function d(){i.iframeReportTimer=window.setTimeout((function(){r({type:"warn",requestUrlParam:e,sendLevel:10*i.level}),i.level<3&&(i.level++,d())}),i.time)}a(),window.addEventListener("message",(function(e){if("iframeLoadSuccess"===e.data)try{var r,t;i.iframeReportTimer&&clearTimeout(i.iframeReportTimer),window.livesaasIframeConfig.hasLoaded=!0;var n={action:"perf_log",data:{fp:performance.getEntriesByName("first-paint")[0].startTime,fcp:performance.getEntriesByName("first-contentful-paint")[0].startTime}};null===(r=o())||void 0===r||null===(t=r.contentWindow)||void 0===t||t.postMessage(n,"*")}catch(e){}"playerReady"===e.data&&window.WeixinJSBridge&&window.WeixinJSBridge.invoke("getNetworkType",{},(function(){var e,r;null===(e=o())||void 0===e||null===(r=e.contentWindow)||void 0===r||r.postMessage("autoPlay","*")}))}))}()}();
// 当嵌入页面（观看页）内容完全加载后，会触发 onload 事件，并进行错误上报。
dom.addEventListener('load', function () {
window.livesaasIframeConfig && window.livesaasIframeConfig.onload();
});
// 将 iframe 嵌入链接中的域名替换为智能选路后的域名。例如将 https://live.byteoc.com/5528/1234?xxx 替换为 https://live.volcvideo.com/5528/1234?xxx。
dom.setAttribute('src', url);
</script>
</body>
</html>