live-player
基础库版本 1.44.0 开始支持本组件，安卓 1.38.1 起支持。
实时视频播放器。 live-player 组件还提供丰富的 api， 来控制实时视频的播放、暂停、全屏等，详见：tt.createLivePlayerContext。
暂只针对以下服务类目开放：
| 一级类目/主体类型 | 二级类目 | 三级类目 | 小程序内容场景 |
|---|---|---|---|
| 社交类 | 直播 | 直播 | 涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长 7 天左右 |
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| src | string | 是 | 视频地址。目前仅支持 flv，支持跨域 | 1.44.0 | |
| autoplay | boolean | false | 否 | 是否自动播放 | 1.44.0 |
| muted | boolean | false | 否 | 是否静音 | 1.44.0 |
| orientation | string | vertical | 否 | 画面朝向，vertical 为竖直，horizontal 为水平 | 1.44.0 |
| object-fit | string | contain | 否 | 填充模式，可选值有 contain，fillCrop | 1.44.0 |
| bindstatechange | eventhandle | 否 | 播放状态变化事件，detail = {code} | 1.44.0 | |
| bindfullscreenchange | eventhandle | 否 | 全屏变化事件，detail = {direction, fullScreen} | 1.44.0 | |
| binderror | eventhandle | 否 | 播放错误事件 | 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 以上版本支持页面多实例同时播放。
点击纠错
评价此篇文档