You need to enable JavaScript to run this app.
导航

集成 Web 观播 SDK

最近更新时间2024.04.23 14:26:57

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

观播 SDK 提供看直播、发评论、参与抽奖等功能。本文介绍 Web 观播 SDK 的集成方法以及相关参数、事件、API 等。

前提条件
  • 您已开通定制版套餐。详见计费说明
  • 由于 Web 观播 SDK 的 API 不支持跨域调用,请联系企业直播技术支持将您的域名加入白名单。白名单中支持配置泛域名。

功能支持

Web 观播 SDK 支持的功能情况,详见 SaaS 与 aPaaS 功能差异

集成方法

完成以下步骤,将观播 SDK 集成到您的 Web 应用中。

  1. 通过 linkscript 标签分别引入 CSS 和 JS 资源。
    直接修改 URL 中的版本号即可更新版本,同一终端的 CSS 和 JS 版本应保持一致。

    // PC 端(仅支持模块化接入)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/css/index.1.4.4.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/js/index.1.4.4.js"></script>
    
    // PC 端(单独接入播放器模块,仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于 PC 端模块化接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/css/index.1.4.4.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-pc/js/index.1.4.4.js"></script>
    
    // 移动端(支持模块化接入或整页接入)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/css/index.1.4.4.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile/js/index.1.4.4.js"></script>
    
    // 移动端(仅支持整页接入,性能优于其他移动端整页接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/css/index.1.4.4.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/js/index.1.4.4.js"></script>
    
    // 移动端(单独接入播放器模块,仅支持点播、直播、清晰度、倍速以及多线路等播放器相关功能。性能优于其他移动端模块化接入方式)
    <link rel="stylesheet" href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/css/index.1.4.4.css">
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/player-mobile/js/index.1.4.4.js"></script>
    

    国内域名:https://lf-cdn-tos.bytescm.com/obj/static
    最新版本:1.4.4

    说明

    • 建议平板接入 PC 端的 Web SDK,以获得更佳的视觉效果。
    • 移动端如需接入直播预约、主播账号、页头图等非特定模块所属的功能,可采用整页接入方式。
  2. 资源引入后, ByteLiveWebSDK 挂载在 window 下。通过以下方式将观播 SDK 集成到您的 Web 应用中。

    var webSDK = new window.ByteLiveWebSDK({
      activityId: 169410856822****,
      token: 'JC****',
      service: '',
      mode: 1,
      modules: [
        {
          id: "player",
          mode: "player", 
        }, 
         {
          id: "menu", 
          mode: "menu",
          menu: ["comment"],
        }
      ],
      options: {}
    })
    
    webSDK.emit('player.pause'); // 触发事件
    webSDK.on('player.pause', () => {}); // 监听事件
    

    有关代码中的参数配置,详见配置参数。有关监听与触发事件,详见监听与触发事件。有关 API 调用,详见 API

  3. (可选)覆盖样式。SDK 元素的 class 属性值不可更改。您可以通过变更 class 属性的样式属性及其属性值,覆盖组件或组件元素的样式。

  4. 调试效果。您可以选择以下任一调试方法:

    • 本地调试:在本地 localhost:8080 端口进行调试,但此种调试方法无法播放预告和回放。有关本地调试方法,详见 Demo 体验集成示例
    • 线上调试:建议在 PC 上使用 SDK demo playground 进行线上效果调试。通过 SDK demo playground 配置不同版本的 SDK 以及不同直播间,修改模板代码后可实时预览效果。详见企业直播 Web SDK demo playground

配置参数

基础参数与非播放器相关参数

名称

类型

是否必选

默认值

描述

activityId

Number

不适用

直播间的活动 ID。调用 CreateActivityAPIV2 后返回。您也可以在企业直播控制台的直播间左上角获取活动 ID。一个直播间对应一个 activityId。

service

String

不适用

服务名称,仅用于标记。
企业直播技术支持会在配置白名单后,向您同步该参数值。

mode

Number

不适用

鉴权模式。

  • 1:公开,由观众输入昵称。
  • 2:自定义,需调用 GetSDKTokenAPI 获取用户 token,用户昵称随接口提交。

token

String

不适用

用户 token。

  • mode=2 时,需调用 GetSDKTokenAPI 获取用户 token。
  • mode=1 时,可在企业直播控制台上直播间内的观看页管理 > 页面嵌入 > Web SDK嵌入中获取用户 token。

modules

id

String

不适用

页面元素 ID,指定模块需要渲染的位置和大小。

mode

String

不适用

