开发
API

live-player

基础库 1.44.0 开始支持本组件。

实时视频播放器。 live-player 组件还提供丰富的 api, 来控制实时视频的播放、暂停、全屏等,详请见 tt.createLivePlayerContext

属性说明

属性名类型默认值必填说明最低支持版本
srcstring视频地址。目前支持 flv、rtmp 和 hls,支持跨域1.44.0
autoplaybooleanfalse是否自动播放1.44.0
mutedbooleanfalse是否静音1.44.0
orientationstringvertical画面朝向,vertical 为竖直,horizontal 为水平,详情见 orientation 的合法值1.44.0
object-fitstringcontain填充模式,可选值有 contain,fillCrop,详情见 object-fit 的合法值1.44.0
signatureSignature设置署名水印2.48.0
bindstatechangeEventHandle播放状态变化事件,detail = {code}1.44.0
bindfullscreenchangeEventHandle全屏变化事件,detail = {direction, fullScreen}1.44.0
binderrorEventHandle播放错误事件1.44.0

src

直播流地址如果跨域,则必须满足 cors 约束才能正常播放,具体设置可参考:

  • Access-Control-Allow-Headers: x-requested-with
  • Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
  • Access-Control-Allow-Origin: *
  • Access-Control-Max-Age: 1800

orientation 的合法值

说明最低支持版本
vertical竖直1.44.0
horizontal水平1.44.0

object-fit 的合法值

说明最低支持版本
contain图像长边填满屏幕,短边区域会被填充⿊⾊1.44.0
fillCrop图像铺满屏幕,超出显示区域的部分将被截掉1.44.0

Signature 类型说明

object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
enablebooleantrue是否显示署名水印2.48.0
contentstring署名水印内容2.48.0
positionnumber0署名水印位置:0(右上), 1(右下), 2(左下), 3(左上)2.48.0
colorColor#FFFFFF署名水印颜色,只支持 HEX 格式2.48.0

状态码

code说明
2004视频播放开始
2005视频播放进度
2006视频播放结束
2007视频播放缓冲
2103网络出错,正在抢救
-2301网络失败,无法播放
2201审核封禁

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<view>
  <live-player
    id="myLive"
    src="{{src}}"
    muted="{{muted}}"
    orientation="{{orientation}}"
    object-fit="{{objectFit}}"
    autoplay="{{autoplay}}"
  >
  </live-player>
  <div class="section">
    <button type="primary" bindtap="livePlay">开始播放 play</button>
    <button type="primary" bindtap="liveStop">停止播放 stop</button>
    <button type="primary" bindtap="liveMute">{{muted? '': '不'}}静音</button>
    <button type="primary" bindtap="changeObjectFit">
      object-fit改变为{{objectFit}}
    </button>
  </div>
</view>
Page({
  data: {
    autoplay: false,
    src:
      "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/bytdance.flv",
    objectFit: "contain",
    orientation: "vertical",
    muted: false,
    ctx: undefined,
  },
  onReady() {
    this.ctx = tt.createLivePlayerContext("myLive");
  },
  livePlay() {
    this.ctx.play();
  },
  liveStop() {
    this.ctx.stop();
  },
  liveMute() {
    this.setData({
      muted: !this.data.muted,
    });
  },
  changeObjectFit() {
    this.setData({
      objectFit: this.data.objectFit === "contain" ? "fillCrop" : "contain",
    });
  },
});

Bug & Tip

  • Tip:抖音 Android 890、iOS 753 以上版本支持,头条 Android 746、iOS 753 以上版本支持;
  • Tip:部分 Android 设备在切换全屏时偶现闪动的体验问题;
  • Tip:基础库 1.66.0 以上版本支持页面多实例同时播放;
  • Tip:小程序开发者工具中的 live-player 组件不支持 rtmp 格式;
  • Tip:基础库 2.21.0 版本以前,只有服务类目为“社交类-社交-直播”的小程序可以使用该组件。从 2.21.0 版本开始,只有申请了权限的小程序才能够使用该组件。如需要使用,请下载飞书,搜索添加产品联系人邹露雨申请使用该功能的权限。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助