企业直播的播放页面提供了网页嵌入的方式供用户嵌入自己的页面。使用企业直播提供的网页嵌入链接，用户可以轻易地将企业直播的功能模块嵌入到页面的任意位置，缩短了用户的开发周期。

前提条件

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

注意事项

• 网页嵌入本质上是 iframe 嵌入的方式，在某些浏览器中对于 iframe 嵌入会禁用第三方 cookie 的设置（无法读写），因此不建议在嵌入模式下使用观看页管理 > 观看限制或观看页管理 > 表单问卷 > 进入直播时等会读写 cookie 的设置。
• 若需要在嵌入模式下使用观看限制等功能，可以使用 cname，自定义观看页域名的方案，使宿主页面和嵌入页面的域名相同，这样嵌入页面的 cookie 会作为第一方 cookie 写入，不会受到第三方 cookie 的限制。cname 方案的接入请联系字节直播后端
• iframe 嵌入尽量不要在 http 域名下嵌入 https 域名的页面或者在 https 域名下嵌入 http 域名的页面，可能会导致页面无法正常访问
• 评论模块接入时，如果使用表情有最小宽度限制：
  • 有点赞按钮时，最小宽度 340 px
  • 没有点赞按钮时，最小宽度 300 px

功能

指定平台展示

可以根据 platform 的参数，决定以什么布局进行展示，可选值：

• pc：取值为 pc 时，默认以 PC 模式进行打开
• mobile：取值为 mobile 时，默认以移动端样式进行打开

  说明

  • 如需以竖屏模式打开直播间，请在 URL 中添加 portrait=1，例如 <iframe src="https://live.byteoc.com/9944/1349844?platform=mobile&portrait=1"></iframe>。
  • 插入指定模块的场景不支持以竖屏模式打开直播间。
• URL：

  <iframe src="https://live.byteoc.com/9944/1349844?platform=mobile" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>
  

背景色透明设置

在移动端 mobile 嵌入时，可以设置背景色为透明色的嵌入模式，设置 background 参数。可选值：

• transparent：背景色设置为透明模式
• URL：

  <iframe src="https://live.byteoc.com/9944/1349844?platform=mobile&mode=comment&background=transparent" width="1000" height="600" frameborder="no" border="0"></iframe>
  

目前只支持透明色一种额外配置模式

直播模块

当 mode 取值为 player 的时候，默认插入播放器模块，其中宽高以外层父容器的宽高来决定，有 PC 和移动端两种嵌入方式：

<iframe src="https://live.byteoc.com/9944/1349844?platform=pc&mode=player" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>

播放器全屏样式问题：
iOS移动端默认采用样式全屏，用户可以通过在直播链接后拼接 systemFullScreen=true（系统全屏）、cssFullScreen=true（样式全屏）来决定播放器全屏方式
在移动端播放器模块嵌入过程中，如果想全屏事件，可以在页面外层监听 postMessage 的消息
全屏状态：postMessage(PLAYER_FULLSCREEN_CHANGE: ${*isFullScreen*});

评论模块

当 mode 取值为 comment 的时候，默认插入评论模块，包括评论列表 tab 和热门评论 tab，有 PC 和移动端两种嵌入方式：

<iframe src="https://live.byteoc.com/9944/1349844?platform=pc&mode=comment" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>

在评论模块嵌入过程中，如果想监听事件失焦、获得焦点、resize 等事件，可以在页面外层监听 postMessage 的消息：

• commentBlur：评论模块失焦通知
• commentFocus：评论模块获得焦点通知
• resize：嵌入模块内部 resize 事件

图文直播模块

当 mode 取值为 imagetext 的时候，默认插入图文直播模块，有 PC 和移动端两种嵌入方式：

<iframe src="https://live.byteoc.com/9944/1349844?platform=pc&mode=imagetext" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>

在 PC 端嵌入过程中，可以通过外层监听 postMessage 的消息：
imagetextHeight:$(height)：有新的图文直播通知事件，height 值为当前图文直播模块的高

图文菜单模块

当 mode 取值为 bandcontent 的时候，默认插入图文菜单模块，有 PC 和移动端两种嵌入方式：

<iframe src="https://live.byteoc.com/9944/1349844?platform=pc&mode=bandcontent" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>

卡片菜单模块

当 mode 取值为 cardlist 的时候，默认插入聚合卡片模块，有 PC 和移动端两种嵌入方式：

<iframe src="https://live.byteoc.com/9944/1349844?platform=pc&mode=cardlist" width="1000" height="600" allowfullscreen="true" frameborder="no" border="0"></iframe>

上报加载错误

在 iframe 嵌入页面添加以下脚本，即可在发生 iframe 加载错误时，自动上报企业直播。

<script>
 var urls = ViewingPageURL; // 请将 ViewingPageURL 替换为 iframe 嵌入的直播间观看页地址，例如 https://live.byteoc.com/xxxx/xxxxxxx
 
 !function(e,o){var n;try{n=window.setTimeout(()=>{!function(e,o){var n=o||"https://live.byteoc.com/apiservice/setErrorLog";if(window.XMLHttpRequest){var t=n+"?errorMsg="+encodeURIComponent("iframe加载错误")+"&iframeUrl="+encodeURIComponent(e)+"&loacalUrl="+encodeURIComponent(location.href),r=new XMLHttpRequest;r.open("GET",t,!0),r.send(),r.onreadystatechange=function(){if(4===r.readyState&&200===r.status){var e=r.responseText;console.log(e)}},r.onerror=function(){console.error("Request failed.")}}}(e,o)},5e3),window.addEventListener("message",function(e){"iframeLoadSuccess"===e.data&&n&&clearTimeout(n)})}catch(e){console.log(e)}}(urls);
 </script>

常见问题

观看页 iframe 嵌入常见问题