模块名称。

  • player:播放器模块。PC 端建议最小宽度为 640 px。
  • menu :菜单模块。支持聊天互动、图文、商品卡片、互动工具、互动问答、内嵌链接、邀请榜单菜单。支持渲染多个菜单类型。PC 端建议最小宽度为 320 px。

    说明

    支持根据控制台的开关状态,判断是否在观看页展示商品卡片或互动工具菜单。

  • lines:多线路模块。高度自适应,您无需指定高度。
  • mobile:移动端整页模块。已组装播放器、多线路和菜单模块。仅支持移动端,不支持与其他模块共用。查看 Demo 效果
  • mobile-portrait:移动端竖屏模式整页模块。类似于抖音直播的竖屏直播场景,不支持与其他模块共用。查看 Demo 效果

说明

参数值设置为 playermenulines 时,仅可接入对应模块的功能。移动端如需接入直播预约、主播账号、页头图等非特定模块所属的功能,可将参数值设置为 mobilemobile-portrait 接入整页模块。

menu

String[]

仅在 modules.mode=menu 时生效。配置显示哪几个菜单类型,例如 ["comment", "imagetext"]。不配置默认显示所有菜单类型。

  • comment:聊天互动菜单。
  • imagetext:互动工具菜单。
  • cardlist:商品卡片菜单。
  • bandcontent:图文菜单。
  • session:互动问答菜单。
  • embeddedurl:内嵌链接菜单。
  • invitelist:邀请榜单菜单。

options

origin

String

"https://live.byteoc.com"

业务请求域名。如无特殊需求,无需设置。

saveUserInfo

Boolean

true

mode=1 时,设置是否缓存用户信息。

  • true:缓存。
  • false:不缓存。

mobileBackgroundTransparent

Boolean

false

设置移动端模块背景是否透明。

  • true:透明,展示观看页面的背景图或背景色。
  • false:不透明。

mobileGetUserId

Boolean

true

设置是否开启快速获取移动端用户 ID 的入口。开启后在页面左上角快速点击 5 次即可获取用户 ID。

  • true:开启。
  • false:不开启。

basicPolling

Boolean

true

设置是否开启轮询 API 实时更新直播间信息。

  • true:开启。
  • false:不开启。

pcPlayerHeader

Boolean

false

设置 PC 端播放器上方是否展示直播名称、描述等信息。

  • true:展示。
  • false:不展示。

disabledLogin

Boolean

false

设置是否禁用企业直播自带的登录体系。通常配合 permission.need 事件使用,禁用后您需自行处理用户登录流程。

  • true:禁用。
  • false:不禁用。

disableCardRedirect

Boolean

false

设置是否禁用商品卡片点击跳转能力。通常配合 card.click 事件使用,禁用后您需自行处理跳转功能。

  • true:禁用。
  • false:不禁用。

disableAdFloatingRedirect

Boolean

false

设置是否禁用浮标广告点击跳转能力。通常配合 adFloating.click 事件使用,禁用后您需自行处理跳转功能。

  • true:禁用。
  • false:不禁用。

disableAdMiddleRedirect

Boolean

false

设置是否禁用页中广告点击跳转能力。通常配合 adMiddle.click 事件使用,禁用后您需自行处理跳转功能。

  • true:禁用。
  • false:不禁用。

disableAdAccountRedirect

Boolean

false

设置是否禁用主播账号点击跳转能力。通常配合 adAccount.click 事件使用,禁用后您需自行处理跳转功能。

  • true:禁用。
  • false:不禁用。

disableReservationCell

Boolean

false

设置是否禁用预约弹窗。通常配合 reservation.click 事件使用。禁用后您需自行处理用户预约功能,即通过 isReserved 参数设置用户是否已预约并调用 updateModulesConf API 更新预约状态。

  • true:禁用。
  • false:不禁用。

isReserved

Boolean

设置用户是否已预约。

  • true:已预约。
  • false:未预约。

lotteryIcon

lotteryIcon

抽奖图标。支持的图片格式与img 标签支持的图片格式相同。

emojiIcon

String

PC 端表情面板入口的图标。参数值为图标的图片链接。支持的图片格式与img 标签支持的图片格式相同。

moreActionExpandPc

Boolean

false

设置是否在 PC 端聊天互动菜单下将更多图标内的选项作为图标展示。

  • true:作为图标展示。
  • false:不作为图标展示。

riskWarning

Boolean

true

设置是否开启风险提示。

  • true:开启。
  • false:不开启。

disableLotteryTicketRedirect

Boolean

false

设置是否禁用抽奖的奖券奖品点击跳转能力。通常配合 lotteryTicket.click 事件使用,禁用后您需自行处理跳转功能。

  • true:禁用。
  • false:不禁用。

extra

String

不适用

