live-player

live-player

基础库 1.7.0 开始支持，低版本需做兼容处理。

小程序插件 ：支持，需要小程序基础库版本不低于 2.3.0

微信 Windows 版 ：支持

微信 Mac 版 ：支持

微信 鸿蒙 OS 版 ：支持

相关文档: wx.createLivePlayerContext

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述

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

申请开通

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

通用属性

| 属性| 类型| 默认值| 必填| 说明| 最低版本 ---|---|---|---|---|---|--- | 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 时触发小窗 | picture-in-picture-init-position| string| | 否| 小窗模式下小窗的初始显示位置，格式为 (alignment, y)，其中 alignment 表示小窗吸附屏幕左侧还是右侧，可选值为 left、right，y 代表小窗最顶部所在的屏幕高度百分比| 3.3.0 | 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| 不发送 | enable-casting| boolean| false| 否| 是否支持投屏。开启后，可以通过 LivePlayerContext 上相关方法进行操作。| 2.32.0 | 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 | bindcastinguserselect| eventhandler| | 否| 用户选择投屏设备时触发 detail = { state: “success”/”fail“ }| 2.32.0 | bindcastingstatechange| eventhandler| | 否| 投屏成功/失败时触发 detail = { type, state: “success”/”fail“ }| 2.32.0 | bindcastinginterrupt| eventhandler| | 否| 投屏被中断时触发| 2.32.0

状态码

网络状态数据

小窗特性说明

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

1. push 模式，即从当前页跳转至下一页时出现小窗（页面栈push）

2. pop 模式，即离开当前页面时触发（页面栈pop）

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

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

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

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

• 小窗出现后，用户可点击小窗右上角的关闭按钮或调用 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)
  }
})