live-preview 直播预览流组件
收藏可以在小程序内展示抖音直播预览流的组件。
组件包含两个区域：头部区域以及直播预览流区域。
- •头部区域包含主播抖音头像、主播抖音名称，点击头像可以跳转主播抖音主页；
- •直播预览流区域可以在小程序内观看直播，点击直播可以跳转直播间。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
aweme-id | string | | 是 | 主播的抖音号（可在抖音app查看） | 2.81.0 |
title | string | | 否 | 直播描述文案，仅展示2行字符，超过则不展示，若未填写则采用直播间的标题文案 | 2.81.0 |
image-src | string | | 否 | 图片banner地址，仅支持本地地址 banner 展示静态活动图片 ，点击banner不进入抖音直播间； 未放置banner图则使用默认的透明兜底图片 | 2.81.0 |
hide-header | boolean | false | 否 | 是否隐藏组件头部，头部包含主播抖音头像，主播抖音名称 | 2.81.0 |
bindUserPage | function | | 否 | 进入抖音个人主页回调 | 2.81.0 |
bindLiveRoom | function | | 否 | 进入抖音直播间回调 | 2.81.0 |
bindLiveStatus | function | | 否 | 直播间状态变化回调 （比如说主播未开播、主播关播） | 2.81.0 |
binderror | function | | 否 | 组件出错信息回调 | 2.81.0 |
bindUserPage 事件对象的 detail
object 类型，属性如下：
属性名 | 类型 | 说明 | 最低支持版本 |
errMsg | string | 描述 | 2.81.0 |
错误说明
errMsg | 说明 | 最低支持版本 |
Successfully jumped onto the user page | 成功跳转抖音主页 | 2.81.0 |
bindLiveRoom 事件对象的 detail
object 类型，属性如下：
属性名 | 类型 | 说明 | 最低支持版本 |
errMsg | string | 描述 | 2.81.0 |
错误说明
errMsg | 说明 | 最低支持版本 |
Successfully entered the live room | 成功跳转直播间 | 2.81.0 |
bindLiveStatus 事件对象的 detail
object 类型，属性如下：
属性名 | 类型 | 说明 | 最低支持版本 |
errMsg | string | 描述 | 2.81.0 |
错误说明
errMsg | 说明 | 最低支持版本 |
live | 直播主正在直播 | 2.81.0 |
offline | 直播主未开播 | 2.81.0 |
waiting | 网络中断/主播下播等流突然无法获取的状态 | 2.81.0 |
binderror 事件对象的 detail
object 类型，属性如下：
属性名 | 类型 | 说明 | 最低支持版本 |
errMsg | string | 错误描述 | 2.81.0 |
错误说明
errMsg | 说明 | 最低支持版本 |
awemeId not support | 抖音号没有在开发者后台申请 直播预览流组件 能力。 | 2.92.0 |
awemeId not exist | 抖音号不存在 | 2.92.0 |
params awemeId is required and must be string type | 缺少 参数 awemeId 或参数 awemeId 类型错误 | 2.81.0 |
params title type is not string type | 参数 title 类型错误 | 2.81.0 |
params imageSrc type is not string type | 参数 imageSrc 类型错误 | 2.81.0 |
params hideHeader type is not boolean type | 参数 hideHeader 类型错误 | 2.81.0 |
awemeId is invalid | 无效的 awemeId | 2.81.0 |
fail to load image | 无法读取 imageSrc | 2.81.0 |
cannot jump to the home page | 主播抖音页链接不合法 | 2.81.0 |
live url invalid | 获取的预览流链接无效 | 2.81.0 |
player error | 播放器内部错误 | 2.81.0 |
扫码体验
代码示例
<live-preview awemeId="xxx" binderror="onPreviewError" hideHeader="{{hideHeader}}" bindUserPage="onPreviewUserPage" bindLiveRoom="onPreviewLiveRoom" bindLiveStatus="onPreviewLiveStatus" ></live-preview>
Component({ data: { hideHeader: false, }, methods: { onPreviewError(err) { console.log("preview error", err); }, onPreviewUserPage(res) { console.log("onPreviewUserPage", res); }, onPreviewLiveRoom(res) { console.log("onPreviewLiveRoom", res); }, onPreviewLiveStatus(res) { console.log("onPreviewLiveStatus", res); }, }, });
Bug & Tip
- •Tip：一个页面只能有一个 <live-preview /> 组件。
- •Tip：使用该功能前开发者需要去开发者后台为对应的抖音号申请直播预览流组件能力。
