uniapp的live-player组件如何使用

我在uniapp中使用live-player组件时遇到了一些问题，想请教一下大家：

  1. 这个组件支持哪些直播流协议？rtmp和flv都能用吗？
  2. 在微信小程序和H5端的使用方法有什么不同？
  3. 如何设置自动播放和全屏模式？
  4. 遇到黑屏或者无法播放的情况该怎么排查？
  5. 有没有性能优化的建议？特别是长时间播放的场景。

官方文档看得不是很明白，希望有经验的朋友能分享一下实际使用中的技巧和注意事项。

2 回复

uniapp的live-player组件用于直播播放，需在manifest.json配置直播权限。示例代码：

<live-player src="直播地址" autoplay></live-player>

注意：仅支持部分平台，如微信小程序。需配置白名单域名。


UniApp 的 live-player 组件用于在小程序或 App 中播放直播流，支持 RTMP、FLV、HLS 等协议。以下是基本使用方法及注意事项：

1. 基本用法

在 .vue 文件的 template 中添加组件：

<live-player 
  src="https://example.com/live/stream.flv" 
  mode="live"
  autoplay
  muted
  @statechange="onStateChange"
  @error="onError"
/>

2. 关键属性说明

  • src：直播流地址（必需）。
  • mode：播放模式，live（直播）或 RTC（实时通话）。
  • autoplay：自动播放。
  • muted：静音（部分平台要求静音才能自动播放）。
  • orientation：画面方向（横屏/竖屏）。

3. 事件监听

通过事件处理播放状态和错误：

methods: {
  onStateChange(e) {
    console.log('状态变化:', e.detail.code);
    // 状态码：2001（连接成功），2002（开始拉流）等
  },
  onError(e) {
    console.error('播放错误:', e.detail.errMsg);
  }
}

4. 平台差异

  • 微信小程序：需在 manifest.json 配置 "live-player" 权限。
  • App 端：Android 可能需额外处理硬件加速兼容性。

5. 注意事项

  • 测试时使用 可公开访问的直播流地址。
  • 部分平台要求域名加入白名单。
  • 若播放失败，检查网络和流地址有效性。

通过以上步骤即可快速集成直播功能。遇到具体问题时，可查阅 UniApp 官方文档获取最新配置说明。

回到顶部