You need to enable JavaScript to run this app.
导航
企业直播
  • 文档首页
    • /
  • 企业直播

观看页 iframe 嵌入

最近更新时间：2023.11.23 15:09:47

首次发布时间：2022.02.24 19:18:57

我的收藏

简介

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

前提条件

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

注意事项

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

功能

功能

描述

备注

指定平台展示

可以根据用户参数，选择使用 PC 端还是移动端展示观看页面

platform

直播（播放器）模块

插入播放器模块进行直播

mode=player

评论模块

插入评论模块，包括评论列表和热门评论功能

mode=comment

图文直播模块

插入图文直播模块，自带滑动区域进行展示

mode=imagetext

图文菜单模块（富文本）

插入图文菜单模块，可以进行富文本模块的插入

mode=bandcontent

卡片菜单模块

插入卡片菜单，可以嵌入外链进行跳转

mode=cardlist

聚合直播模块

插入聚合直播模块，可以在不同线路之间跳转

mode=polylive

互动问答模块

插入直播问答模块

mode=session

多模块组合

支持多模块组合，配合 menu 使用

mode=menu

指定多模块组合

在 mode=menu 时生效，用于指定以下多个模块：comment、imagetext、 bandcontent、 cardlist、polylive和session。各模块间使用下划线分隔

menu=comment_imagetext

菜单目录配置

用于配置菜单目录是否显示，默认显示

tabTitle=false

播放器反馈入口配置

用于配置播放器反馈的入口是否显示，默认不显示

feedback=true

自定义评论限制跳转

用于配置自定义评论是否跳转到自定义链接，默认跳转

customAuthRedirect=false

页面语言

用于指定页面语言，支持 all,cn,en,jp。该功能需要配合控制台多语言显示一起使用

language=cn

H5 端背景

用于配置 H5 端背景色，支持透明背景色

background=transparent

iOS 系统全屏

用于指定 iOS 移动端全屏方式

systemFullScreen=true

iOS 样式全屏

用于指定 iOS 移动端全屏方式

cssFullScreen=true

指定平台展示

可以根据 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>

说明

当页面含有全屏功能时，建议添加 allowfullscreen="true" 允许 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>