live-preview 直播预览流组件

更新时间 2024-07-24 02:58:49

我的收藏

基础库 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

扫码体验

代码示例

开发者工具中预览

html复制
<live-preview
  awemeId="xxx"
  binderror="onPreviewError"
  hideHeader="{{hideHeader}}"
  bindUserPage="onPreviewUserPage"
  bindLiveRoom="onPreviewLiveRoom"
  bindLiveStatus="onPreviewLiveStatus"
></live-preview>

js复制
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);
    },
  },
});