同步至企业直播控制台的额外参数,可用于关联用户。例如设置参数值为销售部,将用户部门同步至企业直播控制台。

loginInToThumbUp

Boolean

false

设置是否必须登录才能点赞直播间。

  • true:必须登录。如观众在未登录状态点赞直播间,会触发permission.need 事件。
  • false:无需登录。

disableFeatureProcess

Boolean | String[]

false

设置在观众点击互动功能按钮后,是否阻止功能的后续执行。

  • true:阻止所有互动功能的后续执行。
  • false:不阻止任何互动功能的后续执行。
  • String[]:阻止指定互动功能的后续执行。例如设置参数值为 ['Comment','Gift'],阻止评论功能和礼物打赏功能的后续执行。

支持阻止以下互动功能的后续执行:

  • Comment:评论功能。
  • Gift:礼物打赏功能。
  • Lottery:实时抽奖功能。
  • Thumb:评论点赞功能。
  • Luckymoney:红包功能。
  • Reservation:直播预约功能。
  • Question:互动问答功能。
  • CheckIn:签到功能。
  • Vote:投票功能。
  • Questionnaire:问卷功能。
  • TaskAward:累计观看抽奖功能。

useUserConnect

Boolean

false

设置是否强制展示移动端连麦入口。

  • true:强制展示。
  • false:不强制展示。

说明

  • 连麦功能使用了 WebRTC 技术,由于该技术的兼容性限制,仅在观众使用以下操作系统和浏览器时,默认展示移动端连麦入口。如需强制展示移动端连麦入口,可将参数值设置为 true
    • 操作系统:Android 10 以上或 iOS 14.3 以上。
    • 浏览器:Google Chrome(Android 版本 78.0 以上、iOS 版本 86.0.4240 以上)、Safari 14 以上或微信内嵌浏览器。
  • 为保证连麦质量,如果观众使用的操作系统和浏览器不符合以上要求,推荐您在强制展示移动端连麦入口前,测试连麦功能在不同操作系统和浏览器下的表现。

hideUserConnect

Boolean

false

设置是否强制隐藏移动端连麦入口。

  • true:强制隐藏。
  • false:不强制隐藏。

说明

连麦功能使用了 WebRTC 技术,由于该技术的兼容性限制,仅在观众使用以下操作系统和浏览器时,默认展示移动端连麦入口。如需强制隐藏移动端连麦入口,可将参数值设置为 true

  • 操作系统:Android 10 以上或 iOS 14.3 以上。
  • 浏览器:Google Chrome(Android 版本 78.0 以上、iOS 版本 86.0.4240 以上)、Safari 14 以上或微信内嵌浏览器。

lotteryIcon

名称

类型

是否必选

默认值

描述

attendIcon

String

未开奖时的抽奖图标。设置参数值为0: '简体中文图片地址'。如果您需要设置英文、日文、繁体中文的图标,将0分别替换为123,并替换相应语言的图片地址。

openIcon

String

已开奖时的抽奖图标。设置参数值为0: '简体中文图片地址'。如果您需要设置英文、日文、繁体中文的图标,将0分别替换为123,并替换相应语言的图片地址。

播放器相关参数

名称

类型

是否必选

默认值

描述

options

playerRetryTimes

Number

1

播放器遇到网络异常后的重试次数。主备流切换并降级后,如果仍然无法播放,即当前重试失败。设置为 0 表示无数次重试。

purePlayer

Boolean

false

设置是否展示纯净播放器。纯净播放器指播放器内无进度条等互动按钮。

  • true:展示纯净播放器(播放器内无进度条等互动按钮)。
  • false:展示常规播放器。

videoFillMode

String

'auto'

设置播放器内视频的填充方式。

  • cover:保持视频原有宽高比例填充播放器,视频的宽高会填满播放器的宽高。如果视频宽高比与播放器宽高比不同,会有部分视频内容被裁剪掉。
  • auto:保持视频原有宽高比例填充播放器,视频的宽高会填满播放器的宽高。如果视频宽高比与播放器宽高比不同,视频会缩放显示。
  • fill:视频内容完全填充播放器,但视频宽高比可能发生变化。
  • fillWidth:拉伸视频宽度填满播放器宽度,视频高度不变。
  • fillHeight:拉伸视频高度填满播放器高度,视频宽度不变。

该参数仅对 PC 端和移动端横屏模式生效。
移动端竖屏模式视频的填充方式根据源流画面宽高比的不同而有所不同。效果详见竖屏直播间

softSolution

Boolean

设置是否在移动端强制开启或关闭播放器软解解码直播视频。开启软解后可解决移动端部分浏览器或 App 下播放器被劫持的问题。

  • true:强制开启。
  • false:强制关闭。

