live-player
基础库 1.44.0 开始支持本组件。
实时视频播放器。 live-player 组件还提供丰富的 api, 来控制实时视频的播放、暂停、全屏等,详请见 tt.createLivePlayerContext。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
src | string | 是 | 视频地址。目前支持 flv、rtmp 和 hls,支持跨域 | 1.44.0 | |
autoplay | boolean | false | 否 | 是否自动播放 | 1.44.0 |
muted | boolean | false | 否 | 是否静音 | 1.44.0 |
orientation | string | vertical | 否 | 画面朝向,vertical 为竖直,horizontal 为水平,详情见 orientation 的合法值 | 1.44.0 |
object-fit | string | contain | 否 | 填充模式,可选值有 contain,fillCrop,详情见 object-fit 的合法值 | 1.44.0 |
signature | Signature | 否 | 设置署名水印 | 2.48.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 | 竖直 | 1.44.0 |
horizontal | 水平 | 1.44.0 |
object-fit 的合法值
值 | 说明 | 最低支持版本 |
---|---|---|
contain | 图像长边填满屏幕,短边区域会被填充⿊⾊ | 1.44.0 |
fillCrop | 图像铺满屏幕,超出显示区域的部分将被截掉 | 1.44.0 |
Signature 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
enable | boolean | true | 否 | 是否显示署名水印 | 2.48.0 |
content | string | 是 | 署名水印内容 | 2.48.0 | |
position | number | 0 | 否 | 署名水印位置:0(右上), 1(右下), 2(左下), 3(左上) | 2.48.0 |
color | Color | #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 格式。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助