zl程序教程

您现在的位置是:首页 >  其他

当前栏目

微信小程序官方组件展示之媒体组件live-player源码

官方组件源码微信程序 展示 媒体 Live
2023-06-13 09:13:52 时间

以下将展示微信小程序之媒体组件live-player源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。

功能描述:

实时音视频播放(v2.9.1 起支持同层渲染)。

申请开通

暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

一级类目/主体类型

二级类目

小程序内容场景

社交

直播

涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右

教育

在线视频课程

网课、在线培训、讲座等教育类直播

医疗

互联网医院,公立医疗机构,私立医疗机构

问诊、大型健康讲座等直播

金融

银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融

金融产品视频客服理赔、金融产品推广直播等

汽车

汽车预售服务

汽车预售、推广直播

政府主体帐号

/

政府相关工作推广直播、领导讲话直播等

IT科技

多方通信;音视频设备

为多方提供电话会议/视频会议等服务;智能家居场景下控制摄像头

房地产服务

房地产营销

房地产营销直播服务、在线音视频带看等

属性说明:

属性

类型

默认值

必填

说明

最低版本

src

string

音视频地址。目前仅支持 flv, rtmp 格式

1.7.0

mode

string

live

模式

1.7.0

合法值

说明

live

直播

RTC

实时通话,该模式时延更低

autoplay

boolean

FALSE

自动播放

1.7.0

muted

boolean

FALSE

是否静音

1.7.0

orientation

string

vertical

画面方向

1.7.0

合法值

说明

vertical

竖直

horizontal

水平

object-fit

string

contain

填充模式,可选值有 contain,fillCrop

1.7.0

合法值

说明

contain

图像长边填满屏幕,短边区域会被填充⿊⾊

fillCrop

图像铺满屏幕,超出显示区域的部分将被截掉

background-mute

boolean

FALSE

进入后台时是否静音(已废弃,默认退后台静音)

1.7.0

min-cache

number

1

最小缓冲区,单位s(RTC 模式推荐 0.2s)

1.7.0

max-cache

number

3

最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。

1.7.0

sound-mode

string

speaker

声音输出方式

1.9.90

合法值

说明

speaker

扬声器

ear

听筒

auto-pause-if-navigate

boolean

TRUE

当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放

2.5.0

auto-pause-if-open-native

boolean

TRUE

当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放

2.5.0

picture-in-picture-mode

string/Array

设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"])

2.10.3

合法值

说明

[]

取消小窗

push

路由 push 时触发小窗

pop

路由 pop 时触发小窗

enable-auto-rotation

boolean

FALSE

是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效

2.11.0

referrer-policy

string

no-referrer

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;

2.13.0

合法值

说明

origin

发送完整的referrer

no-referrer

不发送

bindstatechange

eventhandle

播放状态变化事件,detail = {code}

1.7.0

bindfullscreenchange

eventhandle

全屏变化事件,detail = {direction, fullScreen}

1.7.0

bindnetstatus

eventhandle

网络状态通知,detail = {info}

1.9.0

bindaudiovolumenotify

eventhandler

播放音量大小通知,detail = {}

2.10.0

bindenterpictureinpicture

eventhandler

播放器进入小窗

2.11.0

bindleavepictureinpicture

eventhandler

播放器退出小窗

2.11.0

状态码

代码

说明

2001

拉流:已经连接服务器

2002

拉流:已经连接 RTMP 服务器,开始拉流

2003

拉流:⽹络接收到⾸个视频数据包(IDR)

2004

拉流:视频播放开始

2005

拉流:视频播放进度

2006

拉流:视频播放结束

2007

拉流:视频播放Loading

2008

拉流:解码器启动

2009

拉流:视频分辨率改变

2030

⾳频设备发⽣改变,即当前的输⼊输出设备发⽣改变,⽐如⽿机被拔出

2032

拉流:视频渲染⾸帧事件

2101

拉流:当前视频帧解码失败

2102

拉流:当前⾳频帧解码失败

2103

拉流:⽹络断连, 已启动⾃动重连

2104

拉流:⽹络来包不稳:可能是下⾏带宽不⾜,或由于主播端出流不均匀

2105

拉流:当前视频播放出现卡顿

2106

拉流:硬解启动失败,采⽤软解

2107

拉流:当前视频帧不连续,可能丢帧

2108

拉流:当前流硬解第⼀个 I 帧失败,SDK⾃动切软解

3001

拉流:RTMP -DNS解析失败

3002

拉流:RTMP服务器连接失败

3003

拉流:RTMP服务器握⼿失败

3005

拉流:RTMP 读/写失败,之后会发起⽹络重试

-2301

拉流:⽹络断连,且经多次重连⽆效,请⾃⾏重启拉流

-2302

拉流:获取拉流地址失败

网络状态数据

键名

说明

videoBitrate

当前视频编/码器输出的比特率,单位 kbps

audioBitrate

当前音频编/码器输出的比特率,单位 kbps

videoFPS

当前视频帧率

videoGOP

当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s

netSpeed

当前的发送/接收速度

netJitter

网络抖动情况,为 0 时表示没有任何抖动,值越大表明网络抖动越大,网络越不稳定

netQualityLevel

网络质量:0:未定义 1:最好 2:好 3:一般 4:差 5:很差 6:不可用

videoWidth

视频画面的宽度

videoHeight

视频画面的高度

videoCache

缓冲的视频总时长,单位毫秒

audioCache

缓冲的音频总时长,单位毫秒

vDecCacheSize

解码器中缓存的视频帧数 (Android 端硬解码时存在)

vSumCacheSize

缓冲的总视频帧数,该数值越大,播放延迟越高

avPlayInterval

音画同步错位时间(播放),单位 ms,此数值越小,音画同步越好

avRecvInterval

音画同步错位时间(网络),单位 ms,此数值越小,音画同步越好

audioCacheThreshold

音频缓冲时长阈值,缓冲超过该阈值后,播放器会开始调控延时

小窗特性说明

live-player 小窗支持以下三种触发模式(在组件上设置 picture-in-picture-mode 属性):

1.push 模式,即从当前页跳转至下一页时出现小窗(页面栈push)

2.pop 模式,即离开当前页面时触发(页面栈pop)

3.以上两种路由行为均触发小窗

此外,小窗还支持以下特性:

l 小窗容器尺寸会根据原组件尺寸自动判断

l 点击小窗,用户会被导航回小窗对应的播放器页面

l 小窗出现后,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

当播放器进入小窗模式后,播放器所在页面处于 hide 状态(触发 onHide 生命周期),该页面不会被销毁。当小窗被关闭时,播放器所在页面会被 unload (触发 onUnload 生命周期)。

Bug & Tip

1.tip:live-player 默认宽度300px、高度225px,可通过 wxss 设置宽高。

2.tip:开发者工具上暂不支持。

3.tip: 相关介绍和原理可参考此文章

示例代码

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
 statechange(e) {
 console.log('live-player code:', e.detail.code)
 },
 error(e) {
 console.error('live-player error:', e.detail.errMsg)
 }
})

版权声明: 本站所有内容均由互联网收集整理、上传,如涉及版权问题,请联系我们第一时间处理。

原文链接地址:https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html