playerBackgroundTransparent

Boolean

false

设置播放器内未被画面填充部分的颜色是否为透明。

  • true:透明,显示为直播封面。
  • false:不透明,显示为黑色。

disablePlayerCover

Boolean

false

设置是否显示直播封面。

  • true:不显示直播封面,即显示为观看页面的背景图或背景色。
  • false:显示直播封面。

mobilePlayerIconIgnoreList

String[]

设置在移动端观看页的播放器上隐藏哪些功能的入口。

  • editNickname:修改昵称。
  • notification:打开或关闭系统消息。
  • language:切换语言。
  • share:分享图标,用于分享海报、二维码或链接。

portraitMenuExtends

PortraitMenuConf[]

设置移动端竖屏直播间的菜单。

mobileGesture

mobileGesture

移动端播放器手势相关配置。

说明

由于 PC 端默认关闭手势,且不支持配置,平板在接入 PC 端 Web SDK 后,不支持通过手势操作。

showLikeInPlayer

Boolean

false

设置是否将直播间点赞图标显示在播放器内。

  • true:显示在播放器内。默认显示在播放器右下角,您可以通过覆盖 class 属性 bytelive-player-like-button 的样式调整图标位置。
  • false:显示在评论区输入框右侧。

disableRotateFullscreen

Boolean

false

设置是否禁用移动端旋转至横屏时会自动进入全屏模式。

  • true:禁用,旋转至横屏时不会自动进入全屏模式且不会有提示。
  • false:不禁用。

disableLivePauseButton

Boolean

false

设置是否在直播期间隐藏播放器上的暂停按钮。

  • true:隐藏。
  • false:不隐藏。

rotateFullscreen

Boolean

false

移动端 iOS 进入全屏模式后,视频是否自动切换为横屏播放。

  • true:视频自动切换为横屏播放。
  • false:视频根据设备朝向横屏或竖屏播放。

liveLineChangeIcon

String | HTMLElement

通过传入 DOM 字符串或 DOM 元素,自定义播放器内多线路切换的按钮文案或图标。例如,设置参数值为<div style="color: #fff">频道</div>

defaultLiveLine

Number

设置默认直播频道,即观众进入直播间时,观看页默认播放的直播频道。如未设置,则默认直播频道为频道语言与观众 PC 端浏览器语言或移动端系统语言相同的直播频道。
例如取值 0 表示设置直播间的第一个直播频道为默认直播频道,取值 1 表示设置直播间的第二个直播频道为默认直播频道,以此类推。如果取值无法与直播间内的直播频道匹配,则播放器不在观看页展示。

autoPlay

Number

1

设置视频的自动播放模式。

  • 1:非静音自动播放视频。但由于浏览器自动播放策略等限制,视频可能会转为静音自动播放或不自动播放。
  • 2:静音自动播放视频。但由于浏览器自动播放策略等限制,视频可能不会自动播放。
  • 3:不自动播放视频。观众必须手动点击播放视频。

如果您的直播或点播视频无法按照参数设置自动播放或者只能静音自动播放,详见为什么直播或点播视频无法自动播放或者只能静音自动播放?

playerConf

playerConf

播放器交互相关配置。

playerConf

名称

类型

是否必选

默认值

描述

closeVideoDblclick

Boolean

false

设置是否禁用在移动端双击播放器时,暂停或播放直播或点播内容。

  • true:禁用。双击播放器,不会暂停或播放直播或点播内容。
  • false:不禁用。双击播放器,暂停或播放直播或点播内容。

PortraitMenuConf

名称

类型

是否必选

默认值

描述

icon

String

菜单内显示的图标。
可选值:

  • shoppingCart
    图片
  • share
    图片
  • info
    图片
  • images
    图片
  • notification
    图片

render

String

菜单内显示的图标或按钮。例如:<div style="color: #fff">冲</div>

说明

优先级比 icon 参数低。因此如果您需要通过 render 参数自定义图标或按钮,则不可为 icon 参数赋值。

name

String

图标或按钮的名称。该名称仅在图标或按钮收纳在更多图标中时显示在图标或按钮下方。

key

String

菜单的唯一标识。

onClick

Function

点击事件回调。返回值即 key的参数值。

index

Number

0

菜单内图标或按钮的显示顺序。数值越大,越靠左显示。值大于 70 会收纳在更多图标内。如果菜单内的图标和按钮总数超过 5 个(包括直播间内的默认图标),超过部分的图标或按钮会收纳在更多图标内。

mobileGesture

名称

类型

是否必选

默认值

描述

disableGesture

Boolean

false

