live-preview 直播预览流组件

收藏
我的收藏
基础库 2.81.0 开始支持本组件,低版本需做兼容处理
可以在小程序内展示抖音直播预览流的组件。
组件包含两个区域:头部区域以及直播预览流区域。
    头部区域包含主播抖音头像、主播抖音名称,点击头像可以跳转主播抖音主页;
    直播预览流区域可以在小程序内观看直播,点击直播可以跳转直播间。
使用该功能前开发者需要去开发者后台为对应的抖音号申请直播预览流组件能力,详情见引导跳转到直播间能力

属性说明

属性名
类型
默认值
必填
说明
最低支持版本
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:使用该功能前开发者需要去开发者后台为对应的抖音号申请直播预览流组件能力。