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>