设置是否禁用移动端手势。禁用后,观众无法通过左右滑动预告或回放画面来拖动进度条。

  • true:禁用
  • false:不禁用

监听与触发事件(可选)

监听事件(on)

webSDK.on('player.ratechange', playerRate => {
    console.log(playerRate);
});

播放器相关事件

事件 key

返回参数

描述

player.play

播放事件。

player.playing

(暂停、卡顿后)恢复播放事件。

player.pause

暂停播放事件。

player.ended

结束播放事件。

player.destroy

销毁播放器事件。

player.ratechange

Number

播放速率变化事件。
返回参数可选值:

  • 0.5:0.5 倍速。
  • 0.75:0.75 倍速。
  • 1:1 倍速。
  • 1.25:1.25 倍速。
  • 1.5:1.5 倍速。
  • 2:2 倍速。

player.fullscreen_change

Boolean

全屏模式变化事件。
返回参数可选值:

  • true:切换到全屏模式。
  • false:切换到非全屏模式。

player.pip_change

Boolean

PC 端小窗模式变化事件。
返回参数可选值:

  • true:切换到小窗模式。
  • false:从小窗模式切换回原始播放画面。

player.waiting

等待加载数据事件。

player.status

String

直播状态变更事件。
状态包含直播中、预告、回放、结束。

player.vodConfigChange

{
  vid: String;
  currentTime: Number;
  duration: Number;
}

点播视频(预告和回放)断点续播事件。
点播视频播放过程中该事件的触发时机如下:

  • PC 端:页面关闭时,SDK 触发该事件。
  • 移动端:WebView 的 pagehide 事件触发时或用户手动拖动进度条时,SDK 触发该事件。

触发该事件后,返回以下参数:

  • vid:视频 ID,视频的唯一标识。
  • currentTime:当前播放位置。单位:秒。
  • duration:视频总时长。单位:秒。

lines.number

Number

多线路数量变化事件。
触发该事件后:

  • 当直播状态为直播中时,返回直播频道数量。
  • 当直播状态为回放时,返回回放视频数量。

其他事件

事件 key

返回参数

描述

activity.status

Number

直播状态变更事件。

  • 1:直播中
  • 2:预告
  • 3:回放
  • 4:结束

comment.focus

聊天互动输入框点击事件。

comment.send

String

发送评论事件。
触发该事件后,返回发送的评论内容。

comment.nickNameClick

{
    Nickname: String;
    ExternalId: String;
    isTop: Boolean;
    isPresenter: Boolean;
}

评论区昵称点击事件。
触发该事件后,返回以下参数:

  • Nickname:用户昵称。
  • ExternalId:外部用户 ID。
  • isTop:评论是否置顶。
    • true:置顶。
    • false:未置顶。
  • isPresenter:当前用户是否为主持人。
    • true:主持人
    • false:非主持人。

permission.need

通过该事件判断是否需要弹出自定义登录框。
mode=1disabledLogin=true 时,观众在参与评论、互动等需要用户信息的场景下,例如点击评论输入框时会触发该事件。
触发该事件后,您需触发自有账号系统的登录流程并通过 updateMode2Token 方法将 mode=1 时的 Token 更新为 mode=2 时的 Token。

reservation.click

立即预约按钮点击事件。

reservation.attend

String

成功预约事件。
触发该事件后,返回预约手机号。

card.click

{
    text: String;
    url: String;
    UAInfos: UAInfo[];
    DirectUrls: String[];
}

菜单内的商品卡片点击事件。该事件仅在企业直播控制台配置跳转链接后才会触发。
您可以通过设置 disableCardRedirect 参数值为 true 并监听该事件,实现商品卡片的自定义跳转逻辑。
触发该事件后,返回以下参数,参数值读取控制台的商品卡片菜单配置。

  • text:商品卡片的标题。
  • url:商品卡片的跳转链接。
  • UAInfos:Array of Object 类型。商品卡片菜单配置的环境信息。包含以下参数:
    • UAAddress:环境 UA(User Agent)。

      说明

      观众在环境 UA 包含该参数值的平台点击商品卡片时,即可跳转至该商品卡片的直达链接。如果观众在其他平台点击商品卡片,则会跳转至该商品卡片的跳转链接。

    • UAName:环境名称。
  • DirectUrls:Array of String 类型。商品卡片的直达链接。

floatingCard.click

{
    text: String;
    url: String;
    UAInfos: UAInfo[];
    DirectUrls: String[];
}

