uniapp live-player组件如何使用

在uniapp中使用live-player组件时遇到了一些问题，想请教大家具体的使用方法。比如如何正确引入组件、设置直播源地址、控制播放和暂停等操作。另外，还想了解这个组件是否支持全屏播放、弹幕功能以及在不同平台（iOS/Android）上的兼容性如何？希望能得到详细的代码示例和注意事项说明。

2 回复

uniapp的live-player组件用于直播播放。在template中直接使用<live-player>标签，设置src为直播流地址，并配置autoplay等属性即可。需要配置manifest.json中的直播权限。


在 UniApp 中，live-player 组件用于在小程序或 App 端播放直播流（如 RTMP、FLV 等格式），但注意它不支持 H5 平台。以下是基本使用方法、属性和示例代码：

基本用法

  1. 引入组件：在页面或组件的 .vue 文件中直接使用 <live-player> 标签。
  2. 设置必要属性：如 src（直播流地址）和 mode（播放模式）。
  3. 处理事件：通过绑定事件（如 @statechange）监听播放状态。

核心属性

  • src：直播流地址（必填，例如 RTMP 链接）。
  • mode：播放模式，可选 live（直播）或 RTC（实时通话，默认 live）。
  • autoplay：是否自动播放（默认 false）。
  • muted：是否静音（默认 false）。
  • orientation：画面方向，可选 vertical（竖向）或 horizontal（横向）。
  • object-fit：视频填充模式，如 contain 或 cover。

事件

  • @statechange：播放状态变化时触发（如开始、停止、错误）。
  • @fullscreenchange：全屏状态变化时触发。
  • @netstatus：网络状态通知（仅微信小程序）。

示例代码

<template>
  <view>
    <live-player
      src="rtmp://example.com/live/stream"
      mode="live"
      autoplay
      muted
      @statechange="onStateChange"
      @fullscreenchange="onFullscreenChange"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onStateChange(e) {
      console.log('播放状态变化:', e.detail.code);
      // 状态码示例：2001（开始），2002（停止），2003（错误）
    },
    onFullscreenChange(e) {
      console.log('全屏状态:', e.detail.fullscreen);
    }
  }
}
</script>

注意事项

  • 平台限制：仅支持微信小程序、App 端（部分平台需配置原生插件），H5 不可用。
  • 测试流地址：确保 src 为有效直播流，可用公开测试地址验证。
  • 权限问题：在微信小程序中，需在 app.json 中声明 live-player 组件权限（若使用插件）。
  • 错误处理：通过 @statechange 监听错误码（如 2003），并提示用户。

如需操作播放器（如暂停），可通过 this.$refs 获取实例调用方法（部分平台支持）。建议参考 UniApp 官方文档 获取最新信息。

回到顶部