@tanzhenxing/zx-live-player v1.0.1

zx-live-player 组件

zx-live-player 是基于uni-app官方 live-player 组件的增强版封装，提供了更加易用的接口和更完善的功能。

平台支持

• App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。
• H5 下可用 video 播放符合 HTML5 规范的流媒体，rtmp 等非 HTML5 标准的流媒体格式，仅在部分支持 flash 的国内手机浏览器上可播放。

使用方法

基础用法

<template>
  <view>
    <zx-live-player
      id="myPlayer"
      :src="liveUrl"
      :autoplay="true"
      @statechange="onStateChange"
      @error="onError"
    />
  </view>
</template>

<script>
import zxLivePlayer from '@/components/zx-live-player/zx-live-player.vue'

export default {
  components: {
    zxLivePlayer
  },
  data() {
    return {
      liveUrl: 'rtmp://your-rtmp-url'
    }
  },
  methods: {
    onStateChange(e) {
      console.log('播放状态变化:', e.detail.code)
    },
    onError(e) {
      console.error('播放错误:', e.detail.errMsg)
    }
  }
}
</script>

完整示例

<template>
  <view>
    <zx-live-player
      id="myPlayer"
      :src="liveUrl"
      :autoplay="true"
      :muted="isMuted"
      :orientation="orientation"
      :object-fit="objectFit"
      :show-controls="true"
      :width="playerWidth"
      :height="playerHeight"
      @statechange="onStateChange"
      @netstatus="onNetStatus"
      @fullscreenchange="onFullScreenChange"
      @error="onError"
      ref="livePlayer"
    />
    
    <view class="control-panel">
      <button @click="takeSnapshot">截图</button>
      <button @click="toggleMute">{{ isMuted ? '取消静音' : '静音' }}</button>
      <button @click="reload">重新加载</button>
    </view>
  </view>
</template>

<script>
import zxLivePlayer from '@/components/zx-live-player/zx-live-player.vue'

export default {
  components: {
    zxLivePlayer
  },
  data() {
    return {
      liveUrl: 'rtmp://your-rtmp-url',
      isMuted: false,
      orientation: 'vertical', // 'vertical' 或 'horizontal'
      objectFit: 'contain', // 'contain' 或 'fillCrop'
      playerWidth: '100%',
      playerHeight: '400rpx'
    }
  },
  methods: {
    onStateChange(e) {
      console.log('播放状态变化:', e.detail.code)
      // 状态码说明:
      // 2001: 已经连接服务器
      // 2002: 已经连接服务器,开始拉流
      // 2003: 网络接收到首个视频数据包(IDR)
      // 2004: 视频播放开始
      // 2005: 视频播放进度
      // 2006: 视频播放结束
      // 2007: 视频播放Loading
      // 2008: 解码器启动
      // 2009: 视频分辨率改变
      // -2301: 网络断连，且经多次重连抢救无效，更多重试请自行重启播放
      // -2302: 获取加速拉流地址失败
      // 2101: 当前视频帧解码失败
      // 2102: 当前音频帧解码失败
      // 2103: 网络断连, 已启动自动重连
      // 2104: 网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀
      // 2105: 当前视频播放出现卡顿
      // 2106: 硬解启动失败，采用软解
      // 2107: 当前视频帧不连续，可能丢帧
      // 2108: 当前流硬解第一个I帧失败，SDK自动切软解
    },
    onNetStatus(e) {
      console.log('网络状态:', e.detail.info)
      // 网络状态信息包含:
      // videoBitrate: 当前视频编/码器输出的比特率，单位 kbps
      // audioBitrate: 当前音频编/码器输出的比特率，单位 kbps
      // videoFPS: 当前视频帧率
      // videoGOP: 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
      // netSpeed: 当前的发送/接收速度
      // netJitter: 网络抖动情况，抖动越大，网络越不稳定
      // videoWidth: 视频画面的宽度
      // videoHeight: 视频画面的高度
    },
    onFullScreenChange(e) {
      console.log('全屏状态变化:', e.detail.fullScreen, '方向:', e.detail.direction)
    },
    onError(e) {
      console.error('播放错误:', e.detail.errMsg)
    },
    // 截图
    async takeSnapshot() {
      try {
        const imagePath = await this.$refs.livePlayer.snapshot()
        console.log('截图成功，临时路径:', imagePath)
        // 这里可以进一步处理截图，例如上传或保存
      } catch (err) {
        console.error('截图失败:', err)
      }
    },
    // 切换静音状态
    toggleMute() {
      this.isMuted = !this.isMuted
    },
    // 重新加载直播
    reload() {
      this.$refs.livePlayer.reload()
    }
  }
}
</script>

<style>
.control-panel {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
</style>

属性说明

事件说明

方法说明

通过 ref 可以调用组件的以下方法：

注意事项

1. 微信小程序、百度小程序等平台使用live-player组件需要符合平台规定的类目，并且通过审核，请参考各平台规定。
2. 在实际应用中，建议处理好网络异常、播放出错等情况，提供友好的用户体验。
3. App端不支持live-player，请使用video组件代替。
4. 小程序中如需在live-player上覆盖内容，请使用cover-view和cover-image组件。