浮窗商品卡片点击事件。该事件仅在企业直播控制台配置跳转链接后才会触发。
您可以通过设置 disableCardRedirect 参数值为 true 并监听该事件,实现商品卡片的自定义跳转逻辑。
触发该事件后,返回以下参数,参数值读取控制台的商品卡片菜单配置。

  • text:商品卡片的标题。
  • url:商品卡片的跳转链接。
  • UAInfos:Array of Object 类型。商品卡片菜单配置的环境信息。包含以下参数:
    • UAAddress:环境 UA(User Agent)。

      说明

      观众在环境 UA 包含该参数值的平台点击商品卡片时,即可跳转至该商品卡片的直达链接。如果观众在其他平台点击商品卡片,则会跳转至该商品卡片的跳转链接。

    • UAName:环境名称。
  • DirectUrls:Array of String 类型。商品卡片的直达链接。

lottery.click

{
    awardId: String
}

抽奖入口点击事件。
触发该事件后,返回抽奖 ID。

lottery.attend

{
    awardId: String
}

参与抽奖事件。
触发该事件后,返回抽奖 ID。

lottery.result

{
    awardId: String;
    ifWin: Boolean
}

抽奖开奖事件。仅当抽奖开奖时用户在线,才会触发该事件。
触发该事件后,返回以下参数:

  • awardId:抽奖 ID。
  • ifWin:是否中奖。
    • true:中奖。
    • false:未中奖。

lottery.winInfo

{
    awardId: String;
    awardTel: String;
    awardAddress?: String;
}

提交中奖信息事件。
触发该事件后,返回以下参数:

  • awardId:抽奖 ID。
  • awardTel:观众输入的手机号。
  • awardAddress:观众输入的收货地址。

说明

是否返回手机号和收货地址取决于您在控制台的配置。

lotteryTicket.click

{
        url: String;
        ActivityId: String;
        TaskAwardId: String;
        TaskAwardItemId: String;
}

领取奖券奖品点击事件。
触发该事件后,返回以下参数:

  • url:奖品链接。
  • ActivityId:直播间活动 ID。
  • TaskAwardId:抽奖配置 ID。
  • TaskAwardItemId:累计观看抽奖的奖品 ID。

taskAwardPanel.pop

{
     config: TaskAwardConfig | null;
     viewedTime: Number;
     isLogin: Boolean;
     winningRecordMap: Map<String, IRecordInfo>
}

抽奖面板弹出事件。
触发该事件后,返回以下参数:

  • configTaskAwardConfig 类型。本次累计观看抽奖活动的抽奖配置信息。主要包含以下参数:
    • TaskAwardId:String 类型。本次累计观看抽奖活动的 ID。
    • TaskAwardRuleITaskAwardItem[]类型。抽奖规则。主要包含以下参数:
      • index:Number 类型。奖品序号,第一个奖品序号为 0,第二个奖品序号为 1,以此类推。
      • TaskAwardItemId:String 类型。奖品 ID。
      • WatchTime:Number 类型。累计观看时长要求。单位:分钟。
    • TaskAwardStartTime:Number 类型。Unix 秒级时间戳。本次累计观看抽奖活动的开始时间。
    • TaskAwardEndTime:Number 类型。Unix 秒级时间戳。本次累计观看抽奖活动的结束时间。
    • TaskAwardStatus:本次累计观看抽奖活动的状态。
      • NULL(-1):没有抽奖活动,预留字段。
      • INIT(0):初始化,即未到活动开始时间。
      • START(1) :活动进行中。
      • END(2):活动已结束。
      • CLOSE(3):活动已关闭。
  • viewedTime:当前观众累计的观看时长。单位:秒。
  • isLogin:当前观众是否登录直播间。
    • true:已登录。
    • false:未登录。
  • winningRecordMap:当前观众的中奖记录。

taskAwardBox.click

{
    index: Number;
    WatchTime: Number;
}

累计观看抽奖中奖结果点击事件。
触发该事件后,返回以下参数:

  • index:抽奖宝箱序号。从 0 开始计数。
  • WatchTime:累计观看时长。单位:分钟。

share.click

分享点击事件。在PC 端单击分享,移动端点击复制链接保存二维码时会触发该事件。

poster.click

邀请海报点击事件。

adFloating.click

{
    AdvertisementRedirectUrl: String
}

浮标广告点击事件。该事件仅在企业直播控制台配置跳转链接后才会触发。
触发该事件后,返回浮标广告的跳转链接。
您可以通过设置 disableAdFloatingRedirect 参数值为 true 并监听该事件,实现浮标广告的自定义跳转逻辑。

adMiddle.click

{
    AdvertisementRedirectUrl: String
}

页中广告点击事件。该事件仅在企业直播控制台配置跳转链接后才会触发。
触发该事件后,返回页中广告的跳转链接。
您可以通过设置 disableAdMiddleRedirect 参数值为 true 并监听该事件,实现页中广告的自定义跳转逻辑。

