抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台
  • 组件概述
  • 基础内容
  • 视图容器
  • 表单
  • 导航
  • 媒体
  • image 图片
  • video 视频
  • live-player 实时视频播放器
  • live-preview 直播预览流组件
  • camera 相机
  • rtc-room组件
  • 画布
  • 地图
  • 开放能力
  • 行业开放
  • 原生组件
  • 拓展组件
  • 小程序智能体
  • 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:使用该功能前开发者需要去开发者后台为对应的抖音号申请直播预览流组件能力。