• live-player 实时视频播放器
  • 属性说明
    • orientation 有效值
    • object-fit 有效值
    • 主流格式支持
    • 主流编码格式支持
    • 状态码
    • 网络状态数据
  • 示例
    • 代码示例
  • Bug & Tip
  • Web 态 Tip
    • Tip1：在部分浏览器下，视频资源无法自动播放的解决方案
    • Tip2：视频类资源地址必须有文件扩展名（即文件后缀）
    • Tip3：在部分浏览器下，实时视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案
    • Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

live-player 实时视频播放器

v3.140.1 起支持同层渲染，更多请参考原生组件。从基础库版本 1.12.0 开始支持事件捕获、冒泡。

解释：实时视频播放器。live-player 组件默认宽度 300px 、高度 225px 。该组件还提供丰富的 API ，来控制实时视频的播放、暂停、全屏等，详见 swan.createLivePlayerContext 。只针对直播答题、直播服务类目开放，需要先通过类目审核，再在小程序管理后台，“开发管理 -> 功能管理”页面的“实时音视频播放”模块中自助开通该组件权限。

支持服务类目

属性说明

id

String

是

live-player 属性的唯一标志符

src

String

是

音视频地址，详见下方主流格式支持

autoplay

Boolean

false

否

自动播放

存在浏览器兼容问题，详见下方 Web 态 Tip1

muted

Boolean

false

否

是否静音

orientation

String

vertical

否

画面方向，有效值有 vertical、horizontal 。目前仅支持安卓端使用该属性

此属性对 Web 态不生效

object-fit

String

contain

否

填充模式，有效值：contain、fillCrop

background-mute

Boolean

false

否

进入后台时是否静音（已废弃，默认退台静音）

默认退台静音，设置为 false 后不生效

min-cache

Number

1

否

最小缓冲区（单位：s）

此属性对 Web 态不生效

max-cache

Number

3

否

最大缓冲区（单位：s）

此属性对 Web 态不生效

bindstatechange

EventHandle

否

播放状态变化事件，参考下方状态码，detail = {code}

bindnetstatus

EventHandle

否

网络状态变化通知，参考下方网络状态数据，detail = {info}

bindfullscreenchange

EventHandle

否

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

Web 态下监听到全屏事件时，无法检测全屏屏幕方向，因此 direction 属性始终为 0

orientation 有效值

object-fit 有效值

主流格式支持

主流编码格式支持

H.263

是

是

H.264

是

是

HEVC

是

是

MPEG-4

是

否

VP8

是

否

VP9

是

否

状态码

网络状态数据

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 id="myLive"
  
  
  
 src="{{src}}"
  
  
  
 autoplay="{{autoplay}}"
  
  
  
 muted="{{muted}}"
  
  
  
 orientation="{{orientation}}"
  
  
  
 object-fit="{{objectFit}}"
  
  
  
 min-cache="{{minCache}}"
  
  
  
 max-cache="{{maxCache}}"
  
  
  
 bind:statechange="statechange"
  
  
  
 bind:netstatus="netstatus"
  
  
  
 bind:fullscreenchange="fullscreenchange">
  
  
  
 
  
  
  
 
  
  
  
 开始播放
  
  
  
 停止播放
  
  
  
 
  
  
  
 静音
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 设置填充模式为包含
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

• Tip：支持 HLS、RTMP 以及 HTTP-FLV 协议。

Web 态 Tip

Tip1：在部分浏览器下，视频资源无法自动播放的解决方案

案例分析：
出于用户体验、节省流量等原因，iOS 的 Safari、版本号 66 及以上的 Chrome、以及大部分国产移动浏览器禁止视频在非静音状态下自动播放。因此，Web 态针对 live-player 组件中 autoplay 属性设置为 true 后做了如下处理：

• 对于 QQ、Android 微信、 QQ 浏览器等基于 X5 内核的平台，Web 态下设置的autoplay = true不生效，页面进入时，播放器上显示播放按钮供用户主动点击触发播放。
• 对于其他非 X5 内核的平台，为保证页面进入时可自动播放，会默认关闭声音播放，并显示“取消静音”按钮，供用户主动开启声音。
• 为“取消静音”和播放按钮设置了较高的 z-index 样式层级，开发者可以根据需要来决定是否覆盖这两类按钮。

由于浏览器种类众多，如出现自动播放相关新问题，请将案例反馈给我们，我们将统一记录并反馈进展。

Tip2：视频类资源地址必须有文件扩展名（即文件后缀）

由于浏览器无法解析资源格式。因此对于视频类资源，应在地址中通过后缀名显式声明资源格式，否则可能会导致视频无法正常播放：

• Web 态 live-player 组件目前支持 mp4、mov、m4v、ogg、m3u8 等格式，参见主流格式支持。
• 当 live-player 组件的 src 属性值没有文件扩展名，视频资源会被按照 mp4 格式来进行解码播放。

Tip3：在部分浏览器下，实时视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案

案例分析：
微信、百度 App、UC 等浏览器实现了自身的播放器控件，劫持了默认内核提供的播放器样式和逻辑，从而使得基于 H5 video 实现的 Web 态 live-player 组件出现了以下问题：

• 在 Android 系统的微信平台、百度 App 和 UC 等国产移动浏览器下，live-player 组件的播放器会覆盖到页面其他内容之上，且无法通过 z-index 控制层级，从而导致一些交互失效（比如无法上下滑动触发切换视频）。
• 在 OPPO 手机下的百度 App ，会出现小窗播放。

解决方案：
Web 态针对不同浏览器做了尽可能的修复，以解决此问题。已修复的包括 QQ、Android 微信、QQ 浏览器等基于 X5 内核的平台，百度 App 。但由于浏览器种类众多，有可能存在我们暂未覆盖到的情况。如仍遇到上述问题，请您将案例反馈给我们，我们将统一记录并反馈进展。

Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

案例分析：
微信、QQ、QQ 浏览器等实现了自身的播放控件，从而使得 live-player 组件在退出全屏时出现视频暂停播放的问题。

解决方案：
Web 态针对 Android 下的微信、QQ 等基于 X5 内核的平台在退出全屏时展示一个中间播放按钮，供用户点击来继续播放视频。iOS 下因无法监听退出全屏事件，此问题暂无法解决。