adAccount.click

{
    AccountHeadRedirectUrl: String
}

主播账号点击事件。该事件仅在企业直播控制台配置跳转链接后才会触发。
触发该事件后,返回主播账号的跳转链接。
您可以通过设置 disableAdAccountRedirect 参数值为 true 并监听该事件,实现主播账号的自定义跳转逻辑。

ready

SDK 初始化完成事件,但并不代表播放器已经开始播放视频。

menu.click

{
     terminal:"pc" | "mobile",layout:"portrait",tab:Number
}

菜单栏点击事件。
触发该事件后,返回以下参数:

  • terminal:String 类型。观众的终端类型。
    • "pc":PC 端。
    • "mobile":移动端。
  • layout:String 类型。当观众在移动端竖屏直播间中点击时才会返回此参数,参数值为 "portrait"
  • tab:Number 类型。菜单类型。
    • 3: 聊天互动菜单。
    • 31:热门评论菜单。
    • 5:聚合直播菜单。
    • 2:商品卡片菜单。
    • 1:图文菜单。
    • 4:互动工具菜单。
    • 6:互动问答菜单。
    • 7:内嵌链接菜单。
    • 61:邀请榜单菜单。

thumbs.click

{
    count: Number;
}

直播间点赞事件。
触发该事件后,返回点赞数量。

permissionMode2.need

通过该事件判断是否需要将 mode 的值从 1 切换为 2
mode=1disabledLogin=true 时,观众点击关注主播后触发该事件。
触发该事件后,您需触发自有账号系统的登录流程并通过 updateMode2Token 方法将 mode=1 时的 Token 更新为 mode=2 时的 Token。

feature.click

{
    feature: String,
    status: Boolean
}

互动功能按钮点击事件。您可以通过设置 disableFeatureProcess 参数并监听该事件,阻止指定互动功能的后续执行。
触发该事件后,返回以下参数:

  • feature:互动功能。
    • Comment:评论功能。
    • Gift:礼物打赏功能。
    • Lottery:实时抽奖功能。
    • Thumb:评论点赞功能。
    • Luckymoney:红包功能。
    • Reservation:直播预约功能。
    • Question:互动问答功能。
    • CheckIn:签到功能。
    • Vote:投票功能。
    • Questionnaire:问卷功能。
    • TaskAward:累计观看抽奖功能。
  • status:是否阻止互动功能的后续执行。
    • true:阻止。
    • false:不阻止。

监听错误事件(on)

webSDK.on('error', (code, message, data) => {});

code 指错误码,message 指错误信息,data 指错误数据。

错误码

错误信息

错误数据

排查方法

101

初始化失败,缺少必要参数

初始化配置

确保 activityIdtokenservicemodemodules 已配置相应的参数值

102

token 校验失败

API 报错信息

确保 token 的参数值配置正确

103

未找到对应的渲染父节点

父节点 ID

确保 modules 下的每个 id 对应一个 DOM 节点

104

模块渲染失败

模块名称、报错 stack、报错信息

105

未找到对应的组件

父节点 ID

确保 modules 下的 mode 参数值配置正确

106

mobilemobile-portrait 模块仅支持单独使用

确保 mobilemobile-portrait 模块未与其他模块共用

201

直播间信息获取失败

请求数据

203

直播间暂未通过审核

确保直播间在企业直播控制台通过直播审核

204

直播间重复登录

触发事件(emit)

webSDK.emit('comment.send', '企业直播');

播放器相关事件

事件 key

请求参数

描述

player.play

播放事件。

player.pause

暂停播放事件。

player.pip

{
    ifShow: Boolean
}

PC 端小窗模式变化事件。

  • true:切换到小窗模式。
  • false:从小窗模式切换回原始播放画面。

其他事件

事件 key

请求参数

描述

comment.send

String

发送评论事件。

API(可选)
webSDK.destroy();

播放器相关 API

API

请求参数

描述

getPlayerInstance

获取播放器实例。

sendDanmu

{
  id: String;
  txt: String;
  isPresenter?: Boolean;
  isSelf?: Boolean;
  duration?: Number;
}

发送弹幕。

  • id:评论 ID。设置为直播间内全局唯一的随机值即可。
  • txt:弹幕内容。
  • isPresenter:弹幕是否为主持人发送。
  • isSelf:弹幕是否为当前用户发送。
  • duration:弹幕在屏幕存在的时长。单位:毫秒。

seekVideo

{
  time: Number
}

跳转到预告或回放的某个时间点。单位:秒。

说明

