创新互联小程序教程：微信小程序媒体组件live-player

live-player

基础库 1.7.0 开始支持，低版本需做兼容处理。
我们提供的服务有：做网站、成都做网站、微信公众号开发、网站优化、网站认证、红河ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的红河网站制作公司

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

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

一级类目/主体类型	二级类目	小程序内容场景
社交	直播	涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长 7 天左右
教育	在线视频课程	网课、在线培训、讲座等教育类直播
医疗	互联网医院，公立医疗机构，私立医疗机构	问诊、大型健康讲座等直播
金融	银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融	金融产品视频客服理赔、金融产品推广直播等
汽车	汽车预售服务	汽车预售、推广直播
政府主体帐号	/	政府相关工作推广直播、领导讲话直播等
工具	视频客服	不涉及以上几类内容的一对一视频客服服务，如企业售后一对一视频服务等
IT科技	多方通信	为多方提供电话会议/视频会议等服务

属性	类型	默认值	必填	说明	最低版本
src	string		否	音视频地址。目前仅支持 `flv`, `rtmp` 格式	1.7.0
mode	string	live	否	模式	1.7.0
autoplay	boolean	false	否	自动播放	1.7.0
muted	boolean	false	否	是否静音	1.7.0
orientation	string	vertical	否	画面方向	1.7.0
object-fit	string	contain	否	填充模式，可选值有 `contain`，`fillCrop`	1.7.0
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
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
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

mode 的合法值

值	说明	最低版本
live	直播
RTC	实时通话，该模式时延更低

orientation 的合法值

值	说明	最低版本
vertical	竖直
horizontal	水平

object-fit 的合法值

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

sound-mode 的合法值

值	说明	最低版本
speaker	扬声器
ear	听筒

picture-in-picture-mode 的合法值

值	说明	最低版本
[]	取消小窗
push	路由 push 时触发小窗
pop	路由 pop 时触发小窗

状态码

代码	说明
2001	已经连接服务器
2002	已经连接 RTMP 服务器,开始拉流
2003	网络接收到首个视频数据包(IDR)
2004	视频播放开始
2005	视频播放进度
2006	视频播放结束
2007	视频播放Loading
2008	解码器启动
2009	视频分辨率改变
-2301	网络断连，且经多次重连抢救无效，更多重试请自行重启播放
-2302	获取加速拉流地址失败
2101	当前视频帧解码失败
2102	当前音频帧解码失败
2103	网络断连, 已启动自动重连
2104	网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀
2105	当前视频播放出现卡顿
2106	硬解启动失败，采用软解
2107	当前视频帧不连续，可能丢帧
2108	当前流硬解第一个I帧失败，SDK自动切软解
3001	RTMP -DNS解析失败
3002	RTMP服务器连接失败
3003	RTMP服务器握手失败
3005	RTMP 读/写失败，之后会发起网络重试

网络状态数据

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，为 0 时表示没有任何抖动，值越大表明网络抖动越大，网络越不稳定
videoWidth	视频画面的宽度
videoHeight	视频画面的高度

小窗特性说明

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

push 模式，即从当前页跳转至下一页时出现小窗（页面栈push）
pop 模式，即离开当前页面时触发（页面栈pop）
以上两种路由行为均触发小窗

此外，小窗还支持以下特性：

小窗容器尺寸会根据原组件尺寸自动判断
点击小窗，用户会被导航回小窗对应的播放器页面
小窗出现后，用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

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

提示：

live-player 默认宽度300px、高度225px，可通过wxss设置宽高。
开发者工具上暂不支持。

示例代码

Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})

本文题目：创新互联小程序教程：微信小程序媒体组件live-player
转载注明：http://www.mswzjz.com/qtweb/news1/163101.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容