文档中心

免费开始使用

企业直播

观看页 iframe 嵌入

本文介绍如何通过 iframe 嵌入的方式，将企业直播的观看页嵌入您的自有页面。您可将观看页嵌入到页面的任意位置，有效降低开发成本。同时，观众可在您的自有页面观看直播，不仅能吸引新用户，更能留住老用户。

Demo

点击此处或扫描以下二维码查看 Demo 效果。

前提条件

您已开通专业版、旗舰版或尊享版套餐。详见计费说明。

注意事项

由于某些浏览器禁用第三方 Cookie，因此不要做任何读写 Cookie 的设置，即不支持以下功能：发布发送时机为进入直播时的问卷、让观众在进入直播间前登录直播间（即将观看限制设置为密码、手机号等）。如需使用相关功能，可以通过添加别名记录（CNAME 记录）的方式自定义嵌入页面（观看页）域名，使您的自有页面和嵌入页面的域名相同，嵌入页面的 Cookie 会作为第一方 Cookie 写入，不会受到第三方 Cookie 的限制。如需添加 CNAME 记录，请联系企业直播技术支持。
建议观看限制选择自定义，并选择观看页免登录方案。详见观看页免登录方案。
不要在 HTTPS 域名下嵌入 HTTP 域名的页面，否则页面可能无法正常访问。
在嵌入聊天互动菜单时，PC 端最小宽度限制为 320 px。

嵌入方法

参考以下步骤和示例，拼接 iframe 标签中的嵌入链接：
1. 将 https://live.byteoc.com/5528/37****9 替换为您直播间的观看页地址。
2. 参考配置参数，按需拼接链接中的参数信息。
3. 参考事件，按需监听嵌入页面的事件。
观看页整页嵌入
嵌入指定模块
如需整页嵌入观看页，参考以下示例。您可以通过 platform 参数指定当前终端类型。若不传该参数，观看页将根据 User Agent 自动判断当前为 PC 端或移动端。
PC 端观看页整页嵌入：
<iframe src="https://live.byteoc.com/5528/37****9?platform=pc"></iframe>
移动端观看页整页嵌入：
<iframe src="https://live.byteoc.com/5528/37****9?platform=mobile"></iframe>
如需嵌入指定模块，例如播放器，示例如下所示。
<iframe src="https://live.byteoc.com/5528/37****9?mode=player"></iframe>

设置 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>

常见问题

观看页 iframe 嵌入常见问题

最近更新时间：2026.03.26 12:08:46

这个页面对您有帮助吗？

有用

无用

企业直播

Demo #

前提条件 #

注意事项 #

嵌入方法 #

智能选取可用域名（智能选路） #

监控白屏 #