从未播放过的视频在 iOS 微信端无法通过该 API 跳转播放。

getVodPlayInfo

获取点播视频(预告和回放)的播放信息。
返回参数如下所示:

{
  vid: String;
  currentTime: Number;
  duration: Number;
}
  • vid:视频 ID,视频的唯一标识。
  • currentTime:当前播放位置。单位:秒。
  • duration:视频总时长。单位:秒。

switchLanguage

{
language: Number
}

切换至指定观看页语言。
您需要通过调用 getPageLanguage 获取观看页支持的语言并将指定语言作为请求参数传入该 API。
请求参数可选值如下所示。

  • 0:简体中文。
  • 1:英语。
  • 2:日语。
  • 3:繁体中文。
  • 4:韩语。

switchChannel

{
channel: Number
}

当直播状态为直播中时,切换至指定直播频道。当直播状态为回放时,切换至指定回放视频。
请求参数为 0,切换至直播间的第一个直播频道或回放视频,请求参数为 1,切换至直播间的第二个直播频道或回放视频,以此类推。

getPageLanguage

获取观看页支持的语言以及当前的观看页语言。
返回参数如下所示:

{
  languageOptional: [{
     label: 'String',
     value: Number,
     }],
   currentLang: {
     label: 'String',
     value: Number,
     }
}
  • languageOptional:观看页支持的语言。包含以下信息:
    • label:语言的具体名称。可选值:
      • 简中:简体中文。
      • English:英语。
      • 日本語:日语。
      • 繁中:繁体中文。
      • 韩语:韩语。
    • value:语言对应的数值。可选值:
      • 0:对应简体中文。
      • 1:对应英语。
      • 2:对应日语。
      • 3:对应繁体中文。
      • 4:对应韩语。
  • currentLang:当前的观看页语言。包含以下信息:
    • label:语言的具体名称。可选值:
      • 简中:简体中文。
      • English:英语。
      • 日本語:日语。
      • 繁中:繁体中文。
      • 韩语:韩语。
    • value:语言对应的数值。可选值:
      • 0:对应简体中文。
      • 1:对应英语。
      • 2:对应日语。
      • 3:对应繁体中文。
      • 4:对应韩语。

requestPip

Boolean

开启或关闭 PC 端的画中画模式。

  • true:开启画中画模式。
  • false:关闭画中画模式。

其他 API

API

请求参数

描述

destroy

销毁 SDK。

说明

如果当前观看页不再需要使用 SDK,可调用该方法销毁 SDK 释放资源,但不建议在销毁 SDK 后再对 SDK 进行重建。如果需要再次使用 SDK,建议在新的观看页集成 SDK 而不是销毁并重建 SDK。

updateModulesConf

{
  modules: [],
  options: {}
}

动态更新 SDK 部分配置。
例如,您可以通过调用该 API 实现移动端视频小窗模式。效果详见移动端视频小窗模式 Demo

updateMode2Token

String

更新公开权限 Token(mode = 1)为带有用户信息的 Token(mode = 2)。使用场景可参见 Demo 体验 中的第三方用户态直播间

getActivityInfos

String

获取页头图、页头广告以及移动端背景图、背景色的控制台配置信息。

  • 请求参数为 HeaderAd 时,可获取以下信息:

    {
        MobileHeaderImageUrl: String,
        PCHeaderImageUrl: String,
        IsHeaderAdEnable: Number
        HeaderAd: {
            IsPageHeaderAdFloatingEnable: Number,
            AdvertisementRedirectUrl: String,
        }
    
    }
    
    • MobileHeaderImageUrl:移动端页头图 URL。
    • PCHeaderImageUrl:PC 端页头图 URL。
    • IsHeaderAdEnable:页头广告是否开启。
      • 0:未开启。
      • 1:开启。
    • IsPageHeaderAdFloatingEnable:页头广告交互展示样式。
      • 0:点击页头广告后,广告在新页面展示,观众无法同时观看直播与广告。
      • 1:点击页头广告后,广告在直播间内浮层展示,观众可在看直播的同时查看广告。仅移动端生效。
    • AdvertisementRedirectUrl:页头广告的跳转链接。
  • 请求参数为 MobileBack 时,可获取以下信息:

    {
        MobileBackImage: String,
        MobileBackgroundColor: String,
        IsMobileBackImageEnable: Number,
    }
    
    • MobileBackImage:移动端背景图 URL。
    • MobileBackgroundColor:移动端背景色。
    • IsMobileBackImageEnable:移动端是否开启背景图或背景色。
      • 0:关闭背景图。
      • 1:开启背景图。
      • 2:开启背景色。

常见问题

Web 观播 SDK 常见问题