开发
API

live-player

基础库版本 1.44.0 开始支持本组件,安卓 1.38.1 起支持。

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

暂只针对以下服务类目开放:

一级类目/主体类型二级类目三级类目小程序内容场景
社交类直播直播涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右

属性说明

属性名类型默认值必填说明最低支持版本
srcstring视频地址。目前仅支持 flv,支持跨域1.44.0
autoplaybooleanfalse是否自动播放1.44.0
mutedbooleanfalse是否静音1.44.0
orientationstringvertical画面朝向,vertical 为竖直,horizontal 为水平1.44.0
object-fitstringcontain填充模式,可选值有 contain,fillCrop1.44.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竖直
horizontal水平

object-fit 取值

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

状态码

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

代码示例

开发者工具中预览

<live-player
  id="my-player"
  src="https://pull-flv-l6.ixigua.com/game/stream-106078795436654621.flv"
  autoplay
  bindstatechange="statechange"
>
  <button bindtap="requestFs" size="mini" hidden="{{isFullscreen}}">
    进入全屏
  </button>
  <button bindtap="exitFs" size="mini" hidden="{{!isFullscreen}}">
    退出全屏
  </button>
</live-player>
Page({
  data: {
    fullScreenDirection: 0,
  },
  statechange(e) {
    console.log("状态变化", e);
  },
  requestFs() {
    if (!this.ctx) {
      this.ctx = tt.createLivePlayerContext("my-player");
    }
    console.log("fullScreenDirection", this.data.fullScreenDirection);
    this.ctx.requestFullScreen({
      direction: Number(this.data.fullScreenDirection),
    });
  },
  exitFs() {
    this.ctx.exitFullScreen();
  },
});

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip:抖音安卓 890、ios753 以上版本支持,头条安卓 746、ios753 以上版本支持。
  • Tip:部分安卓设备在切换全屏时偶现闪动的体验问题。
  • Tip:基础库 1.66.0 以上版本支持页面多实例同时播放。
点击纠错
评价此篇文档